width

width 속성은 요소의 가로 크기를 정의하는 데 사용하는 속성이다.
정확히는 content 영역의 너비를 지정한다.

width의 속성 값

auto
length : px, em
percent : %

width 적용 범위

• inline-block, block 요소에 적용 된다. inline요소는 적용불가
• width에 auto가 아닌 특정 값을 지정 시 content영역의 크기를 제어할 수 있다.
• box-sizing : border-box 속성을 사용하면 padding, border까지의 영역을 width로 제어할 수 있다.

이외 특징(%)

%로 width 값을 적용 할 땐 부모 요소의 값(padding, border영역을 제외한 content영역)을 기준으로 한다. 이 때 부모 요소가 inline 요소일 경우 가장 가까운 블록요소 조상의 width값을 참고하고 최상단까지 블록요소가 없으면 body의 값을 참고 한다.

height

요소의 세로 크기를 정의하는 데 사용하는 속성이다.
width와 마찬가지로 정확히는 content의 높이를 지정한다.

height 속성 값

auto
length : px, em
percent : %

height 적용 범위

• inline-block, block 요소에 적용 된다. inline요소는 적용불가
• width에 auto가 아닌 특정 값을 지정 시 content영역의 크기를 제어할 수 있다.
• box-sizing : border-box 속성을 사용하면 padding, border까지의 영역을 width로 제어할 수 있다.

이외 특징 (%)

• %로 height 값을 적용 할 땐 부모 요소의 height 값이 지정되어 있어야 한다.
• 부모 요소가 inline일 경우 height값이 지정된 상위 조상의 값을 참고한다.
• 부모 요소가 inline요소가 아니고 content내용으로 높이가 있으나 지정 된 height값이 없으면 조상의 height값을 참고하지 않으며 %는 적용되지 않는다.

%로 속성값 적용 시 width와 height 차이점

width는 부모요소에 가로값을 지정하지 않아도 컨텐츠영역을 우선참고하여 값을 적용하나,
(단, 조상 요소에 width값이 부모의 width값보다 작으면 조상 요소 우선 참고)
height는 부모요소에 세로값을 지정해주지 않으면 컨텐츠영역 자체에 높이가 있어도 % 적용이 되지 않는다.
(최상단인 body도 height 값이 지정되어있지 않으면 자식 요소에 %적용되지 않음)