width Property | height Porperty
width Property
[Ç¥ º¸´Â ¹æ¹ý]
| width Property |
| Value |
<length
> | <percentage
> | auto | Inherit |
| Initial |
auto |
| Applies to |
all elements but non-replaced inline elements, table rows, and row groups |
| Inherited |
no |
| Percentages |
refer to width of containing block |
| Media |
|
| HTML Syntax |
{ width: sWidth } |
| Scripting |
object.style.width [ = sWidth ] |
height Property
| height Property |
| Value |
<length
> | <percentage
> | auto | Inherit |
| Initial |
auto |
| Applies to |
all elements but non-replaced inline elements, table columns, and column groups |
| Inherited |
no |
| Percentages |
see prose |
| Media |
Visual |
| HTML Syntax |
{ height: sHeight } |
| Scripting |
object.style.height [ = sHeight ] |
width Property, height Property
width Property´Â container boxÀÇ °¡·Î ÆøÀ» ÁöÁ¤ÇÏ´Â PropertyÀÔ´Ï´Ù. ±æÀÌ ´ÜÀ§(px, cm, mm, in)·Î ÁÙ ¼öµµ ÀÖ°í, Percentage·Î ÁÙ ¼öµµ ÀÖ½À´Ï´Ù. width¸¦ %(percentage)´ÜÀ§·Î ÁöÁ¤Çϸé ÁöÁ¤ÇÑ blockÀÇ »óÀ§ block ÀÇ Å©±â¿¡ ´ëÇÑ »ó´ë Å©±â°¡ µË´Ï´Ù.
- length
px, pt, cm, mm, in µîÀÇ ±æÀÌ ´ÜÀ§¸¦ »ç¿ëÇÏ¿© ÁöÁ¤ÇÕ´Ï´Ù.
- percentage
Block ÀÚ½ÅÀÌ ´ã°ÜÀÖ´Â »óÀ§ BlockÀÇ width¿¡ ´ëÇÑ percentage(¹éºÐÀ²)´ÜÀ§°¡ µË´Ï´Ù. ÀÌ °æ¿ì´Â »óÀ§ BlockÀÇ Å©±â°¡ ¹Ù²î¸é ÀÚ½ÅÀÇ widthµµ ÀÚµ¿ÀûÀ¸·Î ¹Ù²î°Ô µË´Ï´Ù. »óÀ§ BlockÀÌ body¶ó¸é ºê¶ó¿ìÀú âÀÇ Å©±â°¡ ¹Ù²î¸é Block ÀÚ½ÅÀÇ Å©±âµµ µû¶ó¼ º¯ÇÏ°Ô µË´Ï´Ù. HTML Web Image ÆäÀÌÁö¿¡¼ÀÇ »ó´ëÅ©±â·Î ÁöÁ¤ÇÑ À̹ÌÁö¿Í length·Î ÁöÁ¤ÇÑ À̹ÌÁö¸¦ ºñ±³ ÇØ º¸½ÃÁ®.
- auto - widthÀÇ °æ¿ì
widthÀÇ °æ¿ì auto·Î ÁöÁ¤Çϸé 100%ÀÇ Å©±â°¡ µË´Ï´Ù. µû¶ó¼ ÀÚ½ÅÀÇ »óÀ§ BlockÀÌ Çã¿ëÇÏ´Â width¸¦ ²Ë ä¿ì°Ô µË´Ï´Ù.
- auto - heightÀÇ °æ¿ì
heightÀÇ °æ¿ì auto·Î ÁöÁ¤Çϸé 0%ÀÇ Å©±â°¡ µË´Ï´Ù. ÀÌ °æ¿ì height¸¦ °áÁ¤ÇÏ´Â ¿äÀÎÀº Block Box ¼ÓÀÇ ³»¿ë¹°ÀÇ Å©±â°¡ µË´Ï´Ù. Áï, text°¡ ÁٹٲÞÀ» ÇÏ¸é¼ ³»¿ëÀÌ ¸¹¾ÆÁö¸é ÀÚµ¿À¸·Î height°¡ ³»¿ë¿¡ ¸Â°Ô ´Ã¾î³ª°Å³ª, Å« Image ÆÄÀÏÀÌ µé¾î°¡¸é ¿ª½Ã ±× Å©±â¿¡ ¸ÂÃß¾î¼ height¸¦ ÀÚµ¿ Á¶Á¤ÇÏ°Ô µË´Ï´Ù.
Ãâ·Â°á°ú
| 200px |
300px |
400px |
500px |
60% |
100% |
¼Ò½º º¸±â
ÀÔ·Â
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<CENTER>
<DIV id="div_2" style="width:400px;height:300px;border:1px solid tomato;padding:5%;">
<DIV style="width:100%; height:100%; border:1px solid royalblue;"></DIV>
</DIV>
</CENTER>
<table width="100%" style="table-layout:fixed;" border="1">
<tr>
<td onclick="div_2.style.width='200px';">200px</td>
<td onclick="div_2.style.width='300px';">300px</td>
<td onclick="div_2.style.width='400px';">400px</td>
<td onclick="div_2.style.width='500px';">500px</td>
<td onclick="div_2.style.width='60%';">60%</td>
<td onclick="div_2.style.width='100%';">100%</td>
</tr>
</table>
</BODY>
</HTML>
À§ÀÇ Source¿¡¼ º¸´Â ¹Ù¿Í °°ÀÌ block Box¿Í Block Box¿¡ ´ã±â´Â ÇÑ ´Ü°è ÇÏÀ§ Block Box¿Í ÀÏÁ¤ÇÑ paddingÀ» À¯ÁöÇÏ·Á¸é ÇÏÀ§ Block BoxÀÇ width¿Í height¸¦ 100%·Î ÁÖ°í, »óÀ§ Block BoxÀÇ paddingÀ» ÁöÁ¤ÇØ ÁÝ´Ï´Ù. ÀÌ·¸°Ô µÇ¸é Ç×»ó ÀÏÁ¤ÇÑ ºñÀ²À» paddingÀ» À¯ÁöÇÏ°Ô µË´Ï´Ù. ¹°·Ð Percentage°¡ ¾Æ´Ñ pixelµîÀÇ ´ÜÀ§¸¦ ÁÖ¸é ºñÀ²À» À¯ÁöÇÏ´Â °ÍÀÌ ¾Æ´Ï°í, ÁöÁ¤ÇÑ ÀÏÁ¤ °£°ÝÀÇ paddingÀ» À¯ÁöÇÏ°Ô µÇ°Ú½À´Ï´Ù. ¾Æ·¡ÀÇ ¿¹Á¦¸¦ Âü°í ÇϽÃÁ®. ¾Æ·¡ÀÇ ¿¹Á¦´Â paddingÀ» 20px·Î ÁöÁ¤ÇÑ ¿¹Á¦ÀÔ´Ï´Ù
Ãâ·Â°á°ú
| 200px |
300px |
400px |
500px |
60% |
100% |
¼Ò½º º¸±â
ÀÔ·Â
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<CENTER>
<DIV id="div_4" style="width:400px;height:300px;border:1px solid tomato;padding:20px;">
<DIV style="width:100%; height:100%; border:1px solid royalblue;"></DIV>
</DIV>
</CENTER>
<table width="100%" style="table-layout:fixed;" border="1">
<tr>
<td onclick="div_4.style.width='200px';">200px</td>
<td onclick="div_4.style.width='300px';">300px</td>
<td onclick="div_4.style.width='400px';">400px</td>
<td onclick="div_4.style.width='500px';">500px</td>
<td onclick="div_4.style.width='60%';">60%</td>
<td onclick="div_4.style.width='100%';">100%</td>
</tr>
</table>
</BODY>
</HTML>
ÀÌ ¹®¼ÀÇ ÀúÀÛ±ÇÀº www.cadvance.org ¿¡ ÀÖ½À´Ï´Ù.
|