Input

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

챌린지

쉬움

대상 input 태그:

display를 none으로 설정합니다.

중요: 임의의 input을 클릭한 후 전환 텍스트가 나타나고, 클릭 후 label이 너비를 차지하도록 하려면 마지막에 이 코드를 추가하세요:

input:checked + label {
    width: 600px;
}

input:checked + label .description {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

직접 해보기

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