[CSS] 글꼴, 문자, 배경 속성(font, text, background)

글꼴

font-size : 글자의 크기. 16px(기본값), 단위

font-style ; 글자의 기울기. normal(기울기 없음, 기본값), italic(이텔릭체)

font-weight : 글자의 두께. normal(400,기본값), bold(700), 100~900(수치로 설정)

font-family ; 글꼴(서체) 지정, 여러 개 지정된 것 중 가장 먼저 적용되는 글꼴 사용. san-serif(고딕체 계열, 대부분), monopsace(고정너비 글꼴 계열), cursive(필기체 계열), fantasy(장식 글꼴 계열)

-> 하나씩 써보기

line-height ; 한줄의 높이. 숫자(요소의 글꼴 크기의 배수로 지정), 단위

 

 

문자

color ; 글자의 색상. 색상

text-decoration ; 문자의 장식(선). none(기본값), underline(밑줄), line-through(중앙 선)

text-align ; 문자의 정렬 방식. left, right, center

text-indent ; 들여쓰기. 0(기본 값)단위

 

 

배경

background-color ; 요소의 배경 색상. transparent(투명함, 기본값), 색상

background-image ; 요소의 배경 이미지 삽입. none(기본값), url("경로")

background-size ; 요소의 배경 이미지 크기. auto(이미지의 실제 크기, 기본값), 단위, cover(비율을 유지, 요소의 더 넓은 너비(가로/세로 中)에 맞춤), contain(비율을 유지, 요소의 더 짧은 너비에 맞춤)

- 숫자 하나만 입력할 경우, 가로의 길이에 해당됨. ex) background-size: 100px -> x=100px

background-repeat ; 요소의 배경 이미지 반복. repeat(이미지를 수직, 수평 반복, 기본값), repeat-x(이미지를 수평 반복), repeat-y(이미지를 수직 바복), no-repeat(반복 x)

background-position ; 요소의 배경 이미지 위치. 방향(top,bottom,left,right,center. 두 개 동시 지정 가능), 단위(x축, y축)

background-attachment ; 요소의 배경 이미지 스크롤 특성. scroll (이미지가 요소를 따라서 같이 스크롤,기본값), fixed(이미지가 뷰포트에 고정 & 스크롤 x)