플로팅 알림

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

챌린지

쉬움

이번 챌린지에서는 아래 이미지(또는 유사한 디자인)와 같은 floating notification을 재현합니다. 이번 과제는 요약 연습이므로, 그동안 배운 CSS positioning 지식을 활용하여 notification과 닫기 button의 위치를 올바르게 설정해 보세요.

아래 단계에 따라 floating notification 스타일을 지정하세요:

1. notification 상자 스타일 지정:

페이지 상단 근처, 대략 중앙 부분에 위치시킵니다.
고정 너비를 설정하고 내부 여백을 추가합니다.
배경, font, 테두리에 지목할 만한 색상을 사용하여 또렷한 알림 스타일을 만듭니다.
둥근 모서리와 약간의 그림자를 추가하여 두드러지게 만듭니다.

2. close button 스타일 지정:

position: absolute를 사용하여 close button을 notification 컨테이너의 우측 상단 모서리에 위치시킵니다.
배경색을 선택하고 font 크기를 조절합니다.
클릭할 수 있는 형태처럼 보이고 배경에서 잘 띄도록 만듭니다.

💡 색상, 여백, 위치 설정을 다양하게 시도하여 원하는 디자인을 만들어 보세요!

직접 해보기

<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>