<CSS> 레이아웃 (1) - 박스 모델

- CSS 레이아웃

웹 문서의 구성은 기본적으로 박스를 기준으로 되어있다. 즉, 박스 모델이다. CSS 레이아웃은 이 박스 모델에 기초하고 있다. 

 

박스 모델은 아래 두 가지의 요소에 따라 나열 방법이 달라진다.

1) 블록 레벨(block-level) 요소

블록 레벨 요소란, 박스들이 가로로 각각 한 줄씩을 차지하는 요소들을 말한다. 따라서 세로로 길게 한 줄로 늘어서게 되며, 각 줄의 요소 옆에는 다른 박스가 올 수 없다.

*블록 레벨 태그 - <p>, <h1>~<h6>, <ul>, <ol>, <div>, <blockquote>, <form>, <hr>, <table>, <fieldset>, <address>

 

2) 인라인 레벨(inline-level) 요소

인라인 레벨 요소란, 블록 레벨 요소와 달리 한 줄에 여러 박스들이 위치할 수 있는 형태의 요소를 말한다. 보다 쉬운 이해를 위해 의인화를 해보자면, 블록 모델 요소들은 욕심이 많아 각각 한 줄씩을 혼자서 다 차지하려는 요소들이고, 인라인 레벨 요소는 비교적 너그럽게 각자가 차지하고 있는 줄의 옆자리를 다른 인라인 레벨 요소들과 함께 나누어 쓴다고 보면 되겠다.

*인라인 레벨 태그 - <img>, <object>, <br>, <sub>, <sup>, <span>, <input>, <textarea>, <label>, <button>

 

 

- 박스 모델

이제 CSS의 박스 모델에 대해 좀 더 구체적으로 알아보자면, 박스 모델은 크게 4가지 영역으로 나뉜다. 가장 내부에 위치하며 핵심적인 역할을 담당하는 '콘텐츠 영역', 콘텐츠 영역을 감싸는 테두리인 'border(테두리) 영역', 그리고 이 콘텐츠 영역과 테두리 영역 사이의 공간을 담당하는 'padding 영역', 마지막으로 박스들 사이의 여백을 담당하는 'margin 영역'이 그것이다.

 

 

- 박스 모델의 기본 속성들

1) width, height

박스 모델에서 가장 핵심적인 부분인 콘텐츠 영역의 크기를 설정하는 속성이다. width는 가로, height는 세로를 나타낸다. 크기는 px이나 cm의 수치로 나타내거나, 부모 요소를 기준으로 한 백분율 크기, 혹은 자동으로 결정되는 auto 중 선택하여 크기를 설정할 수 있다.

 

2) display

앞서 설명한 블록 레벨과 인라인 레벨의 요소를 때에 따라 바꾸어야 할 필요가 있다. 그럴 때 사용하는 것이 display 속성이다. 블록 레벨의 요소에 display: inline을 설정하면 인라인 레벨 요소로 바뀌고, 인라인 레벨 요소에 display: block을 설정하면 블록 레벨 요소로 바뀐다. 혹은 display: inline-block로 설정하여 두 특성을 모두 가지는 요소로 바꿀 수도 있다. 또한, none으로 설정할 경우 해당 요소를 화면에서 표현하지 않는다. visibility: hidden;과 비교되는데, visibility 속성은 똑같이 화면에서 해당 요소를 표현하지 않지만 해당 요소가 차지하고 있는 공간은 그대로 둔다는 것에 그 차이점이 있다. 따라서 필요에 따라 두 속성 중 골라 사용하면 된다.

 

 

 

 

 

참고 : 도서 <Do it! HTML5+CSS3 웹 표준의 정석>