플로팅 알림

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

챌린지

쉬움

이번 챌린지에서는 아래 이미지(또는 유사한 디자인)와 같은 플로팅 알림을 재현해 봅니다. 이것은 요약 연습이므로, CSS 포지셔닝에 대해 배운 내용을 적용하여 알림과 닫기 버튼을 올바르게 배치해 보세요.

다음 단계에 따라 플로팅 알림의 스타일을 지정하세요:

1. 알림 상자 스타일 지정:

페이지 상단 근처, 대략 중앙에 배치하세요.
고정 너비를 설정하고 내부에 여백을 추가하세요.
배경, 글꼴, 테두리에 원하는 색상을 사용하여 뚜렷한 경고 스타일을 만드세요.
둥근 모서리와 약간의 그림자를 추가하여 눈에 띄게 만드세요.

2. 닫기 버튼 스타일 지정:

알림의 오른쪽 상단에 배치하세요.
배경을 선택하고 글꼴 크기를 조정하세요.
클릭 가능해 보이고 배경에서 눈에 띄도록 만드세요.

💡 원하는 디자인을 얻기 위해 색상, 간격, 위치를 실험해 보세요!

직접 해보기

<html>
    <head>
        <title>Floating Notification</title>
        <link rel="stylesheet" href="styles.css">  
    </head>
    <body>
        <div class="notification">
        <button class="close-btn">&times;</button>
        <p>This is a floating notification! Click the "X" to close.</p>
    </div>
    </body>
</html>