22-09-13-TIL

CSS declarations

단위 (Units)

• 절대 길이 단위 : cm, mm, px
• 상대 길이 단위 : em, rem, vw, vh, %

절대 길이 단위 : px

화면에서 이미지 표현하는 가장 단위 px (pixel)
사용자가 선언한 고정된 크기 그대로 화면에 표현

폰트 초기 기본 px 크기 : 16px

상대 길이 단위 : em, rem, vw, vh, %

em : 부모 요소 글자 크기 기준으로 배수 단위
rem : 최상위 요소 html 글자 크기를 기준으로 배수 단위
% : 부모 요소 기준 백분율 단위
vw : 화면 넓이 기준 백분율 단위
vh : 화면 높이 기준 백분율 단위
vmin : 화면 넓이, 높이 중 작은 값 기준 백분율 단위

화면의 짧은 쪽을 100으로 나눈것이 vmin,
긴 쪽을 100으로 나눈것이 vmax

vmax : 화면 넓이, 높이 중 큰 값 기준 백분율 단위
ex : 현재 폰트 소문자 x 높이 값 기준 백분율 단위

overflow

요소의 콘텐츠가 큰 경우 처리하는 방식
overflow-x, overflow-y

overflow: visible; -> 기본 값
overflow: hidden; -> 콘텐츠를 요소의 크기만큼 잘라낸다.
overflow: scroll; -> 잘라냄 + 스크롤 바 제공
overflow: hidden visible;
overflow: visible hidden;	-> hidden 위치에 따라 가로, 세로 스크롤 변경

background-image

html 요소 뒤에 이미지 배치할 때 사용

background-image: url() 을 이용하여 이미지 불러옴
background-color: 요소의 배경 색 지정
background-repeat: 배경 이미지 어떤 방법으로 반복
	repeat
    no-repeat
    repeat-x
    repeat-y
    round : 이미지 짤리지 않게 크기 변화줘서 간격 없이 반복
    space : 이미지 짤리지 않게 크기 유지한 채로 반복
background-position: 배경 이미지의 위치 지정
background-size: cover,contain, 100%
	-> cover : 넓이와 높이에 맞게 잘라냄
    -> contain: 넓이나 높이에 맞춰 이미지 모두 다 넣고 반복
    -> 100% : width, height에 맞게 압축
    

font

font-size

글꼴 크기 변경하기

medium : 웹 브라우저 기본 글자크기
xx-small, x-small, small, large, x-large, xx-large
smaller, larger
length
initial : 기본값으로 설정
inherit

font-family

family-name : 글꼴 이름 사용
initial
inherit

font-weight

글자 굵기 설정
normal - 보통 굵기
bold
bolder - 상속된 값보다 굵은 굵기
lighter - 상속된 값보다 얇은 굵기
number
initial
inherit

opacity 투명도 지정

0.0 ~ 1 사이의 숫자로 지정

color

background-color: red;		// 색상 이름
background-color: RGB(255, 87, 51);		// RGB, RGBA 값
background-color: rgba(144, 144, 162, 1);
background-color: #ff0000;
// HSL, HSLA (색상, 채도, 명도를 통한 색상 표현)
background-color: hsl(0, 100%, 50%);
background-color: hsla(0, 100%, 50%, 0.5);