[CSS] Box Model

CSS의 모든 요소는 박스이고, 박스를 이해함으로서 레이아웃을 만들거나 요소들간의 정렬을 할 수 있다.

 

CSS box model은 블록 박스이며, 인라인 박스는 박스 모델에 정의된 일부 동작만 사용한다.

 

Box의 구성

• 콘텐츠 박스
  • 콘텐츠가 표시되는 영역
  • width, height와 같은 속성을 사용할 수 있다
• 패딩 박스
  • 콘텐츠 주변을 공백처럼 자리잡는다.
  • 크기는 padding 관련 속성을 사용해 제어할 수 있다.
• 테두리 박스
  • 콘텐츠와 패딩을 둘러싼다
  • border관련 속성으로 크기와 스타일을 제어할 수 있다.
• margin 박스
  • 가장 바깥 쪽 레이어
  • 다른 요소와 해당 박스간의 공백의 역할을 한다
  • margin 관련 속성으로 크기를 제어할 수 있다.
  • 박스의 실제 크기에 포함되지는 않는다.

border-box

기존 content-box 형식은 박스의 크기를 측정할 때 border와 padding까지 고려하게 된다.

border-box 형식은 width, height 에 border와 padding이 포함된다.

 

boxsizing : border-box로 지정 가능

 

• content-box
  • 박스가 차지하는 전체 공간의 너비 = width + 2 * padding + 2 * border + 2 * margin
• border-box
  • 박스가 차지하는 전체 공간의 너비 = width + 2 * margin

 

margin

박스 주변에 보이지 않는 공간으로, 박스로부터 다른 요소들을 밀어낸다.

양수값과 음수값을 모두 가질 수 있으며, 음수값을 갖게된다면 다른 요소와 공백이 겹칠 수 있다.

 

content-box, border-box 관계 없이 화면에 보일 박스의 크기를 계산한 후에 여백이 추가된다

 

margin : top right bottom left;

margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;

auto를 값으로 넣으면 브라우저가 적절한 여백 크기를 선택.

 

마진 병합 현상 (margin collapsing)

서로 다른 블록간의 위 아래 마진은 경우에 따라 제일 큰 마진 크기의 단일 마진으로 결합된다

이를 마진 병합 현상이라 한다.

 

단, 플로팅 요소와 절대 위치를 지정한 요소의 여백은 상쇄되지 않는다.

 

마진 병합 현상에 대해

1. 인접한 형제 요소간의 마진은 서로 상쇄된다.
   
   
2. 특수한 경우가 아니라면 자손 블록의 마진은 부모 블록의 마진에 영향을 끼칠 수 없다.
   
   
3. border, padding, inline-block, height, min-height, max-height 가 없는 빈 블록의 경우 마진 병합 현상이 일어난다.

더 자세한 내용은 mdn 문서를 확인하면 도움이 될 것 같다

 

해결방법

• 부모 요소에 overflow 속성을 적용한다
• 부모 요소에 display : inline-block 을 적용한다
• 부모 요소에 border 를 적용한다
• 부모 요소에 display : flow-root 를 적용한다 (IE 지원 x)

꼭 해결해야할 문제는 아닐 수도 있어서, 알고 있는 상태에서 경우에 따라 적용하면 된다

 

Border

마진과 패딩사이에 그려진다.

content-box의 경우 border의 크기가 박스의 width, height에 추가된다.

border-box의 경우 border의 크기는 width, height의 일부를 차지하여 콘텐츠 박스가 더 작아진다

 

border styling

 style, width, color, image 등을 따로 지정해줄 수 있다.

두께 : border-width : 키워드, 값
스타일 : border-style : 키워드
색상 : border-color : 색상키워드, 값

border : width style color;

border-image : 이미지, 배경스타일

 border 속성은 top, right, bottom, left 각각 너비, 색상, 스타일을 설정할 수도 있다.

border-top-width: ;

border-right-style: ;

border-left-color: ;

더 자세한 내용은 mdn 문서를 통해 공부할 예정

 

border-radius

상자의 모서리를 둥글게 처리한다.

border와 마찬가지로 각각 처리할수도 있고, 단축 속성으로 처리할 수도 있다.

 

참고1 : https://css-irl.info/logical-border-radius/

CSS { In Real Life } | Logical Border Radius

참고2 : https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius/

 

Padding

테두리와 콘텐츠 사이의 여백

Margin과 마찬가지로 단축 속성으로도 사용할 수 있고, 네 방향 각각 지정할 수 있다.

 

width

요소의 너비를 지정

기본값은 콘텐츠 영역의 너비이지만, box-sizing 속성으로 테두리 영역의 너비를 지정할 수 있다.

값 목록

auto : 기본값, 브라우저가 계산하여 지정(요소의 부모 크기 기준으로 가득 채우기)
length : 지정 길이
min-content : 본질적인 최소 너비
max-content : 콘텐츠 내용의 선호 너비
fit-content : min( max-content, max( min-content, 길이 ) )

Height 도 비슷한 내용

Height는 사용을 지양하는 방향으로 작성하는게 좋다고 한다

•  

Height 도 비슷한 내용

실제 코드 작성때는 height 사용을 지양하는 것이 좋다고 한다

 

overflow, overflow-x, overflow-y

콘텐츠가 박스를 초과할 경우 어떻게 처리할지 결정한다

• visible : 기본값, 박스를 넘는 콘텐츠를 자르지 않는다
• hidden : 박스를 넘는 콘텐츠를 잘라낸다
• scroll : 박스를 넘는 콘텐츠를 잘라내고, 스크롤바를 생성한다
• auto : 자동으로 콘텐츠가 넘칠 경우 스크롤바를 생성한다

 

Box-Shadow

박스에 그림자 효과를 낼 수 있다

요소에서의 수평수직 거리(오프셋), 흐릿함과 확산 정도, 색상으로 이뤄진다

 

box-shadow : (inset) offset-x offset-y blur-radius spread-radius color

 

선택사항으로 inset 키워드를 추가하면 요소가 움푹 들어간 것처럼 그림자가 요소의 테두리 안, 배경색 위, 내부 콘텐츠 밑에 그려진다

 

blur처리를 0으로 하여 border 와 비슷한 효과를 낼 수도 있다