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

background-repeat

• 배경 이미지의 반복을 설정
• 속성 값
  • repeat : 배경 이미지를 수직, 수평으로 반복 (기본값)
  • repeat-x : 배경 이미지를 수평으로 반복
  • repeat-y : 배경 이미지를 수직으로 반복
  • no-repeat : 반복 없음

div {
    background-image: url(/image.jpg);
    background-repeat: no-repeat; /* 반복 수행 X */
}

background-position

• 배경 이미지의 위치를 설정
• 속성 값
  • % : 왼쪽 상단 모서리는 0%, 0%, 오른쪽 하단 모서리는 100%, 100% (기본값 : 0%, 0%)
  • 방향 : 뱡향을 입력하여 위치 설정
    • top, bottom, left, right, center
  • 단위 : px, em, cm 등 단위로 지정

사용법

• 값이 방향일 경우

background-position: 방향1 방향2;
/* 순서를 바꿔도 된다 */
background-position: 방향2 방향1;
/* center 일 경우 한번만 써도 됨 */
background-position: center;

• 값이 단위 (%, px 등) 일 경우

background-position: x축 y축;

• 동시에 사용

/* 순서를 바꾸면 안됨 */
background-position: 50px bottom 
background-position: left 50px 

background-attachment

• 요소가 스크롤될 때 배경 이미지의 스크롤 여부(특성) 설정
• 속성 값
  • scroll : 배경 이미지가 요소를 따라서 같이 스크롤 됨 (기본값)
  • fixed : 배경 이미지가 뷰포트(Viewport)에 고정되여, 요소와 같이 스크롤되지 않음
  • local : 요소 내 스크롤 시 배경 이미지가 같이 스크롤 됨

background-attachment: fixed

background-attachment: local

<div class="container">
    <div class="for-scroll"></div>
</div>

.container {
    width: 400px;
    height: 500px;
    background-image: url("...");
    background-attachment: local;
}

.for-scroll {
    height: 200px;
}

프론트엔드 올인원 패키지 바로가기 -> https://bit.ly/3m0t8GM