1. 박스모델의 개념

CSS에서는 디자인과 레이아웃에 대해 ‘박스모델’이라는 용어를 사용합니다. CSS 박스모델은 본질적으로 HTML 요소를 감싸는 ‘상자’입니다. 좀더 설명을 드리자ㅁ면, 웹 문서에 텍스트, 이미지, 테이블 등의 요소를 배치하기 위해 사용되는 개념입니다. 박스 모델을 이용해서 웹 문서의 전체 레이아웃을 정의할 수 있고, 요소들을 원하는 위치에 배치하여 화면을 디자인할 수 있습니다. HTML5의 태그들 중에서 <br>, <b> 등을 제외하면 거의 모든 태그가 박스 모델의 개념에 적용됩니다. 아래 이미지는 박스모델을 보여줍니다.

w3schools.com의 이미지

박스모델에서 실제 내용(content)이 들어가는 영역을 기준으로 margin(바깥 여백), border(테두리), padding(안쪽 여백)으로 구성됩니다.

margin :박스의 바깥 여백.

border : 박스 테두리의 두께.

padding : 박스 의 안쪽 여백.

content : 실제 내용이 들어가는 곳.

div { width: 360px; border : 1px solid #dddddd; padding: 8px; margin: 10px;  }

2. padding과 margin의 값 사용법과 순서

이해를 돕기위해 제가 직점 만든 이미지 입니다.

(1) padding과 margin은 방향별로 각각 지정 할 수도 있습니다.

padding-top, padding-bottom, padding-right, padding-left 이렇게 한쪽 방향에만 지정하고자 할 때 사용합니다.

margin도 마찬가지겠죠?

margin-top, padding-bottom, padding-right, padding-left

padding-top : 10px;

margin-bottom : 10px;

(2) 축약형태로도 적용 할 수 있습니다. 시계방향으로 돌아간다는 점을 알아두세요.

padding : 위 오른쪽 아래 왼쪽

padding : 10px 8px 10px 8px;

margin도 적용할 때 padding과 동일합니다.

margin: 10px 8px 10px 8px;

(3) 위아래, 왼쪽오른쪽이 같을 때.

padding : 상하 좌우

padding : 10px 8px ;

margin도 적용할 때, padding과 동일합니다.

margin : 10px 8px ;

(4) 왼쪽오른쪽이 같고, 위아래가 다를 때.

padding : 위 좌우 아래;

padding : 10px 8px 10px;

margin도 같습니다.

margin : 10px 8px 10px;

* 저는 이해를 돕기 위해서 10과 8이라는 값만 썼습니다. 잘 익히셔서 작업에 유용하게 사용해보세요~

CSS Box Model #4강을 마무리 하겠습니다

참고 사이트 : w3schools.com/css/css_boxmodel.asp

참고 도서 : HTML5 + CSS3 + javascript 차세대 웹 프로그래밍, 올인원 웹실무 가이드 HTML5&CSS3

728x90

저작자표시 비영리 변경금지