CSS - 박스 모델

박스 모델 구조

박스 모델은 웹사이트 레이아웃을 구성할 때, 공간의 크기가 어떤 구조로 구성되어 있는지, 그 구성물들 자체를 통틀어 박스 모델이라고 얘기함. 박스 모델은 margin, border, padding, content 4가지 요소로 구성되어 있음. 박스 모델을 잘 이해해야 다른 웹사이트의 레이아웃 구조를 파악하기 쉽기 때문에 이 4가지는 반드시 기억하기.

 

 

margin과 padding의 차이

margin과 padding은 border를 기준으로 생각하면 됨. 박스에 border가 있다고 가정했을 때(border를 사용하지 않았다면 border=0으로 생각), border의 바깥 쪽은 margin, 안쪽은 padding.

• margin-left, right, top, bottom : border 바깥쪽에서 여백을 만듦.
• padding-left, right, top, bottom : border 안쪽에서 여백을 만듦. 

마진과 패딩을 가지고 요소의 위치를 자유롭게 조정할 수 있음. 공간이 여백을 포함한 크기로 변경되는 점은 유의. 위치 변경을 할 때 꼭 사용하는 속성으로 마진과 패딩이 있음.

 

border와 background가 속성값들을 한 줄로 입력할 수 있는 것처럼 margin과 padding도 속성값들을 한 줄로 정렬이 가능함. '12시 시계방향'으로 top, right, bottom, left 순서대로 적어줌. 

<style>
  div { margin: 100px 0 0 100px; }
</style>

 

※ 주의할 점 : 패딩을 가지고 특정 오브젝트의 위치를 변경할 때, 입력한 패딩 값만큼 오브젝트 안이 벌어지면서 여백이 생기기 때문에, 실제 눈으로 보이는 오브젝트의 width값은 패딩 값이 더해져서 더 커짐. 그래서 패딩 값을 줄 땐, 오브젝트를 감싸고 있는 공간의 크기가 달라질 수 있다는 점에 주의. 

 

 

Content

박스 가장 안쪽에는 내용을 담는 content가 있음. 그림의 하늘색 부분이 콘텐츠. (참고로, 이 그림은 크롬 개발자도구 style에서 볼 수 있음) 콘텐츠는 자기가 주체가 되서 움직이는 게 아니라 마진값과 패딩값에 의해서 여백이 생기면서 박스가 밀려남.