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

background(단축)

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

• -color : 배경색상 지정
• -image : 요소에 하나 이상의 이미지 (다중이미지: 먼저 작성된 이미지가 위에 쌓임, ie 이하 불가능)를 삽입

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만 지정시 비율에 맞춰서 출력됨)
  • cover : 비율 유지 (넓은 너비에 맞춰짐 : 짤릴 수 있음)
  • contain : 비율 유지 (짧은 너비에 맞춰짐 : 빈공간이 있을 수 있음)

img에서 사용할 수 있는 설정

• object-fit : background-size의 설정부분과 비슷함
  • fill : 콘텐츠가 콘텐츠 박스를 가득 채웁니다. 가로,세로 비율이 일치하지 않으면 콘텐츠가 늘어납니다.
  • contain : 비율 유지 (짧은 너비에 맞춰짐 : 빈공간이 있을 수 있음)
  • cover : 비율 유지 (넓은 너비에 맞춰짐 : 짤릴 수 있음)
  • none : 대체 콘텐츠의 크기를 조절하지 않습니다.
  • scale-down : none과 contain 중 대체 콘텐츠의 크기가 더 작아지는 값을 선택합니다.
• object-position: background-position의 설정부분과 비슷함.

font

• font (단축) : font 단축속성 작성 시 font-size와 font-family는 필수로 입력해야 사용가능

ex.
font: 기울기 두께 크기/줄높이 글꼴; // 값과 값 사이는 띄어쓰기로 구분 함. 단, 폰트크기와 줄높이는 '/'로 구분한다.

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

object-fit 참고(mdn)