[CSS] Box Model

vSsongv·2021년 9월 29일

Box Model CSS TIL border box-sizing frontend height margin padding radius web width

CSS

목록 보기

5/14

📦Box Model

content : 콘텐츠가 표시되는 영역.

padding : content와 border사이의 영역.

border : padding과 margin사이의 테두리. 기본값은 0

margin : 가장 바깥 쪽 레이어로 content와 padding, border를 둘러싸면서 해당 box와 다른 요소 사이의 공백 역할을 한다.

<크기>

box의 크기를 설정할 수 있는 요소들이다.
block 요소는 기본 content만큼의 크기로 height, width가 적용되고, 직접 지정할 시 지정한 만큼 크기를 가진다.ex)div
inline 요소는 height/width 속성이 적용되지 않는다. -> display 속성으로 block요소로 변경 가능하다.ex)span
inline-block 요소는 height/width, margin/padding이 적용된다. 그러나 가로 배치가 된다.

🗳️ width

요소의 너비를 설정한다. 기본값은 콘텐츠 영역의 너비이지만, box-sizing이 border-box라면 테두리 영역의 너비를 설정한다. 상속되지 않는다.

🗳️ height

요소의 높이를 지정한다. 기본값은 콘텐츠 영역의 높이지만, box-sizing이 border-box라면 테두리 영역의 높이를 설정한다. 상속되지 않는다.

🗳️ min/max-height/width

최소/최대 너비/높이를 지정 가능하여, 해당 값을 넘어가게 되면 더 지정한 값보다 작아지거나 커지지 않는다.

   .blcok {
      width: 100px
      height :200px
   }
   
   #parent {
      width: 100px
      height :200px
   }
   
   #child {
      width: 50%px
      min-wid: 100px -> 50%한 값이 100px이하로 줄어들게 되면 더이상 줄어들지 않는다.
      height :200px
   }

<여백>

box model의 여백을 결정하는 요소들이다.
- 한 개의 값은 모든 네 면의 테두리 스타일을 설정.
- 두 개의 값을 지정하면 첫 번째는 위와 아래, 두 번째는 왼쪽과 오른쪽 테두리 스타일을 설정.
- 세 개의 값을 지정하면 첫 번째는 위, 두 번째는 왼쪽과 오른쪽, 세 번째 값은 아래 테두리 스타일을 설정.
- 네 개의 값을 지정하면 각각 상, 우, 하, 좌 순서로 테두리 스타일을 지정. (시계방향)

🗳️ margin

box model의 맨 바깥쪽 여백 부분이다.
inline 요소는 top,bottom을 지정할 수 없다.
margin-bottom, margin-left, margin-right, margin-top의 네 부분을 조절할 수 있다.

   /* Apply to all four sides */
  margin: 1em;
  margin: -3px;

  /* vertical | horizontal */
  margin: 5% auto;

  /* top | horizontal | bottom */
  margin: 1em auto 2em;

  /* top | right | bottom | left */
  margin: 2px 1em 0 auto;

  /* Global values */
  margin: inherit;
  margin: initial;
  margin: revert;
  margin: unset;

<Value>

length를 지정할 경우 : 여백의 크기로 고정값 사용.
%를 사용할 경우 : 여백의 크기로 컨테이닝 블록 너비의 백분율 사용. **부모의 width값에 대해 계산된 값이다.
음수값 사용 가능

  #parent {
  	width: 200px
    	height: 200px
  }
  #child {
  	margin: 30% -> 부모의 width인 200px의 30%의 값을 가지게 된다.
  }

🗳️ margin collapsing(마진 상쇄)

여러 block요소들의 위/아래 margin이 경우에 따라 가장 큰 크기를 가진 margin으로 결합(상쇄)되는 현상.

아래 3가지 경우에 일어난다.

1. 인접 형제

두 형제 요소의 위/아래 여백이 만나 상쇄된다.
ex) box의 위 margin이 10px이고, 아래 margin이 20px일 경우 두 box가 겹쳐진다면 20px로 margin을 가지게 된다.

2. 부모-자식 요소 간

부모 블록에 border, padding, inline content가 없어서 부모와 자식의 margin-top이 만나는 경우
아래 사진에서 border,padding, content값이 없으면 child의 margin과 patent의 margin이 만날수밖에 없다.
같은 이유로 height값이 지정되지 않아서 부모와 자식의 margin-buttom이 만나는 경우

3. 빈 블록

border, padding, inline content가 없고 height값이 지정되지 않으면, 해당 블록의 margin-top과 margin-bottom이 상쇄된다.

🗳️ padding

<테두리>

요소의 네 방향 안쪽 여백 영역을 설정한다. padding-top, padding-right, padding-bottom, padding-left의 단축 속성.
inline 요소는 top,bottom을 지정할 수 없다.

    /* 네 면 모두 적용 */
    padding: 1em;

    /* 세로방향 | 가로방향 */
    padding: 5% 10%;

    /* 위 | 가로방향 | 아래 */
    padding: 1em 2em 2em;

    /* 위 | 오른쪽 | 아래 | 왼쪽 */
    padding: 5px 1em 0 2em;

    /* 전역 값 */
    padding: inherit;
    padding: initial;
    padding: unset;

length를 지정할 경우 : 여백의 크기로 고정값 사용.
%를 사용할 경우 : 여백의 크기로 컨테이닝 블록 너비의 백분율 사용. **부모의 width값에 대해 계산된 값이다.
음수값 사용 불가

🗳️ border

요소의 테두리를 설정한다. border-width(테두리 두께), border-style(테두리 모양) border-colo(테두리 색)의 값을 설정한다.
border style은 여러 종류가 있다.
style이 none이면 다른 속성들 모두 적용되지 않는다.
line-width : 테두리의 굵기로 기본값은 medium입니다. border-width를 참고하세요.
line-style : 테두리의 스타일로 기본값은 none입니다. border-style을 참고하세요.
color : 테두리의 색상으로 기본값은 currentcolor입니다. border-color를 참고하세요.

  /* 스타일 */
  border: solid;

  /* 너비 | 스타일 */
  border: 2px dotted;

  /* 스타일 | 색 */
  border: outset #f33;

  /* 너비 | 스타일 | 색 */
  border: medium dashed green;

  /* 전역 값 */
  border: inherit;
  border: initial;
  border: unset;

✅ border vs outline

outline 요소 콘텐츠의 밖에 그려지며 절대 공간을 차지하지 않습니다.
outline은 box model에 포함되지 않는다.

🗳️ border-radius

border-bottom-right-radius: 5px;

요소 테두리 경계의 꼭짓점을 둥글게 만든다. 하나의 값을 사용해 원형 꼭짓점을, 두 개의 값을 사용해 타원형 꼭짓점을 적용할 수 있다.
radius를 사용하면 꼭짓점에 지정한px을 반지름으로 가지는 원이 그려진다고 생각하면 된다.
radius는 여러 종류가 있다.
length를 지정할 경우 : 길이 값을 사용해 원의 반지름 또는 타원의 짧은반지름과 긴반지름을 지정.
%를 사용할 경우 : 백분율 값을 사용해 원의 반지름 또는 타원의 짧은반지름과 긴반지름을 지정합니다. 가로축 값은 요소 박스의 너비에 대한 백분율, 세로축 값은 박스의 높이에 대한 백분율.
음수값 사용 불가.

🗳️ box-sizing

CSS 박스 모델의 기본값에서, 지정한 너비와 높이는 요소의 콘텐츠 박스 크기에만 적용된다. 요소에 테두리나 안쪽 여백이 있으면 너비와 높이에 더해서 화면에 그린다는 이야기다.

box-sizing: content-box;
width: 100%;
border: solid #5B6DCD 10px;
padding: 5px;

따라서 전체 박스의 크기를 변경하지 않으려면 border-box로 지정해줘야 한다.
<속성 값>

content-box

기본 값. 가로와 세로 너비가 콘텐츠 영역만의 가로 세로 너비를 지칭하도록 설정한다. 패딩, 보더, 마진 영역은 지정된 크기에 포함되지 않는다.

border-box

가로와 세로 너비가 마진 영역을 제외하고 콘텐츠 영역, 패딩 영역, 보더 영역을 포함한 크기로 설정한다.

button은 기본이 border box이다.

initial

속성의 기본 값으로 설정한다.

inherit

부모 요소의 속성 값을 상속받도록 설정한다.

🗳️ border-box

box-sizing: border-box; 로 사용한다.

요소의 너비와 높이를 계산하는 방법을 지정한다.
따라서 크기를 설정할 때, 원하는 크기를 얻으려면 테두리나 안쪽 여백을 고려해야 한다.
ex) 아래 그림에서 가로 길이와 세로 길이는 각각 300,200이지만 border의 30px이 더해져서 실질적으로는 360, 260이 된다.
border-box는 border와 padding의 크기도 요소의 크기로 고려한다.