[CSS] 학습내용 정리 - Box

Box Model

box model

구성요소 : Content, Padding, Border, Margin

• Content : 실질적인 내용이 들어가는 부분(가로 : width, 세로 : height)
• Padding : 안쪽여백, Content와 Border 사이의 공간
• Border : 테두리
  • border-radius : Border의 스타일을 둥글게 만들어 준다.
• Margin : 바깥 여백, 요소와 요소 사이의 간격

.box {
  border : (굵기) (스타일) (색상값);
  
  /* 'border'를 사용하지 않을 경우 */
  border : nope;
}

 

※ Padding과 Margin 속기형

  padding | margin : (top) (right) (bottom) (left)

  padding | margin : (top, bottom) (right, left)

  padding | margin : (top) (right, left) (bottom)

 

※ Margin으로 가운데 정렬하기

  margin : 0 auto;

  (설명) 'margin'의 rigth, left 값을 'auto'로 설정하여 가운데로 오게 한다.

---

Box Sizing

'box-sizing'의 초기 설정값은 항상 'content-box'로 되어있다.

• 'content'의 width와 height 기준으로 크기가 결정

→ 'box-sizing'을 'border-box'로 설정하면 직관적으로 인지할 수 있는 크기를 설정할 수 있다.

• width와 height를 'border'까지 확장해서 크기 설정

* {
  box-sizing: border-box;
}

/* 모든 요소에게 'border-box' 설정한다. */

---

Box Type

Display 종류 : Block, Inline, Inline Block, Flex

• Block
  • 다른 영역이 침범하지 못하게 하는 특징이 있다.(면, 영역)

Width 상황

• width를 선언하지 않을 경우, width = 부모의 content-box의 100%
• width를 선언했을 경우, 남은 공간은 자동으로 'margin'으로 채운다.

Height 상황

• 부모의 height를 선언하지 않을 경우, 자식 요소의 height의 합 = 부모 요소의 height

 

• Inline
  • row에 맞춰서 옆으로 나열되려는 성질을 가지고 있다.(선, 흐름)
  • 부모의 width 값을 초과하게 될 경우, 다음 row로 넘어간다.
  • [width, height, padding-top, padding-bottom, border-top, border-bottom, margin-top, margin-bottom] 설정 불가능 → row의 흐름을 망가지게 하는 요소이기 때문에

• Inline Block
  • Block과 Inline의 성질을 가지고 있는 요소
  • 영역을 차지하면서 흐름을 유지하려고 함