HTML 마무리하기

Coddy의 이미지 아코디언 | 프론트엔드 프로젝트 코스 레슨 — 17개 중 7번째.

이제 하나의 input과 하나의 label이 있는 것을 볼 수 있습니다. 그리고 이것들은 함께 아코디언의 단일 섹션을 나타냅니다.

챌린지

쉬움

1. input 및 label 섹션을 복사합니다. 그리고 label 아래에 세 번 붙여넣으세요:

<input type="radio" name="slide" id="c1" checked>
<label for="c1" class="card" id="one">
    <div class="row">
        <div class="icon">1</div>
        <div class="description">
            <h4>Morning</h4>
            <p>When sun rises</p>
        </div>
    </div>
</label>

2. 첫 번째 input의 ID가 "c1"으로 설정되어 있으므로, 다음 input ID들을 "c2", "c3", 그리고 "c4"로 변경해야 합니다.

3. label도 마찬가지입니다. 다음 label ID들을 "two", "three", 그리고 "four"로 변경하세요.

직접 해보기

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
        <script src="script.js"></script>
    </body>
</html>