결혼 초대장

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

챌린지

쉬움

이 챌린지에서는 CSS를 사용하여 레이아웃, 타이포그래피 및 간격에 중점을 두어 초대장을 스타일링합니다. 아래 이미지에 표시된 디자인을 재현하기 위해 padding, margins, borders 및 colors와 같은 속성을 적용하게 됩니다.

.invitation 클래스를 가진 div, h2 제목 및 여러 개의 단락이 포함된 HTML 문서가 제공됩니다. 여러분의 과제는 CSS를 사용하여 이 웨딩 초대장을 단계별로 스타일링하는 것입니다.

지침을 주의 깊게 따르고 각 스타일을 순서대로 적용하세요.

1단계: Body 스타일링

body 요소를 선택합니다.
font family를 "Times New Roman", serif로 설정합니다.
Flexbox 속성을 사용하여 초대장 카드를 완벽하게 중앙에 배치합니다.
height를 100vh로 설정합니다.
밝은 배경색(#f8f5f0)을 설정합니다.

2단계: 초대장 카드 스타일링

.invitation 클래스를 대상으로 합니다.
흰색 배경색(#fff)을 설정합니다.
2px solid gold 테두리를 추가합니다.
패딩(20px)을 추가합니다.
width를 350px로 설정합니다.
텍스트를 중앙 정렬합니다.
모서리를 둥글게 만들기 위해 border-radius를 추가합니다.
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1)를 사용하여 부드러운 그림자를 추가합니다.

3단계: 텍스트 스타일링

h2 요소를 대상으로 합니다.
- 텍스트 색상을 goldenrod로 설정합니다.
- 글꼴 크기를 22px로 설정합니다.
.names 클래스를 선택합니다.
- 필기체 글꼴("Dancing Script", cursive)을 사용합니다.
- 글꼴 크기를 26px로 설정합니다.
모든 p 요소를 대상으로 합니다.
- 글꼴 크기를 18px로 설정합니다.
- 텍스트 색상을 #5a4d3f로 변경합니다.

직접 해보기

<html>
    <head>
        <title>Invitation Card</title>
        <link rel="stylesheet" href="styles.css">  
    </head>
    <body>
        <div class="invitation">
            <h2>Wedding Invitation</h2>
            <p class="names">Emma & James</p>
            <p class="message">Together with their families, invite you to celebrate their wedding.</p>
            <p class="detail"><strong>Date:</strong> Saturday, June 15, 2025</p>
            <p class="detail"><strong>Time:</strong> 4:00 PM - Reception to follow</p>
            <p class="detail"><strong>Venue:</strong> Rosewood Garden, Lakeview</p>
            <p class="note">Please RSVP by May 20th</p>
            <p class="footer">We look forward to celebrating with you!</p>
        </div>
    </body>
</html>