[CSS] 박스모델 (margin, padding, border)
[1] CSS 박스 모델
- 모든 HTML 요소는 박스(box) 모양으로 구성된 박스 모델을 기본으로 함
- 박스 모델은 HTML 요소를 테두리(border), 패딩(padding), 마진(margin) 등을 갖음
- 박스 모델 용어
content(내용) 텍스트나 이미지 등 박스 내의 실제 내용 border(테두리) 박스의 테두리(내용과 패딩이 안에 포함) padding(패딩) content와 border 사이의 간격(안쪽 여백) margin(마진) border 밖의 여백으로, 주로 이웃 요소와의 간격(여백)으로 사용 - 박스 모델 기본 속성
width 박스의 넓이(default: display 속성에 의해 결정) height 박스의 높이(default: 일반적으로 콘텐츠의 높이) background 박스의 배경 색상 또는 이미지(default : X) border 박스의 테두리 색상, 굵기, 선 스타일 등(default : X) padding 테두리 안쪽 여백(default : 0) margin 테두리 바깥 여백(default : 0)
[2] border 테두리
- border 속성
- border style
none 테두리 없음 hidden 존재하기는 하지만 표현되지는 않음 dotted 점선 dashed 약간 긴 점선 solid 실선 그외 double, groove, ridge, insert, outset
예시
<body>
<div style="border-style: dotted;"></div>
<div style="border-style: dashed;"></div>
<div style="border-style: solid;"></div>
<div class="mix"></div>
</body>
<style>
div { width: 200px; height: 100px; margin: 20px; }
.mix {
border-top-style: solid;
border-top-color: rgb(255, 0, 0);
border-left-style: dashed;
border-left-color: rgb(0, 255, 0);
border-right-style: dotted;
border-right-color: rgb(0, 0, 255);
border-bottom-style: double;
border-bottom-color: rgb(255, 0, 255);
}
</style>
[3] margin, padding
- margin(마진) 스타일 : margin 테두리 바깥 여백(default: 0)
- padding(패딩) 스타일 : padding 테두리 안쪽 여백(default: 0)
- 대표적인 박스 태그의 마진,패딩 특징
<div> : 기본적으로 모든 방향에 margin 값과 패딩 값을 가질 수 있다.
<span> : 기본적으로 위(margin-top)/아래(margin-bottom) 값을 가질 수 없다. 좌우만 가질 수 있다.(패딩은 다 가능) - collapsing(마진 겹침/상쇄 현상)
- 블록의 top/bottom 여백이 겹칠 때 가장 큰 여백으로 결합되는 현상
- 즉, 두 개 이상 블록 요소의 상하 마진이 겹칠 때 가장 큰 값으로 결합하는 렌더링 규칙
예시
<body>
<div style="background: rgb(255, 255, 140);">
<div class="div-a">DIV 태그는 너비가 100%의 기본 속성을 가지므로...</div>
</div>
<div style="background: rgb(196, 255, 177);">
<span class="span-a">SPAN A</span>
<span class="span-a">SPAN B</span>
<span class="span-a">SPAN C</span>
</div>
<div style="background:rgb(177, 250, 255); margin-top: 100px;">
<span class="span-b">SPAN A</span>
<span class="span-b">SPAN B</span>
<span class="span-b">SPAN C</span>
</div>
</body>
<style>
.div-a {
width: 200px;
height: 100px;
background: rgb(235, 235, 235);
border: 10px solid rgb(0, 0, 255);
margin-top: 50px;
margin-bottom: 100px;
margin-left: 20px;
margin-right: 20px;
padding: 20px;
}
.span-a {
width: 300px;
height: 300px;
/* span은 inline이다 따라서 width, height 속성은 무시된다. */
background-color: rgb(255, 177, 190);
border-radius: 10px;
border-width: 5px;
border-style: dashed;
border-top-color: red;
border-bottom-width: 5px;
padding: 10px;
margin: 20px;
}
.span-b {
display: inline-block;
width: 100px;
height: 100px;
padding: 10px;
margin: 20px;
border: 1px solid red;
}
</style>