CSS - BOX MODEL(박스모델)

rabyeoljji·2024년 1월 20일

HTML/CSS (기반쌓기)

목록 보기

7/16

BOX MODEL (박스 모델)

박스 모델이란 CSS의 중심이 되는 개념입니다.

CSS에는 크게 블록 박스와 인라인 박스가 있고, 모든 요소는 박스에 담겨서 레이아웃을 만들어내는데 박스 모델은 이 박스를 구성하는 4가지 영역(content, padding, border, margin)을 의미하는 모델입니다.

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

padding : 콘텐츠와 테두리(border)사이의 여백 영역

border : padding영역과 margin 사이의 테두리

margin : 가장 바깥쪽 레이어

content, padding, border모두를 감싸는 영역 / 다른 박스, 요소와의 공백 역할

<디테일하게 알아보기>

⭐margin - 여백

단축속성🚨 (한 줄에 4가지 작성)
margin-top
margin-right
margin-bottom
margin-left
단위로 % 입력시 부모의 margin이 아니라 부모의 width의 백분율을 따름

ℹ️ 순서적용
1. 값 1개 : 네 면 모두 같은 값 적용
2. 값 2개 : 상하, 좌우 순서로 값 적용
3. 값 3개 : 위, 좌/우, 아래 순서
3. 값 4개 : 시계방향 순서
(위, 오른쪽, 아래, 왼쪽)

⭐마진 상쇄 (margin collapsing)

블록 요소들의 위/아래 margin이 겹쳤을 때 상쇄(결합)되는 현상

인접 형제 블록 요소들이 겹칠 때
부모 블록에 border, padding
(+inline content)이 없으면 부모의 margin과 내부 자식의 margin이 만나게 되는 데 이때
콘텐츠가 없는 빈 블록 요소에 border,
padding, height가 없으면 해당 블록의 margin-top과 margin-bottom이 상쇄

💡마진상쇄를 막기 위해서 padding 값을 1픽셀이라도 주는 방법이 있음

border(-style, -width, -color)

테두리

⭐border-style
     기본값 : none
     자주사용 : solid
     기타 : dashed, dotted 등

🚨여러개 작성하면 상하좌우 규칙따라 적용

⭐border-width
1. length 값 입력 (숫자+단위)
2. 키워드 (think, medium, thick)

🚨여러개 작성하면 상하좌우 규칙따라 적용

⭐border-color

🚨여러개 작성하면 상하좌우 규칙따라 적용

🚨style 값이 none이면 두꼐를 지정해도 무조건 0으로 (없는 것으로) 취급, 보이지 않음

⭐border (단축속성)⭐

순서는 상관 없이 스타일, 색, 너비 값을 입력하면 됨

🚨style 값을 작성하지 않으면 기본값인 none이 적용돼서 보이지 않게 됨
border를 보이게 하고 싶다면 style 값 필수 작성

🚨border vs outline

border : 테두리
실제 공간을 차지하며 박스모델에 속해있다.

      outline : 외곽선
     실제 공간을 차지하지는 않고, 포커싱할 때만 나타난다.
     박스모델에 속해있지 않다.

⭐border-radius

테두리를 둥글게 라운드처리하는 속성

.box3 {
  width: 300px;
  height: 500px;

  border: 5px solid red;
  border-radius: 30px;
  /* border-radius: 50px 10px 20px 30px; */
  /* border-radius: 50px 10px; */
  /* border-radius: 10%; */

  background-color: rgb(175, 207, 233);
}

🚨border를 없애도 박스자체의 라운드처리 가능