CSS 필터

Coddy HTML 여정의 CSS 마스터 섹션에 포함된 레슨. 43개 중 22번째.

Filters를 사용하면 재미있는 effect로 images, 배경, 그리고 텍스트까지 시각적으로 변경할 수 있습니다. 이는 선글라스를 쓰거나, spotlight를 turning on 하거나, 흑백 모드로 into 들어가는 like한 동작입니다. 이 모든 것이 CSS 한 줄로 가능합니다.

1. Blur (px) : 요소가 부드럽고 초점이 맞지 않은 것처럼 보이게 합니다.

img {
  filter: blur(5px);
}
//slightly out of focus

2. Brightness(%): 어떤 것이 얼마나 밝거나 어둡게 보이는지 조절합니다.

img {
  filter: brightness(150%);
}
//brightens like turning on a spotlight.

3. Grayscale(%): 색상을 흑백으로 변환합니다.

img {
  filter: grayscale(100%);
}
//classic vintage or newspaper effect.

4. Sepia(%): 복고풍 photo 느낌을 위해 따뜻하고 갈색을 띠는 색조를 추가합니다.

img {
  filter: sepia(70%);
}
//like an old photo album.

실험해 볼 수 있는 필터가 훨씬 더 많습니다! 자유롭게 탐색하면서 어떤 창의적인 효과를 만들 수 있는지 확인해 보세요.

챌린지

쉬움

갤러리에 네 개의 이미지가 있습니다. 각 이미지에 다음 필터를 적용하는 것이 과제입니다:

첫 번째 이미지 (Blur): 이미지를 부드럽고 초점이 맞지 않게 만들려면 blur(3px) 필터를 적용하세요.
두 번째 이미지 (Brightness): 이미지를 더 밝게 만들려면 brightness(2.0)을 사용하세요.
세 번째 이미지 (Grayscale): 이미지를 흑백으로 바꾸려면 grayscale(100%)을 적용하세요.
네 번째 이미지 (Sepia): 이미지에 따뜻하고 vintage한 분위기를 주려면 sepia(70%)를 사용하세요.

각 이미지는 해당 필터의 이름을 딴 class가 있는 래퍼 <div> 안에 있습니다(blur, brightness, grayscale, sepia). 하위 선택자를 사용하여 이미지에 도달하세요. 예를 들어 .blur img { filter: blur(3px); }와 같이 작성하고, 이미지마다 하나의 rule을 작성하세요.

직접 해보기

<!DOCTYPE html>
<html>
<head>
    <style>
    .gallery {
        display: flex;
        flex-wrap: wrap; /* Allows the images to wrap into two rows */
        gap: 20px; /* Space between the images */
        justify-content: center; /* Centers the images */
        margin-top: 20px;
    }
    .gallery img {
        width: 200px;
        height: 260px;
    }
    
    /* Write your CSS rule here */
    
    </style>
</head>
<body>
    <h1>CSS Filters Gallery Challenge</h1>

    <div class="gallery">
        <div class="blur">
            <img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/German_shepherd_dog_colt.jpg" alt="Blurred Image">
        </div>
        <div class="brightness">
            <img src="https://upload.wikimedia.org/wikipedia/commons/8/86/Dog%2C_Helgafell%2C_Sn%C3%A6fellsnes_peninsula%2C_Iceland%2C_20230505_1507_5224.jpg" alt="Brightened Image">
        </div>
        <div class="grayscale">
            <img src="https://upload.wikimedia.org/wikipedia/commons/0/05/Pyreneean_Mountain_dog_guarding_sheep.jpg" alt="Grayscale Image">
        </div>
        <div class="sepia">
            <img src="https://upload.wikimedia.org/wikipedia/commons/4/4a/Fawn_and_white_Welsh_Corgi_puppy_standing_on_rear_legs_and_sticking_out_the_tongue.jpg" alt="Sepia Image">
        </div>
    </div>
</body>
</html>