영화 목록

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

챌린지

쉬움

4개의 영화 카드를 스타일링하고 세로 열로 배치하세요. 최종 디자인은 아래 이미지와 비슷하게 보일 것이지만, 원하는 색상을 자유롭게 적용해 보세요.

다음 단계를 따르세요:

display: flex; flex-direction: column;을 사용하여 영화 카드를 세로 열로 쌓으세요.
justify-content: center;를 사용하여 열을 수직 중앙에 배치하세요.
align-items: center;를 사용하여 카드를 적절하게 정렬하세요.
각 영화 카드를 고정된 크기와 부드러운 색상으로 스타일링하세요.
각 영화 박스에 margin-bottom과 padding을 추가하여 카드 사이의 간격을 만들고 가독성을 높이세요.
원치 않는 간격 문제를 방지하기 위해 box-sizing: border-box를 적용하세요.
카드 내부의 추가 텍스트를 처리하기 위해 overflow: auto를 사용하세요.

디자인을 강화하고 시각적으로 더 매력적으로 만들기 위해 box-shadow, border-radius, font-family 및 제목에 다른 글꼴 색상을 자유롭게 추가해 보세요.

직접 해보기

<html>
    <head>
        <title>Movies</title>
        <link rel="stylesheet" href="styles.css">  
    </head>
    <body>
        <div class="movies">
            <div class="movie">
                <h2>King Kong (2005)</h2>
                <p>A filmmaker and his crew travel to Skull Island, where they encounter King Kong.</p>
            </div>
            <div class="movie">
                <h2>Inception (2010)</h2>
                <p>A thief who enters dreams to steal secrets faces his toughest mission yet.</p>
            </div>
            <div class="movie">
                <h2>The Matrix (1999)</h2>
                <p>A hacker learns the truth about reality and joins the fight against machines.</p>
            </div>
            <div class="movie">
                <h2>Casablanca (1942)</h2>
                <p>A nightclub owner is reunited with his lost love during World War II.</p>
            </div>
        </div>
    </body>
</html>