CodeGym/행동/Frontend SELF KO/백그라운드 반복

백그라운드 반복

사용 가능

3.1 background-repeat 속성

CSS의 background-repeatbackground-size 속성은 요소 내에서 배경 이미지가 어떻게 반복되고 크기가 조정되는지 제어하는 데 사용돼. 이 속성들은 웹 개발자들에게 시각적으로 매력적인 배경을 만들 수 있는 유연한 도구를 제공해. 각각의 속성을 더 자세히 살펴보자.

background-repeat 속성은 요소 내에서 배경 이미지가 어떻게 반복되는지를 결정해. 기본적으로 배경 이미지는 가로와 세로로 반복돼.

값들

  • repeat: 이미지가 가로와 세로로 반복돼 (기본값)
  • repeat-x: 이미지가 가로로만 반복돼
  • repeat-y: 이미지가 세로로만 반복돼
  • no-repeat: 이미지가 반복되지 않아

1. repeat 값:

이미지가 가로와 세로로 반복돼.

CSS
.repeat {
  width: 200px;
  height: 200px;
  background-image: url('https://via.placeholder.com/50');
  background-repeat: repeat;
  border: 1px solid #000;
}
HTML
<div class="repeat">가로와 세로로 반복</div>

2. repeat-x 값:

이미지가 가로로만 반복돼.

CSS
.repeat-x {
  width: 200px;
  height: 200px;
  background-image: url('https://via.placeholder.com/50');
  background-repeat: repeat-x;
  border: 1px solid #000;
}
HTML
<div class="repeat-x">가로로만 반복</div>

3. repeat-y 값:

이미지가 세로로만 반복돼.

CSS
.repeat-y {
  width: 200px;
  height: 200px;
  background-image: url('https://via.placeholder.com/50');
  background-repeat: repeat-y;
  border: 1px solid #000;
}
HTML
<div class="repeat-y">세로로만 반복</div>

4. no-repeat 값:

이미지가 반복되지 않아.

CSS
.no-repeat {
  width: 200px;
  height: 200px;
  background-image: url('https://via.placeholder.com/50');
  background-repeat: no-repeat;
  border: 1px solid #000;
}
HTML
<div class="no-repeat">반복 없음</div>

코드 설명

  • .repeat: 이미지가 가로와 세로로 반복되어 요소를 모두 채워
  • .repeat-x: 이미지가 가로로만 반복돼
  • .repeat-y: 이미지가 세로로만 반복돼
  • .no-repeat: 이미지는 반복되지 않고 한 번만 표시돼

3.2 background-size 속성

background-size 속성은 배경 이미지의 크기를 제어해. 이미지를 요소에 맞게 크기 조정할 수 있도록 해줘.

값들:

  • auto: 이미지의 크기가 자동으로 결정돼 (기본값)
  • cover: 이미지를 비율을 유지하면서 요소를 완전히 덮도록 크기 조정해
  • contain: 이미지를 비율을 유지하면서 요소에 완전히 맞도록 크기 조정해
  • 절대값: 예를 들어, 100px 50px는 이미지의 가로와 세로를 픽셀 단위로 지정해
  • 백분율 값: 예를 들어, 50% 50%는 요소 크기의 백분율로 이미지의 가로와 세로를 지정해

1. 기본 크기 (auto):

이미지의 크기가 자동으로 결정돼 (기본값).

CSS
.size-auto {
  width: 200px;
  height: 200px;
  background-image: url('https://via.placeholder.com/50');
  background-size: auto;
  border: 1px solid #000;
}
HTML
<div class="size-auto">기본 크기 (auto)</div>

2. cover:

이미지를 비율을 유지하면서 요소를 완전히 덮도록 크기 조정해.

CSS
.size-cover {
  width: 200px;
  height: 200px;
  background-image: url('https://via.placeholder.com/150');
  background-size: cover;
  border: 1px solid #000;
}
HTML
<div class="size-cover">요소를 덮도록 크기 조정 (cover)</div>

3. contain:

이미지를 비율을 유지하면서 요소에 완전히 맞도록 크기 조정해.

CSS
.size-contain {
  width: 200px;
  height: 200px;
  background-image: url('https://via.placeholder.com/150');
  background-size: contain;
  border: 1px solid #000;
}
HTML
<div class="size-contain">완전히 맞도록 크기 조정 (contain)</div>

4. 절대값:

예를 들어, 100px 50px은 이미지의 가로와 세로를 픽셀 단위로 지정해.

CSS
.size-pixels {
  width: 200px;
  height: 200px;
  background-image: url('https://via.placeholder.com/150');
  background-size: 100px 50px;
  border: 1px solid #000;
}
HTML
<div class="size-pixels">픽셀 단위 크기 (100px 50px)</div>

5. 백분율 값:

예를 들어, 50% 50%는 요소 크기의 백분율로 이미지의 가로와 세로를 지정해.

CSS
.size-percent {
  width: 200px;
  height: 200px;
  background-image: url('https://via.placeholder.com/150');
  background-size: 50% 50%;
  border: 1px solid #000;
}
HTML
<div class="size-percent">백분율 크기 (50% 50%)</div>

코드 설명:

  • .size-auto: 이미지의 크기가 자동으로 결정돼
  • .size-cover: 이미지를 비율을 유지하면서 요소를 완전히 덮도록 크기 조정해. 이미지 일부가 잘릴 수도 있어
  • .size-contain: 이미지를 비율을 유지하면서 요소에 완전히 맞도록 크기 조정해. 이미지는 완전히 보이지만 빈 영역이 있을 수 있어
  • .size-pixels: 이미지의 크기가 픽셀 단위로 지정돼 (가로 100px, 세로 50px)
  • .size-percent: 이미지의 크기가 요소 크기의 백분율로 지정돼 (가로 50%, 세로 50%)

3.3 background-repeat와 background-size의 조합

background-repeatbackground-size 속성은 배경 이미지의 원하는 표시 효과를 얻기 위해 함께 자주 사용돼.

사용 예시:

CSS
.combined {
  width: 300px;
  height: 300px;
  background-image: url('https://via.placeholder.com/150');
  background-repeat: no-repeat;
  background-size: cover;
  border: 1px solid #000;
}
HTML
<body>
  <div class="combined">배경 이미지가 반복되지 않고 요소를 덮도록 크기 조정</div>
</body>

코드 설명:

  • background-repeat: no-repeat;: 이미지가 반복되지 않아
  • background-size: cover;: 이미지를 비율을 유지하면서 요소를 완전히 덮도록 크기 조정해. 이미지 일부가 잘릴 수도 있어
1
과제
Frontend SELF KO,  레벨 18레슨 3
잠금
배경 (repeat)
배경 (repeat)
1
과제
Frontend SELF KO,  레벨 18레슨 3
잠금
배경 (cover)
배경 (cover)
코멘트
  • 인기
  • 신규
  • 이전
코멘트를 남기려면 로그인 해야 합니다
이 페이지에는 아직 코멘트가 없습니다