[2023.03.03] 8. CSS Box Model

🔍CSS Box Model에 대해 정리!

 

CSS Box Model

• HTML 요소를 감싸는 상자
  • 요소, 패딩, 테두리, 마진으로 구성됨
  • 요소: 텍스트, 사진 등 보여줄 대상
  • 패딩: 요소 주변 영역을 감싼다.
  • 테두리: 요소와 패딩을 감싸는 테두리
  • 마진: 테두리 밖의 영역을 감싼다.

[출처 : 위니브(Weniv)]

• CSS Box Model은 블록 박스에 적용되며, 인라인 박스는 일부 동작만 사용한다.
  inline 요소는 width, height, 상하 margin 값 적용 X

 

width

• 요소의 너비
• 기본값은 콘텐츠 영역의 너비지만 box-sizing 속성을 사용하여 테두리 영역의 너비를 설정
  • auto: 기본값. 브라우저가 계산하여 지정
  • min-content: 최소 너비
  • max-content: 컨텐츠 내용의 선호 너비
  • fit-content: 가능한 공간을 최대한 사용하지만 max-content 보다는 작은 너비

 

 

height

• 요소의 높이
  • auto: 기본값. 브라우저가 계산하여 지정(요소의 자식 기준으로 조절)

padding

• 단축 속성
• padding-top padding-right padding-bottom padding-left 순으로 작성 (시계 방향)

p {
	padding: 10px; /* top, right, bottom, left 모두 10px */
	padding: 10px 20px; /* top, bottom :10px,  left, right:20px */
	padding: 10px 20px 30px; /* top:10px, left,right:20px, bottom:30px */
	padding: 10px 20px 30px 40px;
}

 

margin

• 단축 속성
• margin-top margin-right margin-bottom margin-left 순으로 작성 (시계 방향)

/* 가운데 배치 */
p{
	width: 400px;
	margin: auto; 
}

/* 오른쪽 배치 */
p{
	width: 400px;
	margin: auto 0 auto auto;
}

• margin auto는 수평 정렬을 할 수 있지만 수직 정렬을 적용할 수는 없다.

🤔마진병합 현상 (Margin Collapsing)

요소와 요소 사이에 마진 공간이 있으면 더 높은 값의 마진값 적용 [출처 : 위니브(Weniv)]

자식 요소의 마진값이 부모의 높이에 영향을 미치지 않는 현상[출처 : 위니브(Weniv)]

 

 💡마진병합 현상 해결방법

• 부모 요소에 overflow 속성 값을 적용.
• 부모 요소에 display: inline-block 값을 적용.
• 부모 요소에 border 값을 적용.
• 부모 요소에 display:flow-root을 사용. (IE 지원 불가)

    마진병합 현상을 굳이 해결할 필요는 없다! 이 현상을 알고 있는 상태로 작업을 진행하면 된다.

 

border

• 테두리 지정
• 테두리는 요소가 차지하는 전체 너비, 높이의 일부
• 단축속성
• 선의 두께, 스타일, 색상을 지정
• border-width border-style border-color

🧷border-style

border-style - CSS: Cascading Style Sheets | MDN

 

🧷border-image

border-image - CSS: Cascading Style Sheets | MDN

 

border-radius

• 상자의 모서리를 둥글게 처리
• 단축 속성
• boder-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius
  순서로 작성(시계 방향)

See the Pen Untitled by astinaus (@astinaus) on CodePen.

box-sizing

• content-box: 기본값. width, height에 border, padding 포함 X
• border-box: width, height에 border, padding 포함.
  • width = 콘텐츠 너비 + border + padding

overflow, overflow-x, overflow-y

• 박스보다 콘텐츠가 더 커서 콘텐츠가 넘칠 경우 처리방법 지정
  • visible: 기본값. 박스를 넘는 콘텐츠를 그대로 출력
  • hidden: 요소의 크기만큼 맞추기 위해 잘라냄. 스크롤바 X
  • scroll: 요소의 크기만큼 잘라내고 스크롤바 O
  • auto: 자동으로 콘텐츠가 넘칠 경우 스크롤바 노출

background

• 단축 속성
• background-attachment
  • fixed: 뷰포트에 고정
  • local: 요소 콘텐츠에 대해 고정. 스크롤이 존재하면 배경은 콘텐츠와 함께 스크롤.
  • scroll: 배경 요소 자체에 대해 고정. 요소에 스크롤이 존재해도 배경은 함께 스크롤 되지 않음.
• background-clip: 요소의 배경이 테두리, 안쪽 여백, 콘텐츠 상자 중 어디까지 차지할지 지정
  • border-box
  • padding-box
  • content-box
• background-color: 배경 색상 설정
• background-image: 배경 이미지 설정
• background-origin: 배경 이미지 배치 기준 조절
• background-position: 배경의 위치를 설정
• background-repeat: 배경 이미지를 어떻게 반복할 것인지 설정.
  • repeat: 반복
  • no-repeat : 반복하지 않음
  • repeat-x : x축으로만 반복
  • repeat-y: y축으로만 반복
• background-size
  • contain : 이미지가 잘리거나 찌그러지지 않는 한도 내에서 제일 크게 설정. 여백이 발생할 수 있다.
  • cover : 이미지가 찌그러지지 않는 한도 내에서 제일 크게 설정. 이미지의 가로세로비가 요소와 다르다면 이미지를 세로 방향 또는 가로 방향으로 잘라내어 여백이 생기지 않도록 설정합니다.

box-shadow

• 그림자 효과를 추가
• offset-x offset-y blur-radius spread-radius color 순서로 작성

 

opacity

• 불투명도를 설정
• 0 - 1 사이의 숫자를 지정할 수 있다. (0: 투명, 1: 불투명)