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

배경

background

• 요소의 배경을 설정
• 속성 값
  • background-color : 배경 색상
    • 기본값 : transparent
  • background-image : 하나 이상의 배경 이미지
    • 기본값 : none
  • background-repeat : 배경 이미지의 반복
    • 기본값 : repeat
  • background-position : 배경 이미지의 위치
    • 기본값 : 0 0
  • background-attachment : 배경 이미지의 스크롤 여부 (특성)
    • 기본값 : scroll

사용법

background: 색상 이미지경로 반복 위치 스크롤특성;

/* 색상 이미지경로 반복 위치 스크롤특성 */
.box1 {
    background: red url("../img/image.jpg") no-repeat left top scroll;
}

/* 이미지경로 반복 위치 */
.box2 {
    background: url("../img/image.jpg") no-repeat right 100px;
}

/* 색상 */
.box3 {
    background: red;
}

background-color

• 요소의 배경 색상을 지정
• 속성 값
  • 색상 : 요소의 배경 색상
  • transparent : 투명 (기본값)

div {
    background-color: tomato;
}

/* 단축 속성으로도 사용 가능 */

div {
    background: tomato;
}

background-image

• 요소의 배경에 하나 이상의 이미지를 삽입
• 속성 값
  • none : 이미지 없음 (기본값)
  • url('경로') : 이미지 경로 (URL)

사용법

background-image: url("경로");

.box {
    background-image: url("../img/image.jpg");
    width: 120px;
    height: 80px;
}

배경 이미지 삽입 시, 요소의 크기가 설정되어 있어야 배경 이미지가 보일 수 있음

box1 {
    /* 개별 속성 */
    background-image: url("../image1.jpg"),
        url("../image2.jpg"),
        ulr("..image3.jpg");
}

box2 {
    /* 단축 속성 */
    background: url("../image1.jpg") no-repeat,
        url("../image2.jpg") no-repeat 100px 50px,
        url("../image3.jpg") repeat-x
}

하나 이상의 배경 이미지를 삽입할 경우 , 로 구분, 먼저 작성된 이미지가 더 위에 쌓임

이런 '다중 배경 이미지'는 IE8 이하 버전에서 사용 불가능

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