복습 챌린지

Coddy HTML 여정의 Styling with CSS 섹션에 포함된 레슨 — 76개 중 38번째.

챌린지

쉬움

이번 복습 챌린지에서는 width, height, margin, padding, border를 사용하여 도서 정보 박스의 스타일을 지정합니다. 이를 통해 콘텐츠 구조화, 간격 생성 및 깔끔한 레이아웃을 위한 테두리 적용 능력을 테스트합니다.

세 개의 div 구역이 포함된 HTML 문서가 제공되며, 각 구역에는 도서명(book name), 저자(author), 짧은 설명(short description)이 들어 있습니다. 여러분의 작업은 width, height, margin, padding, border를 사용하여 이 박스들의 스타일을 지정하는 것입니다.

다음 단계를 따르세요:

"book" 클래스를 가진 모든 요소를 대상으로 하는 클래스 선택자를 사용하여 CSS 규칙을 작성하세요.
각 도서 박스의 width를 350px로, height를 150px로 설정하세요.
콘텐츠 주변에 공간을 만들기 위해 각 도서 박스 내부에 15px의 padding을 추가하세요.
각 도서 박스에 3px width와 black color를 가진 solid border를 설정하세요.
각 도서 박스 사이에 간격을 두기 위해 20px의 margin을 추가하세요.

직접 해보기

<html>
<head>
    <title>Book collection</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="book">
        <h3>Harry Potter and the Sorcerer's Stone</h3>
        <p>Author: J.K. Rowling</p>
        <p>Description: A young wizard's journey to defeat a dark wizard.</p>
    </div>

    <div class="book">
        <h3>The Great Gatsby</h3>
        <p>Author: F. Scott Fitzgerald</p>
        <p>Description: A tragic story of wealth, love, and betrayal in the 1920s.</p>
    </div>

    <div class="book">
        <h3>1984</h3>
        <p>Author: George Orwell</p>
        <p>Description: A dystopian novel about totalitarianism and surveillance.</p>
    </div>
</body>
</html>