CSS 글꼴

font-style

글자의 기울기

기본값, normal : 기울기 없음

italic : 이텔릭체

font-weight

글자의 두께(가중치)

기본값, 400 : 기본 두께

bold, 700 : 두껍게

100 ~ 900 : 100단위의 숫자 9개, normal과 bold 이외 두께

font-size

글자의 크기

기본값, 16px: 기본 크기

단위 : px, em, rem 등 단위로 지정

line-height

한 줄의 높이, 행간과 유사

기본값, normal : 브라우저의 기본 정의를 사용 -> css reset을 통해서 1로 바뀌어 글꼴 크기의 배수로 지정.

숫자 : 요소의 글꼴 크기의 배수로 지정

단위 : px, em, rem 등의 단위로 지정

font-family

글꼴(서체) 지정

font-family:글꼴1, "글꼴2", ...글꼴계열;

띄어쓰기 등 특수문자가 포함된 글꼴 이름은 큰 따옴표로 묶음.

글꼴계열은 필수로 작성.

CSS 문자

color

글자의 색상

기본값, rgb(0,0,0) : 검정색

색상 : 기타 지정 가능한 색상

text-align

문자의 정렬 방식

기본값, left : 왼쪽 정렬

right : 오른쪽 정렬

center : 가운데 정렬

text-decoration

문자의 장식(선)

기본값, none : 장식 없음

underline : 밑줄

line-throught : 중앙 선

text-indent

문자 첫 줄의 들여쓰기

기본값 ,0 : 들여쓰기 없음

단위 : px, em, rem 등 단위로 지정

CSS 배경

background-color

요소의 배경 색상

기본값, transparent : 투명함

색상 : 지정 가능한 색상

background-image

요소의 배경 이미지 삽입

background-image : url("경로")

기번값, none : 이미지 없음

url("경로") : 이미지 경로

background-size :

요소의 배경 이미지 크기

기본값, auto : 이미지의 실제 크기

단위 : px, em, rem 등 단위로 지정

cover : 비율을 유지, 요소의 더 넓은 너비에 맞춤

contain : 비율을 유지, 요소의 더 짧은 너비에 맞춤

background-repeat :

요소의 배경 이미지 반복

기본값, repeat : 이미지를 수직, 수평 반복

repeat-x : 이미지를 수평 반복

repeat-y : 이미지를 수직 반복

no-repeat : 반복 없음

background-position:

요소의 배경 이미지 위치

방향 : top, bottom, left, right, center 방향

단위 : px, em, rem 등 단위로 지정 // x 축, y축

background-attachment:

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

기본값, scroll : 이미지가 요소를 따라서 배경 이미지도 같이 스크롤

fixed : 이미지가 뷰포트에 고정, 스크롤 X, 요소는 올라가는 배경이미지는 고정