Box model, 상자

이번시간에는 BOX모델에 대해 알아보도록 하겠습니다. 

CSS를 배울 때 이해해야 되는 것 중 하나가 많은 element들이 box, 상자형태라는 점과, 그 요소가 4개 라는 것입니다. 

 

 

1> 첫 번째는 contents, 컨텐츠, 내용,
2> 두 번째는 박스의 경계, border, 보더,
3> 세 번째는 padding, 패딩, 박스의 보더, border에서 안쪽으로 있는 간격,
4> 그리고 마지막 네번 째는 margin, 마진, 박스의 border, 보더에서 바깥쪽으로 있는 간격
정리하면, contents, 컨텐츠와 border, 경계 안쪽에 있는 간격이 padding이고, 바깥에 있는 간격은 margin입니다.

그럼 이제 HTML문서로 가서, title에는 Box Model이라고 쓰고, incline방법으로 CSS 작업을 해 보겠습니다.

 

 

그 다음, body부분에 박스를 한 개를 만들고, 그 안에 박스를 하나 더 만들겠습니다.

 

 

.box>.inside-box 작성하거나, <div class="box"> <div class="inside-box"></div> </div>작성합니다.

그럼 incline방법으로 html 배경색은 초록색, 그리고 padding과 margin은 0에다가 높이는 100%으로 작성해 보겠습니다.
<style> body,html{padding: 0; margin: 0; background-color: green; height: 100%;} </style>

 

 

그럼, 크롬에서 HTML문서의 배경색이 초록색임을 확인할 수 있습니다. 

이번에는 box의 배경색은 노란색, 그리고 폭과 높이를 모두 50% 으로 작성해 보겠습니다.
<style> body,html{padding: 0; margin: 0; background-color: green; height: 100%;} 
.box{background-color: yellow; width: 50%; height: 50%;} </style>

 

 

해당 페이지를 새로고침하면, 노란색 상자가 생겼음을 확인할 수 있습니다.

마지막으로, inside-box의 배경색은 파란색, 그리고 폭과 높이를 모두 50% 으로 작성해 보겠습니다. 
<style> body,html{padding: 0; margin: 0; background-color: green; height: 100%;} 
.box{background-color: yellow; width: 50%; height: 50%;}
.inside-box{background-color: blue; width: 50%; height: 50%;}</style>

 

 

여기서 새로고침하면, 초록색 배경에다가 노란색 박스와 그 안에 파란색 박스, 총 2개의 박스를 확인할 수 있습니다. 

이번에는 padding, border의 안쪽에 있는 간격을 살펴 보겠습니다. 
겉에 있는 박스, 노란색 박스에 border의 안쪽에 있는, padding 상단에다가 50px, 50픽셀을 주도록 하겠습니다. 
.box{background-color: yellow; width: 50%; height: 50%; padding-top: 50px;}

 

 

다시 해당 페이지를 새로고침 해 보면, 위와 다르게, padding, border 안쪽으로 간격이 생긴 것을 확인할 수 있습니다. 

한 번 더, 노란색 박스에 border의 안쪽에 있는, padding 왼쪽에다가 50px, 50픽셀을 주도록 하겠습니다. 
.box{background-color: yellow; width: 50%; height: 50%; padding-top: 50px; padding-left: 50px;}

 

 

이번에도 새로고침하면, padding, border 안쪽면 왼쪽에 간격이 생긴 것을 확인할 수 있습니다.

이처럼, padding이란 border안쪽으로 생긴 간격을 말합니다. 

이번에는 border 바깥쪽으로 생기는 간격, margin을 살펴보도록 하겠습니다.
.box{background-color: yellow; width: 50%; height: 50%; padding-top: 50px; padding-left: 50px; margin-top:50px;}

 

 

노란색 박스의 바깥쪽으로 margin이 50px, 50픽셀 생긴 것을 확인할 수 있습니다. 

그럼 이번에는 border 바깥쪽으로 생기는 간격, margin의 왼쪽에다가 50px을 주도록 하겠습니다. 
.box{background-color: yellow; width: 50%; height: 50%; padding-top: 50px; padding-left: 50px; margin-top:50px; margin-left:50px;}

 

 

노란색 박스는 padding은 위쪽, 왼쪽에 각각 50px씩, margin도 위쪽, 왼쪽에 각각 50픽셀 있습니다. 

따라서, box, 상자의 border, 경계에서 안쪽을 padding이라 하고, 바깥쪽을 margin이라고 합니다.

이제 padding에서 편리하게 쓸 수 있는 단축키에 대해 알아보도록 하겠습니다.
먼저, padding을 상하좌우 모두 동일하게 30px로 설정하고 싶다면, 
.box{background-color: yellow; width: 50%; height: 50%; padding: 30px;}와 같이 작성하면 됩니다.

 

 

상하좌우 padding이 30px씩 간격이 생성된 것을 확인할 수 있습니다. 

만약, padding을 상하는 20px씩, 좌우는 40px씩 주고 싶다면, 
.box{background-color: yellow; width: 50%; height: 50%; padding:20px 40px;}와 같이 작성하면 됩니다.
이때, padding 작성 후, 첫 번째 숫자는 상하를 의미하고, 두 번째 숫자는 좌우를 의미하기 때문입니다.

 

 

상하는 padding이 20px, 좌우는 padding이 40px씩 생성되는 것을 확인할 수 있습니다.

그럼, padding을 상, 하, 좌, 우 모두 다르게 값을 주고 싶다면, 
padding 작성 후, 상->우->하->좌 순으로, 시계방향으로 값을 주면 됩니다.
.box{background-color: yellow; width: 50%; height: 50%; padding:30px 10px 20px 40px;}

 

 

마찬가지로, 새로고침을 해서 화면을 확인할 수 있습니다.

 

 

크롬에서 마우스 오른쪽 버튼 클릭 후, 검사(N)를 클릭해도, 설정한 값을 오른편 상자에서 확인할 수 있습니다. 

margin도 padding과 동일하게 단축키를 사용할 수 있습니다. 
.box{background-color: yellow; width: 50%; height: 50%; margin:20px 10px 5px 2px;}

 

 

 

정리하면, padding, margin 모두 단축키를 이용할 때,  
한 개의 값을 쓰면, 상하좌우 네 개의 값이 모두 동일하게 적용되고, 
두 개의 값을 쓰면, 상하, 좌우가 쌍으로 값이 동일하고,
네 개의 숫자는 상->우->하->좌, 시계방향 순서로 작성해서 적용할 수 있습니다. 

이제 inside-box를 가지고 아주 쉬운, border, 보더, 경계에 대해 알아보도록 하겠습니다. 
border에는 border-width, 보더-폭, border-color, 보더-색상, border-style, 보더-스타일이 있습니다. 

.box{background-color: yellow; width: 50%; height: 50%; padding:20px 10px 5px 2px;}
box에서 margin부분은 padding으로 바꾸고, 
.inside-box{background-color: blue; width: 50%; height: 50%; border-width: 5px; border-color: red; border-style: dashed;}와 같이 작성 후,

 

 

새로고침 하면, 파란색 박스의 경계선, border가 빨간색 점선으로 바뀐 것을 확인할 수 있습니다. 

border도 단축키로 간편하게 간격, 선모양(스타일), 색상 순으로 작성할 수 있습니다. 
.inside-box{background-color: blue; width: 50%; height: 50%; border: 5px solid red;}와 같이 작성하면,

 

 

border의 간격은 5px, border의 선모양, style은 실선, 색상은 빨간색인 것을 확인할 수 있습니다. 

위에서 단축키 없이 만들었던 형태를, border 단축키를 이용하여, 똑같이 만들어 줄 수 있습니다. 
.inside-box{background-color: blue; width: 50%; height: 50%; border: 5px dashed red;}

 

 

 

따라서, paddind은 border에서 안쪽에 있는 간격이고, margin은 border에서 바깥쪽으로 있는 간격입니다.