바빠서 틈틈이, 계속 작성중인 문서입니다~
작성이 완료 되면 이 문구는 사라집니다~




박스모델과 객체의 공간에 대한 기본적인 이해

HTML과 CSS를 분리하여 웹페이지를 제작할 때, CSS를 이용하여 레이아웃을 구성합니다.
(물론 HTML 구조화도 CSS 코딩 못지 않게 중요합니다. 의미에 맞는 HTML구조화는 기본입니다.)
CSS로 레이아웃을 구성할 때, 박스모델만 이해를 하고 있으면 CSS코딩의 50% 이상은 먹고 들어갑니다. 박스모델에서 가장 중요하게 쓰이는 것이 margin과 padding 입니다.

• margin은 border를 기준으로 바깥에 있는 공간입니다.
• padding은 border를 기준으로 안쪽에 있는 공간입니다.

위의 그림을 봐주세요.
4개의 박스모델로 레이아웃이 구성되어 있습니다. 검정색 선은 border 입니다. 박스를 눈으로 보여주는 껍데기라고 생각하시면 됩니다.

border를 기준으로 안쪽에 파란색이 칠해져 있습니다. 그 파란색 부분이 padding 입니다. padding은 박스와 실제 컨텐츠 사이의 여백을 의미합니다.

border를 기준으로 바깥쪽에는 연두색이 칠해져있습니다. 이 부분이 margin 입니다. margin은 박스모델바깥의 여백을 의미합니다. 박스들이 너무 따닥따닥 붙어있다면 답답하겠죠? margin과 padding이 조금은 이해가 가실런지 모르겠습니다^^;;

네이버 인기검색어의 박스모델과, 제 블로그 우측의 사이드바의 박스모델로 margin과 padding을 설명하였습니다. 찬찬히 보시면 이해가 가시리라 생각됩니다.


margin과 padding 속성을 제대로 활용하는 방법

기본적으로 margin과 padding을 다음과 같이 사용할 수 있습니다.

.box { margin: 20px; }

이렇게 사용하면 박스모델의 상하좌우 모두를 마직 20픽셀로 띄우겠다는 말이됩니다.
그리고 반드시 px, em 등의 단위를 붙여줘야 한다는 사실도 잊으시면 안되겠구요~
(단, 값이 0일때는 단위를 안 붙여도 무방합니다.)

그럼 이런 질문도 스스로 해 볼 수 있습니다.
난 왼쪽에만 20px의 공간을 주고 나머지는 10픽셀을 주고 싶은데....

이렇게 코딩 해보면 되겠습니다.

.box { margin: 10px 10px 10px 20px; }


그럼 margin과 padding은 어떤 태그든지 모두 사용 가능한가요?

일단 블록라인 태그와 인라인 태그에 대해서 알아두실 필요성이 있는데요.
테트리스를 생각해보세요. 블럭들이 아래로 내려가면서 하나씩 하나씩 차곡차곡 쌓이죠? 웹브라우저는 이와 반대로 블럭들을 위에서 부터 하나씩 쌓아갑니다. 그리고 좌측에서 부터죠.


실수 빈도가 높은, 주의할 점 몇 가지

박스의 크기(width, height)는 border 값과 padding 값을 빼주어야 합니다.
예를들어, 가로 200픽셀, 세로 200픽셀의 정사각형 모양의 고정된 박스가 있다고 가정합시다.
이 박스의 클래스명이 box 라고 할 때, css는 다음과 같이 정의될 수 있겠습니다.

.box { width: 200px; height: 200px; }

헌데 만약에 이 박스에 두께 1픽셀의 검정색 테두리가 들어가게 되면, 아래와 같은 박스를 만들 수 있겠지요.

.box { width: 200px; height: 200px; border: 1px solid #000; }

이 박스의 너비와 높이는 실제로 가로 202px, 세로 202px 이 되었습니다. 왜냐하면 border값이 추가 되었기 때문인데요. 한 면당 1px씩 빼주어야 합니다. 그렇다면 스타일은 아래와 같이 다시 정의되어야 겠지요.

.box { width: 198px; height: 198px; border: 1px solid #000; }

이렇게 해주어야. 실제로 가로세로 200px 인 박스가 되겠습니다.

이렇게 완성된 박스안에 컨텐츠를 임의로 넣어보겠습니다.
컨텐츠가 박스에 딱 달라붙는군요. 그래서 박스와 컨텐츠사이에 여백을 줘 보겠습니다.
아까 배운 padding 을 이용해서 줄 수 있겠지요. padding을 15픽셀 정도 줘 보겠습니다.

.box { width: 198px; height: 198px; border: 1px solid #000; padding: 15px; }

padding을 15픽셀 주었으니 상하좌우에 15픽셀씩 패딩값이 들어갔겠죠?
그러면 가로값 30픽셀을 빼주고, 세로값도 30픽셀을 빼주어야겠죠.

.box { width: 168px; height: 168px; border: 1px solid #000; padding: 15px; }

이렇게 되어야, 실제로 가로 200픽셀, 세로 200픽셀인 박스가 만들어집니다.
가로 168px + 좌측border 1px + 우측 border 1px + 좌측 padding 15px + 우측 padding 15px = 200픽셀

이해가 가시죠^^?

만약 위의 예제처럼 border가 1픽셀 들어가있고, padding이 15픽셀 들어가 있는 박스에 width 값을 200픽셀 주게되면 실제로는 232px 짜리 박스가 만들어집니다. 그러면 계획했던 200픽셀 박스를 만드는 것은 실패하고 레이아웃은 산산조각이 나겠지요.

잊지마세요.

고정크기의 레이아웃을 만들 때, border 값과 padding 값 만큼의 사이즈를 빼주어야. 실제로 원하는 사이즈를 얻을 수 있다는 사실을요^^!