복습 챌린지

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

챌린지

쉬움

구조적 의사 클래스(structural pseudo-classes)를 사용하여 갤러리 페이지의 스타일을 지정하세요. 도전 과제는 다음과 같습니다:

갤러리의 첫 번째 이미지에 3px solid rgb(0, 0, 255) 테두리를 적용하세요.
갤러리의 마지막 이미지 캡션에 빨간색(red) 텍스트를 적용하세요.
:nth-child를 사용하여 모든 홀수 번째 이미지 컨테이너에 회색 배경(rgba(153, 153, 153, 1))을 적용하세요.

직접 해보기

<!DOCTYPE html>
<html>
<head>
    <title>Photo Gallery</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }   
        .gallery {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            justify-content: center;
        }   
        .image-container {
            width: 200px;
            padding: 10px;
            box-shadow: 0 0 5px rgba(0,0,0,0.2);
            text-align: center;
        }     
        img {
            max-width: 100%;
            height: auto;
        }    
        .caption {
            margin-top: 8px;
            font-size: 14px;
        }
        
        /* Write your CSS rules here */
        
    </style>
</head>
<body>
    <h1>My Photo Gallery</h1>
    <div class="gallery">
        <div class="image-container">
            <img src="https://upload.wikimedia.org/wikipedia/commons/4/45/Sunrise_at_Newell_Beach%2C_2004.jpg" alt="Image 1">
            <p class="caption">Sunrise at the beach</p>
        </div>
        <div class="image-container">
            <img src="https://upload.wikimedia.org/wikipedia/commons/d/db/Mt_Herschel%2C_Antarctica%2C_Jan_2006.jpg" alt="Image 2">
            <p class="caption">Mountain landscape</p>
        </div>
        <div class="image-container">
            <img src="https://upload.wikimedia.org/wikipedia/commons/8/80/NYC_wideangle_south_from_Top_of_the_Rock.jpg" alt="Image 3">
            <p class="caption">City skyline</p>
        </div>
        <div class="image-container">
            <img src="https://upload.wikimedia.org/wikipedia/commons/3/3d/D%C3%BClmen%2C_Rorup%2C_NSG_Roruper_Holz_--_2021_--_8187-91.jpg" alt="Image 4">
            <p class="caption">Forest trail</p>
        </div>
        <div class="image-container">
            <img src="https://upload.wikimedia.org/wikipedia/commons/8/87/Mesquite_Sand_Dunes_in_Death_Valley.jpg" alt="Image 5">
            <p class="caption">Desert sunset</p>
        </div>
        <div class="image-container">
            <img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Pressure_ridge_at_Cape_Columbia.jpg" alt="Image 6">
            <p class="caption">Arctic wilderness</p>
        </div>
    </div>
</body>
</html>