[패스트캠퍼스 수강 후기] 프론트엔드 인강 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

좋은 웹페이지 즐겨찾기