CSS 필터

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

필터는 재미있는 효과를 사용하여 이미지, 배경, 심지어 텍스트까지 시각적으로 변경할 수 있게 해줍니다. 마치 선글라스를 쓰거나, 스포트라이트를 켜거나, 흑백 모드로 들어가는 것과 같습니다. 이 모든 것이 단 한 줄의 CSS로 가능합니다.

1. 블러 (px) – 요소를 부드럽고 초점이 맞지 않게 만듭니다.

img {
  filter: blur(5px);
}
//약간 초점이 맞지 않음

2. Brightness(%) – 무언가가 얼마나 밝거나 어둡게 보일지를 제어합니다.

img {
  filter: brightness(150%);
}
//스포트라이트를 켜는 것처럼 밝게 만듭니다.

3. 그레이스케일(%) – 색상을 흑백으로 변환합니다.

img {
  filter: grayscale(100%);
}
//클래식한 빈티지 또는 신문 효과.

4. 세피아(%) – 레트로 사진 분위기를 위해 따뜻하고 갈색 톤을 추가합니다.

img {
  filter: sepia(70%);
}
//오래된 사진 앨범처럼.

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

실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.

실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.

챌린지

쉬움

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

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

치트 시트

CSS 필터는 효과를 사용하여 이미지, 배경 및 텍스트를 시각적으로 변경할 수 있게 해줍니다.

Blur (px) – 요소를 부드럽고 초점이 맞지 않게 만듭니다:

img {
  filter: blur(5px);
}

Brightness(%) – 대상이 얼마나 밝거나 어둡게 보일지 제어합니다:

img {
  filter: brightness(150%);
}

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

img {
  filter: grayscale(100%);
}

Sepia(%) – 복고풍 사진 효과를 위해 따뜻한 갈색 톤을 추가합니다:

img {
  filter: sepia(70%);
}

직접 해보기

<!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>

실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.