CSS 속성(Properties) - 박스 모델

박스 모델

HTML 요소의 기본적인 모양을 만들어내는 속성

 

가로/세로 너비

width/height

• 요소의 가로/세로 너비
• 값
  • auto [기본 값] : 브라우저가 너비를 계산
  • 단위: px, em, vw 등 단위로 지정

div {
	width: 100px; /* 가로 너비 */
	heigth: 100px; /* 세로 너비 */
}

 

max-width, max-height

• 요소가 커질 수 있는 최대 가로/세로 너비
• 값
  • none [기본 값] : 최대 너비 제한 없음
  • 단위: px, em, vw 등 단위로 지정

 

min-width, min-height

• 요소가 작아질 수 있는 최소 가로/세로 너비
• 값
  • 0 [기본 값] : 최소 너비 제한 없음
  • 단위: px, em, vw 등 단위로 지정

 

💡 단위

• px: 픽셀
• %: 상대적 백분율
• em: 요소의 글꼴 크기
  • 10em = (현재 글꼴 크기 * 10)px
• rem: 루트 요소(html)의 글꼴 크기
  • 10rem = (html 글꼴 크기 * 10)px
• vw: 뷰포트 가로 너비의 백분율
• vh: 뷰포트 세로 너비의 백분율

 

외부 여백

margin

• 요소의 외부 여백(공백)을 지정하는 단축 속성
• 값
  • 0 [기본 값] : 외부 여백 없음
  • auto: 브라우저가 여백을 계산
    • 가로(세로) 너비가 있는 요소의 가운데 정렬에 활용
  • 단위: px, em, vw 등 단위로 지정
  • 음수 사용 가능
• margin-방향

margin: 10px; /* 상하좌우 10px */
margin: 10px 20px; /* 상하 10px, 좌우 20px */
margin: 10px 20px 30px /* 상 10px, 좌우 20px, 하 30px */
margin: 10px 20px 30px 40px; /* 상 10px, 우 20px, 하 30px, 좌 40px (시계방향) */

 

내부 여백

padding

• 요소의 내부 여백(공간)을 지정하는 단축 속성
•  값
  • 0 [기본 값] : 내부 여백 없음
  • 단위: px, em, vw 등 단위로 지정
  • %: 부모 요소의 가로 너비에 대한 비율로 지정
• 요소가 크기가 커짐
• padding-방향

padding: 10px; /* 상하좌우 10px */
padding: 10px 20px; /* 상하 10px, 좌우 20px */
padding: 10px 20px 30px /* 상 10px, 좌우 20px, 하 30px */
padding: 10px 20px 30px 40px; /* 상 10px, 우 20px, 하 30px, 좌 40px (시계방향) */

 

테두리 선

border: border-width border-style border-color

• 요소의 테두리 선을 지정하는 단축 속성
• 값
  • border-width
  • border-style
    • none: 선 없음
    • soild: 실선
    • dotted: 점선
    • dashed: 파선
  • border-color
    • black [기본 값]
    • transparent: 투명
  • border-radius
    • 요소의 모서리를 둥글게 깎음

 

💡 색상 표현

• 색상 이름: 브라우저에서 제공하는 색상 이름
• Hex 색상 코드: 16진수 색상
• RGB: 빛의 삼원색
• RGBA: 빛의 삼원색 + 투명도

 

크기 계산

box-sizing

• 요소의 크기 계산 기준을 지정
• 값
  • content-box [기본 값] : 요소의 내용으로 크기 계산
  • border-box: 요소의 내용 + padding + border로 크기 계산
    • 가로/세로 너비를 명시한 그대로 수치를 사용하고 싶을 때

 

넘침 제어

overflow

• 요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축 속성
• 값
  • visible [기본 값]
  • hidden: 넘친 내용을 잘라냄
  • auto: 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성
• overflox-x/overflow-y (개별 속성 가능)

 

출력 특성

display

• 요소의 화면 출력(보여짐) 특성
• 값
  • block: 상자(레이아웃) 요소
  • inline: 글자 요소
  • inline-block: 글자 + 상자 요소
  • flex: 플렉스 박스(1차원 레이아웃)
  • grid: 그리드(2차원 레이아웃)
  • none: 보여짐 특성 없음, 화면에서 사라짐
  • 기타
    • table
    • table-row
    • table-cell
    • 등등

 

투명도

opacity

• 요소 투명도
• 값
  • 1 [기본 값]
  • 0부터 1사이의 소수점 숫자

 

---

※ 패스트캠퍼스 FE 프로젝트십 과정 중 강의를 듣고 정리한 내용입니다.