CSS속성_width & height (Boxmodel part.2)

width 속성

width 속성은 요소의 가로 크기를 정의하는 데 사용하는 속성으로 정확히는 content 영역의 너비를 지정하는 것을 의미하며 인라인 레벨 요소를 제외한 모든 요소에 적용됩니다.

 

width 속성 값 (기본값 0)

1. auto : 브라우저에 의해 자동으로 계산하여 적용합니다. 요소의 레벨 기본 특성에 따라 다르게 동작합니다.

2. length : 고정 값으로 지정합니다. (px, em ...)

3. percent : 부모 요소의 width의 상대적인 크기를 지정합니다.

---

width는 content 영역의 너비를 제어할 때 사용하는데 이때 auto가 아닌 특정한 값을 지정하여 사용하면,

그 크기는 box model 영역에서 margin 영역을 제외한 모든 영역에 대해 영향을 받습니다. (content, padding, border)

예를 들어 { width:100px; padding:20px; border:10px solid; }라고 선언했다면 총 가로 크기는 얼마일까요?

 

총 160 px 입니다. (박스사이징 값)

width (100px) + padding (20*2 =40) + border (10*2=20)  = 160 px

---

또한 속성값이 percent(%)일 때에는 부모의 width값을 기준으로 적용되는데, 이때 부모의 width는 content 영역의 크기를 의미합니다. 부모의 padding과 border까지 더해진 요소의 전체 크기가 아닌, content 영역의 크기가 기준이라는 것을 기억하시면 됩니다.

 

예를 들어 .paraent=(부모) / .child=(자식)이라고 할때, 아래와 같이 선언한 경우

.parent { width:300px; border:20px solid; }

.child { width:50%; padding:20px; border:10px solid; }

 

child의 가로길이는 얼마일까요?

정답은 210 px 입니다.

width (300*50%=150) + padding (20*2=40) + border (10*2=20)

---

height 속성

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

 

height 속성값 (기본값 : 0)

1. auto : 브라우저에 의해 자동으로 계산하여 적용합니다. 기본적으로 컨텐츠영역의 내용만큼 높이를 가집니다.

2. length : 고정 값으로 지정합니다. (px, em ...)

3. percent : 부모 요소의 width의 상대적인 크기를 지정합니다. 단, 부모 요소가 명시적으로 height 값을 가지고 있어야합니다.

---

height는 content 영역의 높이를 제어할 때 사용하는데 이때 auto가 아닌 특정한 값을 지정하여 사용하면,

width 속성과 마찬가지로 box model 영역에서 margin 영역을 제외한 모든 영역에 대해 영향을 받습니다.

예를 들어 { width: 100px; height: 100px; padding:10px; border: 15px solid; } 일때, 총 세로길이는 얼마일까요?

height (100px) + padding (10*2=20px) + border (15*2=30px) = 총 150 px 입니다. (박스사이징 값)

---

또한 속성값이 percent(%)일 때에는 부모의 height 값을 기준으로 적용되는데, 이때 부모는 반드시 height 값을 가지고 있어야합니다.

CSS Height 속성의 percent value에 대한 설명을 보면

"Defines the height as a percentage of the containing block's height."

 = "Containing Block의 높이에 대한 백분율로 높이를 정의합니다."라고 되어있습니다.

여기서 말하는 Containing Block은 부모를 의미한다고 생각하시면 됩니다.

즉, 부모가 명시적인 높이 값을 가지고 있지 않으면 자식의 높이를 %값으로 지정해줘도 적용되지 않습니다.