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

백그라운드 반복

Frontend SELF KO

레벨 18 , 레슨 3

사용 가능

3.1 background-repeat 속성

CSS의 background-repeat와 background-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-repeat와 background-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;: 이미지를 비율을 유지하면서 요소를 완전히 덮도록 크기 조정해. 이미지 일부가 잘릴 수도 있어

이전 이전 레슨

다음 다음 레슨

코멘트

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION