width Property | height Porperty

Home > Document > CSS > Positioning > width, height

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로 지정한 예제입니다