[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 49회차 미션

내일까지 수강하면 미션 끝!

패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 49일차입니다!

내일까지 미션을 제출하면 1주일 쉬고 최종 미션을 수행하면 되겠네요. 👏👏

오늘은 16번째 커리큘럼을 마무리지었습니다.

남은 분량을 보니 열흘 정도 뒤면 CSS 파트 공부를 끝낼 수 있을 것 같아요. 아자아자!

 

스타벅스 홈페이지를 이렇게 쉽게 슥슥 만들 수 있다니

오늘은 04. background-repeat / 05. background-position / 06. background-attachment / 07.background-size 에 대하여 공부했습니다.

---

 

background-repeat

◾ 배경 이미지의 반복을 설정

◾ 속성 값 ⬇

 

값	의미	기본값
repeat	배경 이미지를 수직, 수평으로 반복	repepat
repeat-x	배경 이미지를 수평으로 반복	.
repeat-y	배경 이미지를 수직으로 반복	.
no-repeat	반복 없음	.

 

background-position

◾ 배경 이미지의 위치를 수정

◾ 속성 값 ⬇

 

값	의미	기본값
%	왼쪽 상단 모서리: 0% 0% 오른쪽 하단 모서리: 100% 100%	0% 0%
방향	방향을 입력하여 위치 설정 top, bottom, left, right, center	.
단위	px, em, cm 등 단위로 지정	.

 

◽ 사용법

➡ 값이 단위(%, px)일 경우: background-position: x축(가로) y축(세로);

➡ 값이 방향일 경우: background-position: 방향1 방향2;

 

background-attachment

◾ 요소가 스크롤될 때 배경 이미지의 스크롤 여부(특성) 설정

◾ 속성 값 ⬇

 

값	의미	기본값
scroll	배경 이미지가 요소를 따라서 같이 스크롤됨	scroll
fixed	배경 이미지가 뷰포트에 고정되어 요소와 같이 스크롤되지 않음	.
local	요소 내 스크롤 시 배경 이미지가 같이 스크롤됨	.

 

background-size

◾ 배경 이미지의 크기를 지정

◾ 속성 값 ⬇

 

값	의미	기본값
auto	배경 이미지가 원래의 크기로 표시됨	auto
단위	px, em, % 등 단위 지정 width height 형태로 입력 가능 width만 입력하면 비율에 맞게 지정	.
cover	배경 이미지의 크기 비율을 유지하며, 요소의 더 넓은 너비에 맞춰짐 ➡ 이미지가 잘릴 수 있음	.
contain	배경 이미지의 크기 비율을 유지하며, 요소의 더 짧은 너비에 맞춰짐 ➡ 이미지가 잘리지 않음	.

 

---

강의 링크: https://bit.ly/3m0t8GM