블로그 스킨 제작할 때 뿐 아니라, 최근 웹 표준의 준수와 시멘틱 웹에 관심이 높아지면서 CSS에 대한 관심은 너무 나도 높아져 가고있습니다.
스킨을 제작할때는 말할것도 없지요, 기본적으로 어떤 특정 내용들을 묶을때 DIV를 이용하여 묶고는 합니다.
여러종류를 묶을때는 DIV로 한줄의 짧은 텍스트는 SPAN을 쓰기도 하고 문단은 P라던지... 하지만 스킨 제작을 하다보면 DIV를 사용하여 각 개체를 묶어주는게 보통입니다.

오늘은 그런 각 개체의 여백을 조절하는 부분과 테두리에 대하여 알아보겠습니다.
들어가기에 앞서 먼저 이미지를 한번 살펴봐주세요.


눈치 빠른 분들은 위의 이미지를 보면 아! 이거구나~ 하고 금새 눈치 채실 것 같은데요?
총 4가지의 부분으로 나뉘어집니다.

1. 컨텐츠 영역
2. 안쪽 여백(Padding)
3. 바깥 여백(Margin)
4. 테두리(Border)
   

까만 구분선 안의 컨텐츠 영역과 안쪽 여백부분은 DIV 내부 영역이라고 하였는데 표현상 그렇게 한것이 아니고, DIV에 예를들어 배경색에 대한 스타일을 선언해주었다면 Padding 부분까지 영향을 받기에 해두었습니다.

좀 더 사이즈에 대해 자세히 알아봅시다!!

이렇게 포토샵으로 먼저 초안을 잡으면서 디자인 해놓고, 나중에 HTML과 CSS에서 코딩을 할 때에..

"음.. 난 가로 210에 세로 210으로 만들꺼니까 DIV의 width와 height를 210px로 해야지~" 라고 생각하신다면 안된다는 말이죠~

쉽게 설명하면 padding은 해당 개체(예:DIV)의 영역에 포함되고 border와 margin은 해당 개체의 주위를 둘러싸는 형태입니다.
padding은 개체의 영역에 포함된다고 해도 해당 개체의 사이즈에 속해있는게 아니라 또 다른 별도의 사이즈를 갖기에 초기 개체 사이즈를 넣어줄 때 padding영역을 뺀 값을 해주셔야합니다.

그럼 올바르게라면 이렇게 생각해야겠죠?
"음.. 난 가로 210에 세로 210 사이즈에, 테두리 5에 내부여백 10이니까.. DIV의 크기는 가로세로 180으로 해야겠구나!" 라고 되어야하는겁니다~

결론은 실제 사용할 수 있는 컨텐츠 사이즈만큼만 DIV의 가로 or 세로를 지정해주셔야 합니다.

위의 예제에 나온 소스코드는 아래처럼 되겠네요. 메모장에 붙여넣기 후 test.html로 저장해서 브라우져로 열어보세요~

<style>
    .teststyle
    {
        width:180px;
        height:180px;
        padding:10px;
        margin:10px;
        background-color:#ffff99;
        border:5px solid #e7b7dd;
    }
</style>

<div class="teststyle">Blogessence Contents</div>

오늘은 간단한 개념만 알려드리고자 하였고, 너무 길어지면 보는사람도 머리가 아프니까 여기서 끝마치도록 하겠습니다.
그냥 그때그때 생각나는것을 포스팅 하려했는데, 그렇다면 다음에 포스팅 할 내용도 정해졌군요..
이 다음엔 "padding과 margin의 자세한 사용법" 과 "border의 사용법"으로 나누어서 포스팅 하겠습니다.
도움이 되는분이 꼭 있길.. 없으면.. orz