Box Model 속성

Box Model

모든 html 요소들은 CSS로 표현이 될 때 박스로 표현이 됩니다. 모든 박스가 일정한 형태(구조)의 모델로 구성이 되어 있기 때문에 박스 모델(Box Model)이라고 말합니다.

박스 모델은 크게 4개의 층으로 구성되어 있습니다.

참고로 박스 모델은 박스 타입(display 값이 박스 타입 결정)에 따라 그 동작이 달라집니다.

즉, 모든 html 요소는 박스로 표현이 되며, 각 박스 타입에 따라 박스 모델의 동작이 달라집니다.

Content, Padding, Border, Margin 이렇게 총 4개의 층으로 이루어져 있습니다.

• Content는 말 그대로 content가 들어있는 영역입니다. 이 content의 가로를 width, 세로를 height라고 합니다(box-sizing: content-box;인 경우).

• Padding은 안쪽 여백, 즉 content와 border 사이의 공간을 나타냅니다.

• Border은 테두리를 나타냅니다.

• Margin은 바깥 여백, 즉 요소와 요소 사이의 간격을 나타냅니다.

---

요소의 Box Model은 개발자 도구의 Elements 탭에서 Computed에서 확인할 수 있습니다.

그리고 아래 Filter에 Show all가 체크된 상태에서 요소에 적용된 모든 css 프로퍼티들을 확인할 수 있습니다.

단위

CSS 프로퍼티의 값에 단위값을 작성하는 경우 여러 단위를 사용할 수 있습니다.
그리고 단위를 절대 단위와 상대 단위로 구분할 수 있습니다.

절대 단위

절대 단위로 사용 가능한 것으로는 px, cm, mm, in, pt, pc가 존재하며 cm, mm, in, pt, pc들도 결국 px로 계산되기 때문에 절대 단위로는 px을 많이 사용합니다.

전통적으로 px단위는 디바이스의 화면에 존재하는 여러 픽셀(점)중 하나를 의미합니다. 이 픽셀의 갯수는 디바이스마다 다르지만, 픽셀의 크기는 고정적이므로 절대 단위라고 말합니다.

상대 단위

상대 단위로는 %, em, rem, vw, vh, vmin, vmax가 존재합니다.

상대 단위는 상위 요소나 화면의 크기, 해상도 등에 의해 상대적으로 변하는 크기를 의미합니다.

글꼴 상대 단위

• em 단위의 경우 부모 요소의 폰트 사이즈, 즉 상속 받은 font-size 프로퍼티 값의 배수로 사용됩니다. 즉, 1em은 상위 요소의 font-size 값입니다.

• rem 단위는 html 태그의 폰트 사이즈, 즉 html 태그의 font-size 프로퍼티 값의 배수로 사용됩니다. 즉, 1rem은 루트 요소의 font-size 값입니다.

뷰포트 상대 단위

• vw 단위는 현재 viewport의 가로 너비를 기준으로 백분율로 사용됩니다. 즉, 1vw는 뷰포트 가로 너비의 1% 값이 됩니다.

• vh 단위는 현재 viewport의 세로 너비를 기준으로 백분율로 사용됩니다. 즉, 1vh는 뷰포트의 세로 너비 1% 값이 됩니다.

• vmax 단위는 viewport의 가로, 세로 너비중 큰 쪽의 너비의 백분율을 사용됩니다.

• vmin 단위 viewport의 가로, 세로 너비중 작은 쪽의 너비의 백분율을 사용됩니다.

퍼센트 상대 단위

% 단위의 경우 상위 요소(부모 요소)의 속성 값을 백분율로 사용됩니다.

• width 값의 경우 상위 요소의 width 값 백분율 적용

• height 값의 경우 상위 요소의 height 값 백분율 적용

• margin 값의 경우 상위 요소의 width 값 백분율 적용

• padding 값의 경우 상위 요소의 width 값 백분율 적용

• border-width 값의 경우 % 단위 사용 불가

• border-radius 값의 경우 요소 자체 width 값 백분율 적용

• top, bottom, right, left 값의 경우 기준 요소의 width, height 값 백분율 적용

• flex-basis 값의 경우 flex box의 주축 너비 값 백분율 적용

• grid-template-rows, grid-template-columns, gird-auto-rows, grid-auto-columns 값의 경우 grid container의 가로, 세로 너비 값 백분율 적용

• row-gap, column-gap 값의 경우 gird container의 가로, 세로 너비 값 백분율 적용

• font-size 값의 경우 상위 요소의 font-size 값 백분율 적용

• line-height 값의 경우 요소 자체 font-size 값 백분율 적용

• text-indent 값의 경우 요소 자체 width 값 백분율 적용

• letter-spacing, word-spacing 값의 경우 % 단위 사용 불가

• background-position 값의 경우 요소 자체 너비 값 백분율 적용

• backdground-size 값의 경우 요소 자체 너비 값 백분율 적용

• transform 속성값에 작성되는 변형 함수에 전달되는 값의 경우 요소 자체 너비 값 백분율 적용

단위 함수

calc()

clac(expression) 함수를 통해 값을 작성할 수 있습니다. 이때 소괄호 안에 값과 연산자를 작성하여 계산된 값을 사용할 수 있습니다.

이때 연산자로 +, -, *, /을 사용할 수 있습니다.

주의할 점으로 *와 /는 하나의 값과 정수를 작성하여 연산할 수 있습니다. 즉, 값은 하나만 작성 가능하며, 정수는 여러 개 작성이 가능합니다.
그리고 연산자 사이에 좌우에 공백을 작성해야 합니다. +와 -는 필수적으로 좌우에 공백을 작성해야하지만 *와 /는 공백을 작성하지 않아도 됩니다. 하지만 일관성을 위해 모든 연산자 좌우에 공백을 작성하는 것이 좋습니다.

calc(100% - 50em -30rem + 30px);  // -> O

/* 연산자 좌우 공백 필수 */
calc(100%-100px)  // ->

calc(100px * 2 * 10 / 10);  // -> O

/* 값은 하나만 작성 가능*/
calc(100px * 10px * 2); // -> X

min()

min()은 소괄호안에 여러 값을 콤마로 구분하여 작성합니다. 여러 값 중 작은 값을 선택하여 사용하게 됩니다.

max()

min()은 소괄호안에 여러 값을 콤마로 구분하여 작성합니다. 여러 값 중 큰 값을 선택하여 사용하게 됩니다.

width

• 요소의 가로 너비를 지정

• 값	의미	기본값
  auto	브라우저가 너비를 계산	auto
  단위	px, em, rem 등 단위로 지정
  % 단위	부모 요소의 width 값 백분율로 지정

heigth

• 요소의 세로 너비를 지정

• 값	의미	기본값
  auto	브라우저가 너비를 계산	auto
  단위	px, em, rem 등 단위로 지정
  % 단위	부모 요소의 height 값 백분율로 지정

---

div {
    width: auto;  /* 100% */
    height: auto;  /* 0부터 ~ Content 세로 너비 */
} 

span {
    width: auto;  /* 0부터 ~ Content 가로 너비 */
    heigth: auto;  /* 0부터 ~ Content 세로 너비 */
}

div 요소는 블록 요소(display: block;)입니다. width, height에 값을 따로 지정하지 않으면 기본값으로 auto 값이 설정되어 있습니다.
블록 요소의 width의 auto는 "100%와 동일"하고, height의 auto는 "content의 세로 너비"로 지정됩니다. 참고로 width 값을 명시하면 남은 부모 요소의 가로 너비를 margin으로 채우게 됩니다.

span 요소는 인라인 요소(display: inline;)입니다. width, height에 값을 따로 지정하지 않으면 기본값 auto가 설정되어 있습니다.
인라인 요소의 width의 auto는 0와 동일하고, heigth의 auto 또한 0과 동일합니다. 또한 인라인 요소는 width와 height 설정이 불가능합니다(크기 조정 불가능). 인라인 요소는 텍스트에 특화된 요소입니다. width와 height는 요소 안에 포함되어 있는 content만큼 너비를 사용합니다.

즉, 블록 요소와 인라인 요소의 너비 auto 값은 요소에 따라 다르게 동작하게 됩니다(브라우저가 해석하는 방식이 다릅니다).

블록 요소의 width는 100%가 되고 height는 0에서 부터 시작하여 content 세로 너비만큼 사용합니다.

인라인 요소는 width는 0이 부터 content의 가로 너비만큼, height도 0부터 시작하여 content의 세로 너비만큼 사용됩니다. 또한 인라인 요소의 경우 width, height 속성을 사용할 수 없습니다.

max-width

• 요소가 가질 수 있는 최대 가로 너비를 지정

• 값	의미	기본값
  단위	px, em, % 등 단위로 지정	none
  auto	브라우저가 너비를 계산

min-width

• 요소가 가질 수 있는 최소 가로 너비를 지정

• 값	의미	기본값
  단위	px, em, % 등 단위로 지정	0
  auto	브라우저가 너비를 계산

max-height

• 요소가 가질 수 있는 최대 세로 너비를 지정

• 값	의미	기본값
  단위	px, em, % 등 단위로 지정	none
  auto	브라우저가 너비를 계산

min-height

• 요소가 가질 수 있는 최소 세로 너비를 지정

• 값	의미	기본값
  단위	px, em, % 등 단위로 지정	0
  auto	브라우저가 너비를 계산

margin

• 요소의 바깥 여백을 지정.

• 음수값이 허용된다. 음수값 사용시 바깥 여백이 안쪽으로 들어오는 것처럼 표현이 된다.

• 값	의미	기본값
  단위	px, em, rem 등 단위로 지정	0
  auto	브라우저가 너비를 계산
  %	부모 요소의 가로 너비(widht 값)에 대한 백분율로 지정

• margin 속성은 여러 속성을 의미하는 단축 속성입니다. margin-top, margin-right, margin-bottom, margin-left를 설정할 수 있으며 아래와 같이 단축 속성을 사용할 수 있습니다.

  1. margin: 위 우 아래 좌; -> (값이 4개라면 위에서부터 시계 방향으로 해석)

  2. margin: 위 [좌, 우] 아래; -> (값이 3개라면 위에서부터 아래로 해성)

  3. margin: [위, 아래] [좌, 우]; -> (값이 2개라면 위아래, 좌우로 해석)

  4. margin: [위, 아래, 좌, 우]; -> (값이 하나라면 모든 방향)

마진 중복

margin의 특정 값들이 중복되어 합쳐지는 현상을 볼 수 있습니다.

1. 인접 형제 요소간 margin-bottom, margin-top 만날 때 발생

2. 부모 요소의 margin-top, 자식 요소의 maring-top이 만날 때 발생

3. 부모 요소의 margin-bottom, 자식 요소의 margin-bottom이 만날 때 발생

4. 요소의 content 영역이 비어있는 경우(height 값이 0인 경우)에 자기 자신의 margin-top과 margin-bottom이 만날 때 발생

참고로 부모 요소와 자식 요소의 마진 중복의 경우 부모 요소에 padding이나 border 영역, 텍스트 콘텐츠가 없는 경우에 , 즉 부모 요소의 margin 영역과 자식 요소의 margin 영역 중간에 끊어지는 부분 없이 만나게 되면 부모 요소의 margin 영역와 자식 요소의 margin 영역이 만나 중복이 일어납니다.

즉, 여기서 만난다는 의미는 두 요소의 margin 영역 사이에 실제로 어떠한 것도 존재하지 않아 두 margin 영역이 만나는 경우에 발생하는 것입니다.

마진 중복은 버그(오류)가 아닙니다. 해당 현상을 우회하거나 응용할 수 있습니다.

조건	요소A	요소B	계산법	적용될 최종값
둘 다 양수	50px	10px	더 큰 값으로 중복	50px
둘 다 음수	-50px	-10px	더 작은 값으로 중복	-50px
양수, 음수	50px	-10px	두 값을 더한 값으로 중복	40px

padding

• 요소의 내부 여백을 지정

• margin 속성과는 달리 음수값 허용하지 않습니다.

• 값	의미	기본값
  단위	px, em, rem 등 단위로 지정	0
  %	부모 요소의 가로 너비(width 값)에 대한 백분율로 지정

• 사용법은 margin과 동일하게 단축 속성으로 사용됩니다. 개별 속성인 padding-top, padding-right, padding-bottom, padding-left를 설정할 수 있습니다.

  1. padding: 위 우 아래 좌; -> (값이 4개라면 위에서부터 시계 방향으로 해석)

  2. padding: 위 [좌, 우] 아래; -> (값이 3개라면 위에서부터 아래로 해성)

  3. padding: [위, 아래] [좌, 우]; -> (값이 2개라면 위아래, 좌우로 해석)

  4. padding: [위, 아래, 좌, 우]; -> (값이 하나라면 모든 방향)

크기 증가

기본적으로 padding을 설정하면 추가한 값만큼 요소의 크기가 늘어납니다.

이를 해결하는 방법은 2가지가 존재합니다.

1. 직접 계산하기 : padding으로 추가한만큼 너비를 빼서 작성합니다.

2. 자동으로 계산하기 : box-sizing: border-box;를 작성하여 브라우저가 자동적으로 계산하도록 설정합니다.
   이는 Box Model에서 content에서 가로, 세로 너비를 Border 영역으로 설정합니다. 즉, Border 영역에서의 가로 너비를 width, 세로 너비를 height로 설정이 됩니다.

border

• 요소의 바깥쪽 테두리 설정

• 값	의미	기본값
  border-width	선의 두께	medium
  border-style	선의 스타일	none
  border-color	선의 색상	black(#000)

• border: border-width border-style border-color;처럼 단축 속성으로 사용 가능하며 순서는 바뀌어도 동일하게 동작합니다.

• 만약 테두리를 사용하지 않겠다고 한다면 border: none;을 작성하여 적용할 수 있습니다.

• 기본값으로 두께는 medium, 색상은 black이지만 border-style 속성의 값이 none이라 화면에 표시되지 않습니다.

• 주의사사항으로 padding과 동일하게 추가한 border 두께(border-width)만큼 요소의 크기가 늘어납니다. 앞에서 설명한 것처럼 직접 계산하는 방법을 사용하거나 box-sizing: border-box;을 사용합니다.

border-width

• 테두리 선의 두께를 지정

값	의미	기본값
medium	중간 두께	medium
thin	얇은 두께
thick	두꺼운 두께
단위	px, em, rem 등 단위로 지정(% 단위는 사용 불가)

border-width 속성도 단축 속성으로 사용됩니다. 이때 개별 속성으로 border-top-width, border-right-width, border-bottom-width, border-left-width를 지정할 수 있습니다.

border-style

• 테두리 선의 스타일을 지정

• border-width나 border-color를 작성하더라도 border-style이 none인 경우 적용되지 않습니다.

• 값	의미	기본값
  none	선 없음	none
  solid	실선
  dashed	파선
  dotted	점선
  hidden	선 없음과 동일(table 요소에서 사용)

• border-style 속성도 단축 속성으로 사용됩니다. 이때 개별 속성으로 border-top-style, border-right-style, border-bottom-style, border-left-style을 지정할 수 있습니다.

border-color

• 선의 색상을 지정

• 값	의미	기본값
  색상	선의 색상을 지정	black
  transparent	투명색(설정시 요소의 배경이 보인다)

• border-color 속성도 단축 속성으로 사용됩니다. 이때 개별 속성으로 border-top-color, border-right-color, border-bottom-color, border-left-color를 지정할 수 있습니다.

border-radius

• 요소의 테두리 꼭짓점 부분을 둥글게 깍아주는 속성입니다.

• border-style이 none인 경우에도 요소의 꼭짓점을 깍아줍니다.

• border-radius 속성도 단축 속성으로 사용됩니다. 개별 속성으로 border-top-left-raidus, border-top-right-raidus, border-bottom-right-radius, border-bottom-left-radius를 설정할 수 있습니다.

• 값	의미
  단위	px, em, rem, % 등 단위로 지정

• border-radius: 50%; 로 지정하면 요소가 원으로 표시됩니다. border-radius 속성에 % 단위 사용시 해당 요소의 가로, 세로 너비 값의 백분율 값을 갖게 됩니다.

box-sizing

• 요소의 크기 계산 기준을 지정합니다.

• 값	의미	기본값
  content-box	content 영역을 기준	content-box
  border-box	content 영역, padding 영역, border 영역까지 모두 포함한 영역을 기준

content-box

모든 요소의 box-sizing 속성의 기본값으로는 content-box로 설정되어 있습니다.

위 그림처럼 width, heigth 속성으로 content 영역의 너비를 지정하게 됩니다. 이때 padding 또는 border 속성을 사용하게 된다면 전체 요소가 크기가 그만큼 증가하게 됩니다.

이는 width와 height 속성으로 content 영역의 너비를 지정한 뒤, border나 padding 영역의 너비를 추가했기 때문에 그만큼 전체 요소의 크기가 커지게 됩니다.

border-box

box-sizing: border-box;을 지정하여 widht와 height 속성이 적용되는 범위를 border 영역까지 포함하여 지정합니다.

위 그림처럼 widht, height 속성으로 지정한 너비값은 Border 영역까지의 너비를 지정하게 되므로, padding이나 border 속성을 사용하더라도 width, height 속성으로 지정된 값으로 요소의 너비가 고정됩니다.

display

• 요소의 Box Model 타입을 설정합니다.

• 값	의미	기본값
  block	박스 타입을 block 타입으로 설정
  inline	박스 타입을 inline 타입으로 설정
  inline-block	박스 타입을 inline-block으로 설정
  none	박스 타입이 없음(요소가 사라진다)

display: block;

1. block 값은 기본적으로 따로 width 값을 작성하지 않은 경우, 부모 요소의 가로 너비 100%로 설정됩니다. 즉, width: 100%;가 됩니다. heigth 속성을 따로 명시하지 않은 경우 기본적으로 0을 갖게 되며, content를 갖고 있다면 content의 heigth 값의 합이 요소의 heigth가 됩니다.

2. 만약 width 값을 명시한다면 부모 요소의 남은 가로 너비의 공간을 자동으로 margin으로 채우게 됩니다. 남은 가로 너비가 margin으로 채워지는 것을 이용하여 margin: 0 auto;를 통해 블록 요소를 가로 중앙에 배치할 수 있습니다. 이러한 특성으로 인해 display: block;인 요소는 옆으로 요소가 쌓이지 않고 아래로, 즉 수직(수평)으로 쌓이게 됩니다.

3. block 타입은 Box model의 모든 속성들 width, hegith, margin, padding, border 모두 사용이 가능합니다.

---

위 그림처럼 블록 요소는 width 값을 명시하던 하지 않던 언제나 부모 요소의 가로 너비 전체를 블록 요소 혼자 차지하게 됩니다.

display: inline;

1. inline 타입의 박스는 기본적으로 width와 heigth 값이 0이며, content가 존재한다면 갖고 있는 content의 가로, 세로 너비의 합만큼 갖게 됩니다.

2. inline 타입은 block 타입과는 다르게 기본적으로 옆(왼쪽에서 오른쪽)으로 흐르는 특징을 갖고 있습니다.
   즉, 남은 가로 너비를 margin으로 채우지 않고, 가로 너비에 공간이 존재하는 경우 옆에 그대로 채우게 됩니다.
   만약 인접한 인라인 요소의 가로 너비가 배치되기에 충분하지 않은 경우라도 요소 자체가 줄바꿈되어 배치되는 것이 아니라 인라인 요소를 잘라 줄바꿈되도록 배치됩니다.

3. inline 타입은 width, heigth, margin-top, margin-bottom, padding-top, padding-bottom, border-top, border-bottom 속성을 사용할 수 없습니다. 이 속성들은는 inline 박스 타입이 줄 간격을 맞춰 흐르려고하는 흐름을 깨뜨리기 때문입니다.

참고로 인라인 요소뿐만 아니라 텍스트 콘텐츠도 위와 같은 인라인 특성을 갖습니다. 그러므로 블록 요소 내 텍스트 콘텐츠도 인라인 요소라고 볼 수 있습니다.

---

위 그림처럼 인라인 요소들은 요소가 갖고 있는 content 만큼의 너비를 갖게 되며 가로로 배치되는 것을 볼 수 있습니다.

이때 요소가 줄바꿈되는 기준은 word-break 속성값에 따라 다르며, 영문인 경우에는 기본값이 keep-all처럼 동작하기 때문에 단어를 기준으로 줄바꿈이 됩니다.
한, 중, 일인 경우에는 break-all처럼 동작하기 때문에 문자를 기준으로 줄바꿈이 됩니다.

줄바꿈이 될 때 요소 자체가 줄바꿈되어 배치되는 것이 아니라 요소가 잘리더라도 줄자꿈되는 기준으로 줄바꿈됩니다. 위 그림에서 중간에 배경색이 파란색인 텍스처럼 요소 자체가 다음줄로 배치되는 것이 아니라 요소가 잘리더라도 단어를 기준으로 줄바꿈되는 것을 확인할 수 있습니다.

참고로 인라인 요소 안에는 블록 요소를 작성해서는 안됩니다. 인라인 요소의 자식으로는 인라인 요소만을 작성하며, 블록 요소의 경우 인라인 요소와 블록 요소 모두 작성이 가능합니다.

display: inline-block;

1. inline-block 타입의 박스는 inline 타입처럼 기본적으로 가로, 세로 너비가 0을 갖고 있으며 자신이 갖고 있는 content의 가로, 세로 너비의 합만큼 갖게 됩니다.

2. inline-block 타입은 inline 타입처럼 옆으로 흐르는 특징을 갖고 block 타입처럼 영역도 잡을 수 있는 타입입니다. 즉, 남은 가로 너비를 margin으로 채우지 않습니다.

3. 옆으로 흐르는 특징을과 함께 width, heigth, margin, padding, border 속성까지 모두 사용할 수 있습니다. 다시 말해, inline 특성을 가진 요소이지만 Box 속성을 모두 사용가능한 박스 타입입니다.

---

인라인 블록 요소의 경우 content 영역만큼 너비를 갖지만 명시적으로 widht, height 속성을 사용하여 너비를 지정할 수 있습니다.

요소는 부모의 가로 너비를 전체를 차지하지 않으며 인라인 요소처럼 가로로 배치되지만 요소가 가로 너비에 들어가기 충분하지 않은 경우에 줄바꿈되어 배치됩니다. 즉, 인라인 블록 요소는 요소가 잘리지 않으면서 가로로 배치됩니다.

display: none;

1.none 값을 설정하면 요소가 화면에서 사라지게 됩니다. 특정 요소를 없는 요소로 취급하기 위해 사용합니다. 즉, 브라우저 화면에 렌더링이 되지 않습니다.
이때 인접한 요소들도 none인 요소를 없는 요소로 취급하여 배치됩니다.