'박스모델'에 해당되는 글 1

  1. 2009.12.11 CSS : Box Model
2009.12.11 16:00 | 개발이야기

CSS를 이용하여 레이아웃을 잡을때 크게 세가지를 이용하는데요,
하나가 position, 두번째가 float, 그리고 나머지 하난 이제 다룰 Box Model 입니다 ^^

기본적으로 우리가 html에서 다루는 거의 대부분의 요소[각주:1]는 상자와 같은 Box Model로 되어있습니다.
이전에 다루었던 position이나 float은 해당 요소들이 어느곳에 배치 될 것인지를 각각
절대적인 방법 혹은 상대적인 방법으로 결정을 해 주었다면
이 box model은 해당 요소의 테두리나 여백등의 직접적인 레이아웃을 결정하게 됩니다.

이미지를 하나 보도록 하겠습니다.

Box Model

위의 이미지는 Box Model을 설명 해 놓은 그림입니다.
크게 네가지 영역으로 구성이 되어 있는데요, 각 영역은 다음과 같습니다.

content : 우리가 작성하여 보여지는 영역
padding : content영역을 둘러싸고있는 content와 테두리(border)사이 여백
border : 테두리
margin: 테두리 바깥부분의 여백

또한, CSS 2에 따르면 해당 영역의 width와 height는 content 영역의 크기[각주:2]를 말합니다.
결국 해당 박스의 최종 크기[각주:3]는 content의 width/height의 값에다가 padding과 border값을 합한 값이 됩니다.

자, 그렇다면 위의 값들은 어떤식으로 사용을 하는지 다음 예제를 보도록 하겠습니다.

HTML

CSS

위의 예제들을 브라우저 상에서 보면 다음과 같이 보입니다.

바깥의 검은영역이 wrap 부분이고, 그 안의 하얀색 부분이 box_1 부분입니다.
바깥영역은 margin이 생겼다는것을 볼 수 있도록 하기 위해서 넣어봤는데요..
내부의 box_1 부분을 가지고 설명을 하도록 하겠습니다.

width:250px, height:150px 로 박스의 내용이 들어갈 영역의 크기를 설정합니다.
위의 예는 가로 250px, 높이 150px의 상자가 생성이 됩니다.
이 값은 px(픽셀)로 줄 수도 있고, em이나 %등 다양한 단위로 줄 수 있습니다 ^^

그리고 background-color:#fff 로 해당 영역의 배경색을 설정 해 주는데요
#fff부분이 색상이 들어가는 부분이며 보통은 #ffffff 와 같이 #+여섯자리의 16진수로 표현을 하는데
일부 #ffffff 처럼 모든 자리수가 동일 할때는 보는것처럼 각자리 하나씩만 해서 총 세자리로 표현하기도 합니다.
이 배경색부분은 box model에서 content영역과 padding영역에 적용이 됩니다.

그 다음 남은 속성중 padding: 20px 20px 20px 20px, margin: 40px 40px 40px 40px 가 보이네요
이부분은 각각 padding과 margin영역의 크기를 결정 해 줍니다. 마찬가지로 px, %등 여러 단위가 적용이 가능한데요

사실 이부분은 각각 다음과 같이 표현이 됩니다.

위처럼 각 네부분의 영역을 따로 지정해주는 것을 간편하게 한번에 몰아서 지정해 줄수 있는데요
padding 혹은 margin 다음에 나오는 네부분의 숫자는 각각 위 오른쪽 아래 왼쪽 순서입니다.
쉽게 생각해서 시계 12시방향부터 시작해서 시계바늘이 움직이는 방향순으로 지정해준다고 보시면 됩니다.

또한, 위 예제처럼 모든 영역이 동일한 값을 가진다면 다음과 같이 CSS 선언을 해줘도 됩니다.

이처럼 간략하게 하나만 지정을 해 줄수도 있으며, 연달아 2개 3개도 쓸 수 있는데요,
2개를 지정해주면 상/하 값 좌/우 값을 표현하고,
3개를 지정해주면 상 좌/우 하 이렇게 표현하게 됩니다 ^^

다음 설명할 부분으로 border:10px solid #800000 이 있는데요,
이 부분은 박스모델의 테두리를 지정해주는 부분입니다.

이 border부분도 margin/padding 과 마찬가지로 여러 부분으로 나뉠 수 있는데요
border-top-width, border-right-width, border-bottom-width, border-left-width : 테두리의 굵기
border-top-style, border-right-style, border-bottom-style, border-left-style : 테두리의 모양
border-top-color, border-right-color, border-bottom-color, border-left-color : 테두리의 색깔
이렇게 나눌 수 있습니다. 

즉, border:A B C 로 지정 하는 경우 테두리의 상하좌우 모두 똑같이 설정하는데,
A만큼의 두께로 B모양처럼 C색깔로 설정한다고 보면 됩니다.
이 역시 마찬가지로 border-top, border-right, border-bottom, border-left 로 각각 개별 설정이 가능합니다.

특이하게 여길부분은 style 부분인데요,
이 부분에 사용할 수 있는 값으로는
solid, dashed, dotted, double, groove, inset, outset, ridge 등의 값이 있습니다.
그중에서 실선인 solid를 많이 사용하곤 하지요..^^

크로스 브라우징을 염두해 두고 html문서를 작성하다보면 이러한 박스모델에서 골치썩는일이 생기는데요,
바로 브라우저마다 렌더링을 하는 방식이 달라 아래와 같은 문제점이 발생하기도 합니다.

DTD[각주:4]를 정의하지 않는 쿼크(Quirks) 모드로 렌더링시 브라우저마다 달라지는 현상이 생깁니다.
확인을 해 보면 IE쪽은 width, height가 box model의 border 기준으로 잡혀 있고,
FF쪽은 content영역의 width, height로 잡혀 있습니다. 이를 해결하려면 html 문서에 다음과 같이
DTD를 선언 해 주면 됩니다.

위의 소스에서 <!DOCTYPE HTML.... 로 시작하는 부분이 바로 DTD부분입니다.
이 한줄로 인해서 브라우저는 html문서가 html 4.01 strict[각주:5]로 제작되었다고 해석하고 그에 맞는 렌더링 방법으로
보여지게 됩니다.

이것으로 레이아웃에 필요한 포지셔닝, 플로팅, 박스 모델까지 대충 정리가 되었는데요
이 세가지만 확실하게 알고 있으면 이런 블로그 스킨의 레이아웃을 만든다던가 할때
생뚱맞는 table 태그를 이용해서 레이아웃을 짜는것보단,
조금은 웹표준에 가까운 div태그등을 이용하여 레이아웃을 짜는데 큰 도움이 될듯 하네요 ^^



  1. br, strong 등의 태그는 box model에 해당하지 않습니다. [본문으로]
  2. IE6와 같은 구형 브라우저에서는 이게 잘 지켜지지 않기도 합니다. 이럴땐 DTD를 명시해줌으로 해서 해결이 됩니다. [본문으로]
  3. 사용자가 지정한값이 아닌 실제로 보여지는 상자의 크기 [본문으로]
  4. Document Type Definition 의 약자로, 해당 html문서가 어떤 형태의 html을 가지고 작성했는지 알려주는 역할을 합니다. [본문으로]
  5. DTD에 대한 설명은 http://trio.co.kr/webrefer/html/sgml/dtd.html 에 자세히 나와있습니다. [본문으로]

'개발이야기' 카테고리의 다른 글

HTML 기본 구조  (2) 2009.12.15
HTML  (4) 2009.12.14
CSS : Box Model  (0) 2009.12.11
CSS : Float 흐름끊기  (2) 2009.12.10
CSS : Float  (0) 2009.12.09
CSS Position 이야기  (9) 2009.12.08