CSS - CSS Box Model

박도겸·2022년 4월 19일
CSSfront end
0
post-thumbnail

Box Model

: HTML 요소들은 모두 안에 총 4가지의 박스들을 가진다. 이를 박스 모델이라고 한다.

  • 콘텐츠(content) 박스

    : 요소의 콘텐츠가 표시되는 영역이다.
    넓이는 width: ;, 높이는 height: ; 와 같은 속성을 사용해서 설정할 수 있다.

  • 패딩(padding) 박스

    : 콘텐츠와 테두리 사이의 공간이다.
    패딩의 크기는 padding: ; 과 관련 속성을 사용해 제어할 수 있다.


  • 보더(border) 박스

    : boder 박스는 콘텐츠와 패딩을 둘러싸는 테두리이다.
    boder 의 크기와 스타일은 border: ; 와 관련 속성을 사용하여 제어할 수 있다. 예를 들어, 테두리의 너비, 스타일, 색상을 지정할 수 있다. 단, 값은 특정 순서대로 지정되어야 한다.

  • 마진(margin) 박스

    : margin 은 보더 바깥 쪽 영역으로 요소와 요소 사이의 공백 역할을 한다.
    margin 박스의 크기는 margin: ; 과 관련 속성을 사용하여 제어될 수 있다.



박스의 유형

  • 블록 박스(block box)

    : 사용 가능한 공간을 양 옆으로 100% 사용하며, 사용하지 못하는 공간은 margin 영역으로 채운다. 상위 콘테이너에서 사용 가능한 공간을 채운다.

    width: ; 와 height: ; 속성을 사용하여 스타일을 컨트롤 할 수 있다.

    padding 과 margin, border 속성을 사용하여 스타일을 컨트롤 할 수 있으며 해당 속성들이 다른 요소들을 밀어낸다.

  • 인라인 박스(inline box)

    : 기본적으로 컨텐츠 박스만큼의 크기만 가진다. 때문에 새 줄로 행을 바꾸지 않는다.

    width: ; 와 height: ; 개념 자체가 없다.

    padding과 bodder 속성을 사용할 수 있지만, 공간을 차지하지는 않는다.
    margin 속성은 좌우만 조절할 수 있다. 상하는 불가.
    해당 속성들의 상하 값(top, bottom)들은 다른 요소들을 밀어내지 않는다.



박스의 유형을 결정하는 display 속성

: display: ; 속성은 박스의 성질을 지정하여 다른 박스들과 어떤 방식으로 위치가 배치 될지 결정한다.

  • 외부 디스플레이 타입 : 외부의 다른 형제, 부모 박스들과의 배치에 영향

    • display: inline; : 인라인 박스로 박스의 유형을 결정한다.

    • display: block; : 블록 박스로 박스의 유형을 결정한다.

    • display: inline-block; : 인라인처럼 한 줄에 여러 요소가 존재할 수 있으며, 블록처럼 width, height, margin, padding 등 모든 값을 지정할 수 있다.

      inline 이기 때문에 컨텐츠의 양만큼 전체 width가 자동 조절되며, 부모에게 지정된 text-align 속성에 영향 받기 때문에 정렬에 용이하다.
      또한, vertical-align 속성에 영향 받는다.

      block 이기 때문에 원하는 width, height값을 직접 지정 할 수 있어 박스 모델을 사용 할 수 있다.

      즉, inline 속성의 특징과 block 속성의 특징이 함께 존재하는 박스로 박스 유형을 결정한다.

  • 내부 디스플레이 타입 : 내부 자식 박스들의 배치에 영향

    • flex : 내부 자식 요소들의 위치를 부모 컨테이너 요소 안에서 X축 혹은 Y축의 단방향으로 설정하는 속성

    • grid : 내부 자식 요소들의 위치를 부모 컨테이너 요소 안에서 X축과 Y축을 모두 이용해 배치하는 속성



표준 CSS 박스 모델 (Standard CSS Box Model)


  • width="" ;, height="" ;

    : 표준 CSS 박스 모델에서는 블록 박스인 경우 width, height 값을 통해 content box의 크기를 제어한다.

  • boder="" ;

    : border 는 박스 테두리 영역의 스타일을 정의한다.
    표준 CSS 박스 모델에서 border 는 요소가 차지하는 전체 너비와 높이의 일부이다.

    border 는 아래와 같은 속성을 가진다.

    • border-width="" ; : 선의 두께와 관련된 속성

    • border-style="" ; : 선의 모양과 관련된 속성

    • border-color="" ; : 선의 색깔과 관련된 속성

    • border-radious="" ; : 테두리의 꼭짓점을 둥글게 만드는 속성으로 50% 값을 주게 되면 원을 그릴 수 있다. 요소 넓이의 절반만큼 반지름을 가지는 원을 그리기 때문이다.
      또는 높이의 절반 px을 사용하면 원을 그릴 수 있다. 요소 높이의 절반만큼 반지름을 가지는 원을 그리기 때문이다.

    border-radious: ; 는 한 꼭짓점만 둥글게 만들 수도 있다.



margin, padding

  • margin: ;

    : margin 박스 영역의 스타일을 정의한다.
    표준 CSS 박스 모델에서 margin 은 요소가 차지하는 전체 너비와 높이에 포함되지 않으며, 박스의 외부 공간에만 영향을 미친다.

    margin 속성에는 auto 값이 존재한다.
    요소의 크기를 제외한 나머지 margin 영역을 반으로 나눠 left와 right에 골고루 분배한다.

    덕분에 auto 를 이용하면 손쉽게 수평 정렬을 만들 수 있지만 아쉽게도 top, bottom 에는 auto 값을 적용할 수 없다.


  • 마진 겹침 현상(margin collapsing)

    : 어떤 두 개 이상 블록 요소의 상, 하 margin 이 겹칠 때, 값의 크기가 큰 쪽의 값만 적용되는 렌더링 규칙이다.

    이러한 현상이 발생하는 다음의 세 가지 경우가 있다.

  1. 블록 요소와 요소의 사이에 margin-top 혹은 margin-bottom 의 공간이 있을 경우 더 큰 값의 margin 값이 적용되는 경우

    위의 그림처럼 각 블록 요소에 margin: 20px; 을 주었을 때, 예상한 결과와 실제 결과는 다르게 나타난다.

    또한 하나의 블록 요소에 margin: 50px; 를 주었을 때, 더 큰 값이 적용되는 것을 알 수 있다.

  2. 부모 요소와 자식 요소가 존재할 때, margin-top 혹은 margin-bottom 의 공간이 있을 경우 더 큰 값의 margin 값이 적용되는 경우

    위의 상황처럼 "자식 블록 요소의 margin 값 < 부모 블록 요소의 margin 값" 이라면 부모 블록 요소의 margin 값을 따라간다.
    하지만,

    다른 상황처럼 "자식 블록 요소의 margin 값 > 부모 블록 요소의 margin 값" 이라면 자식 블록 요소의 margin 값을 따라간다.

    이를 해결하기 위해서는 아래와 같은 방법이 있다.

    • 부모 요소에 overflow 속성 값을 적용
    • 부모 요소에 display: inline-block 값을 적용
    • 부모 요소에 border 값을 적용

  3. 시각적인 기능이 없는 empty 요소는 margin-top 혹은 margin-bottom 중 큰 값이 margin 값으로 적용되는 경우

    위의 상황처럼 빈 요소 블록에 margin-top: 100px;과 margin-bottom: 50px; 을 주었다면, 100px > 50px 로 margin-bottom:50px 은 상쇄되고 결과적으로 margin-bottom: 100px; 이 된다.

    만약 빈 요소 블록에 시각적인 요소(border, width, height, 태그 안에 내용 작성)를 넣으면, margin-bottom: 50px 이 상쇄되지 않는다.



대체 CSS 박스 모델 (Alternative CSS Box Model)

표준 CSS 박스모델에서 요소의 전체적인 크기는 컨텐츠 박스 + 보더 박스 + 패딩 박스의 너비와 높이 값 을 모두 더해 정해진다.

하지만 박스의 실제 크기를 얻기 위해 테두리와 패딩을 추가하는 것이 불편하고 귀찮게 느껴질 수 있다.

이를 위해서 대체 박스 모델이 탄생하였다.
위의 코드에서 box-sizing: border-box; 를 추가하면, width는 페이지에서 차지하는 박스 너비가 되고 height는 박스의 높이가 된다.

즉, 대체 박스 모델의 콘텐츠 영역 크기는 width와 height에서 패딩 및 테두리 너비를 뺀 값이 된다.

  • box-sizing

    : box-sizing 속성을 통해 표준 박스 모델을 대체 박스 모델로 변경할 수 있다.

    이렇게 설정하면 박스 모델 중에 보더 박스의 영역까지 width, height 값으로 적용된다.

    따라서 매우 직관적으로 요소의 크기를 설정하는 것이 가능하기 때문에 널리 사용되는 방법이다.

    위의 코드를 사용하면 매우 손쉽게 모든 요소에 대체 박스 모델을 적용할 수 있다.

profile
박도겸
이전 포스트

CSS - CSS Selector

다음 포스트

CSS - overflow

0개의 댓글