Day 15 CSS 속성 (3)

2022-04-13

box sizing

요소의 크기 계산 기준을 지정

기본값 content-box 요소의 내용(content)으로 크기 계산
border-box 요소의 내용 + padding + border로 크기 계산

overflow

요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축 속성

기본값 visible 넘친 내용을 그대로 보여줌
hidden 넘친 내용을 잘라냄
scroll 넘친 내용 잘라냄, 스크롤바 생성
auto 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성

display

요소의 화면 출력(보여짐) 특성

각 요소에 이미 지정되어 있는 값 block inline inline-block
flex 플렉스 박스 (1차원 레이아웃)
grid 그리드 (2차원 레이아웃)
none 보여짐 특성 없음, 화면에서 사라짐

opacity

요소 투명도

기본값 1 불투명
0~1 0부터 1 사이의 소수점 숫자

font-weight

글자의 두께(가중치)

기본값 normal, 400 기본 두께
bold, 700 두껍게
100 ~ 900 100단위의 숫자 9개, normal과 bold 이외 두께

font-size

글자의 크기

기본값 16px 기본 크기
단위 px, em, rem

line-height

한 줄의 높이, 행간과 유사

숫자 요소의 글꼴 크기의 배수로 지정
단위 px, em, rem

background-image

요소의 배경 이미지 삽입

기본값 none 이미지 없음
url("경로") 이미지 경로

background-position

요소의 배경 이미지 위치

방향 top, bottom, left, right, center 방향
단위 px, em, rem

background-size

요소의 배경 이미지 크기

기본값 auto 이미지의 실제 크기
단위 px, em, rem
cover 비율을 유지, 요소의 더 넓은 너비에 맞춤
contain 비율을 유지, 요소의 더 짧은 너비에 맞춤

background-attatchment

요소의 배경 이미지 스크롤 특성

기본값 scroll 이미지가 요소를 따라서 같이 스크롤
fixed 이미지가 뷰포트에 고정, 스크롤 X