[CSS 공부] 부스트코스 '비전공자를 위한 CSS 강의' 수강 기록 #6. 박스모델

박스모델 : HTML의 모든 요소는 사각형의 박스형태로 만들어지며, 이 박스는 4가지(content, padding, border, margin)로 세분화된다. 이 4가지 영역을 통틀어서 박스모델이라고 한다.

사용 예시

<style>

div {

margin : 50px;

padding : 30px;

border : 10px;

}

</style>

1. Content : 요소의 실제 내용을 포함하는 영역

Content

2. Border : content 영역을 감싸는 테두리

Border

 1) border-width : 선의 굵기 지정

-> thin / medium / thick or 숫자+px, em, rem ✔ 기본값 = medium  

 2) border-style : 선의 모양 지정

-> solid(실선), double(이중실선), dotted(점선), hidden, dashed, groove, inset, outset 등  ✔ 기본값 = none(=border를 표시하지 않음)

 3) border-color : 선의 색상 지정  ✔ 기본값 = currentColor 

테두리의 각 선 컬러를 다르게 설정할 수도 있다(상/우/하/좌 = 시계방향).

 4) 아래와 같이 축약해서도 사용할 수 있다

3. Padding : content와 border 사이의 여백 ✔ 기본값 =0 

 1) padding-top: 00px; 

     padding-right: 00px;

     padding-buttom: 00px;

     padding-left: 00px;

 2) 아래와 같이 축약해서도 사용할 수 있다

Padding

4. Margin : border의 바깥쪽 영역. 주변 요소와의 간격.

Margin

 ✔ padding과 달리 auto, 음수값을 사용할 수 있다 -> div { margin: auto; }

  1) 좌우 모두 auto로 적용할 경우, width를 제외한 영역을 균등분할하여 수평 중앙 정렬시킴(상하 수직정렬X)

 2) 음수값을 적용할 경우 위아래 마진이 겹쳐짐