Lesson #4 CSS Box Model ( 박스모델 )
이 포스팅의 목차
1. 박스모델의 개념
2. padding과 margin의 값 사용법과 순서
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
