CSS로 경고 메시지 만드는 방법 – 닫기 버튼까지 한 번에

웹 페이지에서 사용자에게 중요한 정보를 전달할 때 경고(알림) 메시지는 매우 유용한 UI 요소입니다. CSS만으로도 별도의 라이브러리 없이 깔끔하고 직관적인 경고 메시지를 만들 수 있습니다. 이번 글에서는 빨간색 배경의 경고 박스와 마우스를 올리면 색이 변하는 닫기(X) 버튼까지 포함된 예제를 살펴보겠습니다.

전체 예제 코드

아래 코드는 CSS와 약간의 인라인 자바스크립트를 활용해 경고 메시지를 구현한 예제입니다.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
   body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   }
   .alertMessage {
      padding: 20px;
      background-color: #f44336;
      color: white;
      font-size: 20px;
   }
   .close {
      margin-left: 15px;
      color: white;
      font-weight: bold;
      float: right;
      font-size: 22px;
      line-height: 20px;
      cursor: pointer;
      transition: 0.3s;
   }
   .close:hover {
      color: black;
   }
</style>
</head>
<body>
<h1>경고 메시지 예제</h1>
<div class="alertMessage">
<span class="close" onclick="this.parentElement.style.display='none';">&times;</span>
<strong>이 작업은 되돌릴 수 없습니다!</strong> 계정이 삭제됩니다.
</div>
</body>
</html>

실행 결과

위 코드를 브라우저에서 실행하면 다음과 같은 화면이 출력됩니다.

CSS로 경고 메시지 만드는 방법 – 닫기 버튼까지 한 번에

핵심 코드 설명

1. .alertMessage – 경고 박스 스타일

background-color: #f44336; : 주의를 끌 수 있는 붉은색 배경을 지정합니다.
padding: 20px; : 내용과 테두리 사이에 여백을 주어 가독성을 높입니다.
color: white; : 붉은 배경 위에서 흰색 글자가 잘 보이도록 설정합니다.

2. .close – 닫기 버튼 스타일

float: right; : X 버튼을 경고 박스 오른쪽 끝으로 배치합니다.
cursor: pointer; : 마우스를 올렸을 때 클릭 가능한 요소임을 나타냅니다.
transition: 0.3s; : 색상 변화가 부드럽게 일어나도록 전환 효과를 추가합니다.

3. .close:hover – 마우스 오버 효과

사용자가 X 버튼에 마우스를 올리면 글자색이 검정(black)으로 바뀌어 시각적인 피드백을 제공합니다.

4. onclick – 메시지 닫기 기능

X 버튼을 클릭하면 this.parentElement.style.display='none'; 코드가 실행되어 경고 메시지가 포함된 부모 요소(div)가 화면에서 사라집니다.

마무리

이처럼 CSS의 몇 가지 기본 속성만으로도 실용적인 경고 메시지를 쉽게 만들 수 있습니다. 배경색을 #ff9800(주황), #4caf50(초록), #2196f3(파랑) 등으로 변경하면 성공, 정보, 주의 등 다양한 유형의 알림 메시지로 확장할 수 있으니 여러분의 프로젝트에 맞게 응용해 보세요.