박스모델은 웹 페이지를 만드는데 있어 기본 중에 기본이라고 할만큼 중요한 내용이다. 그럼에도 소홀해지기 쉬운 내용인데 제대로 이해하고 있지 못하면 웹페이지의 레이아웃을 설계하다 문제가 발생했을 시에 원인 파악이 힘들어질 수 있다.
박스모델은 html 요소(element)들이 문서 내의 공간을 차지하는 부피에 관한 규칙이다. 차지하는 모양이 네모 박스(box) 모양이라서 박스모델이라고 한다.
태그(tag)들은 내용(content)를 감싸고 있고 내용은 문자 또는 이미지 등이 있으며 문서에서 일정한 부피를 박스모양으로 차지한다. 그리고 내용들 간에 간격이 정해지는지는 방식도 존재한다. 이제부터 하나씩 알아가보자.
박스모델
그림은 html 코드와 브라우저에서 코드를 실행한 모습이다. div 태그에 css 스타일로 5가지 속성을 주었다. 이 속성은 div태그 요소의 박스의 모습을 결정하는 속성들인데 하나하나 따져볼 필요가 있다. 이 때 크롬 브라우저를 사용하면 매우 편리하게 각 속성을 살펴볼 수 있는다.
크롬 브라우저로 앞서 코드를 실행한 후에 div 태그 안쪽 위치에서 마우스 오른쪽 클릭을 한 후 검사(N)를 클릭하면 다음과 같은 창이 열린다.
여러 층으로 구성된 박스들이 보이는데 이것은 div 태그에 대한 박스로 4개의 층으로 이루어져 있다. 각각의 층은 div 태그에 적용된 style에 대응되는데 그림에서 화살표로 표시해 놓았다.
각각의 박스(box)에 마우스를 갖대 대보면 브라우저에 아래와 같이 표시가 된다.
각 속성들에 의해서 각 박스가 어떻게 결정되는지 정확히 알 수 있다.
한번 padding의 위쪽 부분을 넓혀보자.
content와 border 사이에 위쪽 공간이 늘어난 것을 확인할 수 있다. 이 것을 css 스타일의 속성 코드로 표현하면 다음과 같다.
padding: 50px 20px 20px 20px;
- padding
padding은 내용(content)과 border 사이의 간격을 결정하는 속성이다. 속성값은 top(위)쪽부터 시작해서 시계방향으로 순서대로 대응되는데 속성값이 생략될 때는 규칙이 있다.
ex) padding : 50px
top, left, bottom, right 모두 50px 만큼의 간격을 갖는다.
ex) padding : 50px 20px
top, left, bottom, right 이 각각 50, 20, 50, 20의 간격을 갖는다.
ex) padding : 50px 20px 30px
top, left, bottom, right 이 각각 50, 20, 30, 20 의 간격을 갖는다. 부연 설명하자면 bottom 값이 생략되면 top과 같은 값을, left의 값이 생략되면 right와 같은 값을 갖는다.
일반적으로 위와 같이 padding 속성으로 한번에 패딩(padding)을 정하나 다음과 같은 속성이 기본 속성이다. padding은 약식 속성인 것이다.
padding-top, padding-right, padding-bottom, padding-left
각각 패딩(padding)의 상, 우, 하, 좌에 대한 속성이다.
- border
border는 요소를 둘러싸는 테두리에 대한 속성이다. border 역시 padding과 마찬가지로 약식 속성이다.
ex) border: 1px solid red
1px의 두께, 실선, 붉은 색의 테두리를 갖는다.
원래 속성은 다음과 같다.
border-width : 1px;
border-style : solid;
border-color : red;
border-width
값 : thin, medium(기본값), thick, 수치px 등등..
border-style
값 : solid(실선), dashed(짧은선), dotted(점선), double(실선 두개), groove(음각), ridge(양각), insert(안쪽 입체감), outset(밖쪽 입체감), none(기본값), hidden(숨김)
border-color
값 : 색상 코드
- margin
margin은 외부 테두리(border) 밖깥쪽의 공간을 결정한다. 이 공간은 다른 태그 요소가 침범할 수 없다.
margin 속성 역시 padding과 border와 마친가지로 약식 속성이다.
ex) margin : 10px 20px 30px 40px;
border 속성과 규칙은 같다. border 속성을 참고하자.
원래 속성은 다음과 같다.
margin-top : 10px;
margin-right : 20px;
margin-bottom : 30px;
margin-left : 40px;
margin-top, margin-right, margin-bottom, margin-left
마진(margin)의 상, 우, 하, 좌 에 대한 속성이다.
여기까지 기본적인 박스모델을 설명했는데 추가적으로 알아두어야할 box-sizing과 마진겹칩에 대한 내용은 다음 포스팅으로~