복습 챌린지

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

챌린지

쉬움

이번 요약 챌린지에서는 box-sizing, border-radius, overflow, box-shadow를 사용하여 신문 기사 스타일을 지정해 봅니다. 이를 통해 요소의 크기를 제어하고, 넘치는 콘텐츠를 처리하며, 시각적 매력을 높이는 능력을 테스트하게 됩니다.

두 개의 <div> 구역이 포함된 HTML 문서가 제공되며, 각 구역은 신문 기사를 나타냅니다. 여러분의 과제는 box-sizing, border-radius, overflow, box-shadow를 사용하여 이 기사들의 외관을 개선하는 스타일을 지정하는 것입니다.

아래 단계를 따르세요:

모든 <div> 구역을 대상으로 하는 CSS 규칙을 작성합니다.

너비(width)를 280px로, 높이(height)를 150px로 설정합니다.
패딩과 테두리가 전체 크기에 포함되도록 box-sizing: border-box;를 사용합니다.
콘텐츠 주변에 여백을 만들기 위해 각 기사 내부에 15px의 패딩(padding)을 추가합니다.
3px 두께의 진한 회색(#444) 실선 테두리(solid border)를 설정합니다.
모서리를 둥글게 만들기 위해 10px의 border-radius를 적용합니다.
미묘하게 떠 있는 효과를 주기 위해 4px 4px 8px rgba(0, 0, 0, 0.2) 값의 box-shadow를 추가합니다.
사용자가 넘치는 콘텐츠를 스크롤하여 볼 수 있도록 overflow: scroll;을 설정합니다.

직접 해보기

<html>
<head>
    <title>Newspaper Layout Challenge</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="headline">
        <h3>Biggest Tech Breakthrough of 2025!</h3>
        <p>Scientists have unveiled a revolutionary AI model that can predict climate changes with 99% accuracy.  
        This groundbreaking innovation is expected to transform how governments and organizations respond to global  
        warming, extreme weather events, and natural disasters. Experts believe that integrating AI-driven forecasting  
        with existing climate policies will significantly reduce environmental damage over the next decade.</p>
    </div>
    <div class="article">
        <h3>Opinion: The Future of Web Design</h3>
        <p>As CSS evolves, developers are experimenting with more dynamic layouts and interactive user experiences...</p>
    </div>
</body>
</html>