CSS background, img, font

아래 내용은 학원 수업 및 온라인 강좌 등을 듣고 정리한 내용입니다.

Background (단축)

background : 색상 이미지 반복설정 위치 이미지스크롤여부;

-color : 배경색상 지정
-image : 요소에 하나 이상의 이미지 (다중이미지 : 먼저 작성된 이미지가 위에 쌓임, ie 이하 불가능)를 삽입
```
background-image : url("경로"),
                   url("경로");
```
-repeat : 반복설정
- repeat-x : 수평
- repeat-y : 수직
- no-repeat : 반복 안 함
-position : 이미지 위치 설정
- top, bottom, center 등의 방향으로 작성 가능
- 단위(%, px)로 작성할 경우 x축, y축 순서대로 작성
- 단위와 방향을 혼합해서 사용가능
-attachment : 요소가 스크롤될 때 이미지 스크롤 여부
- scroll : 요소를 따라서 같이 스크롤 (기본)
- fixed : 배경 이미지가 뷰포트에 고정되어 스크롤 안됨
- local : 스크롤 시 이미지가 같이 스크롤
-size : 이미지 크기를 지정
- auto : 원래크기
- 단위 : width, height (width만 지정 시 비율에 맞춰서 출력됨)
- contain : 비율 유지 (짧은 너비에 맞춰짐 : 빈 공간이 있을 수 있음)
- cover : 비율 유지 (넓은 너비에 맞춰짐 : 이미지가 잘릴 수 있음)

font 단축속성 작성 시 font-size와 font-family는 필수로 입력해야 사용가능
값과 값 사이는 띄어쓰기로 구분함. (단, 폰트크기와 줄높이는 '/'로 구분한다.)

font : 기울기 두께 크기/줄높이 글꼴;

font-weight : 글자 두께 지정. 100 ~ 900까지 100 단위로 구분하거나 lighter, normal, bold, bolder (lighter, bolder는 부모요소를 기준으로 상대적이다.)로 표현 가능함.
font-size : 글자크기. px, em, rem, % (부모 요소의 비율)
line-height : 줄높이 지정. 단위를 작성하지 않은 경우 글꼴 크기의 배수로 지정됨
font-family : 글꼴이름, 후보목록을 지정한다. 글꼴 계열 이름 작성
- sans-serif : 고딕
- serif : 바탕
- monospace : 고정너비
- cursive : 필기
- fantasy : 장식글꼴
color : 색상이름, 16진수 색상코드 (ex : #ffffff), rgb, rgba, hsl(색상, 채도, 명도의 순서대로 제어), hsla
text-align : 문자의 정렬방식 (left, right, center, justify)
text-indent : 들여 쓰기 (음수사용도 가능. 글자를 밀어내는 개념으로 많이 사용한다. ex : -9999px)
text-decoration : 문자에 장식(line)을 설정. (underline, overline, line-through)
letter-spacing : 자간지정. px로 단위 지정하지 말 것!
word-spacing : 단어 사이 간격 지정

참고자료
object-fit 참고 (mdn)