콜아웃(Callout) 메시지는 웹 페이지 방문자의 시선을 끌기 위해 화면 한쪽에 띄우는 알림 창입니다. 주로 프로모션 안내, 이벤트 홍보, 중요 공지 등을 전달할 때 활용됩니다. 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}
.callout {
position: fixed;
bottom: 35px;
right: 20px;
margin-left: 20px;
max-width: 300px;
}
.calloutHeading {
padding: 25px 15px;
background: rgb(68, 93, 235);
font-size: 30px;
color: white;
}
.calloutMessage {
padding: 15px;
background-color: #ccc;
color: black
}
.close {
position: absolute;
top: 5px;
right: 15px;
color: white;
font-size: 30px;
cursor: pointer;
}
.close:hover {
color: lightgrey;
}
</style>
</head>
<body>
<h1>콜아웃 메시지 예제</h1>
<h3>상품 2</h3>
<h3>상품 3</h3>
<h3>상품 4</h3>
<div class="callout">
<div class="calloutHeading">특별 혜택 확인하기</div>
<span class="close" onclick="this.parentElement.style.display='none';">×</span>
<div class="calloutMessage">
<p>페이지를 떠나기 전에 다른 특가 상품도 놓치지 마세요! <a href="#">지금 확인하기</a></p>
</div>
</div>
</body>
</html>실행 결과
위 코드를 실행하면 화면 오른쪽 하단에 파란색 제목 영역과 회색 본문 영역으로 구성된 콜아웃 박스가 표시됩니다.
핵심 포인트 살펴보기
1. 화면에 고정 배치
position: fixed 속성과 bottom, right 값을 조합하면 스크롤과 관계없이 항상 화면 우측 하단에 콜아웃이 고정됩니다.
2. 닫기 기능 구현
닫기 버튼(×)에는 onclick="this.parentElement.style.display='none';" 인라인 자바스크립트가 적용되어 있습니다. 클릭하면 부모 요소인 .callout 전체가 화면에서 사라집니다.
3. 마우스 오버 효과
.close:hover 선택자를 사용해 닫기 버튼에 마우스를 올리면 색상이 연회색으로 바뀌어, 클릭 가능한 요소임을 직관적으로 알려줍니다.
4. 반응형 대응
max-width: 300px로 최대 너비를 제한하고, 뷰포트 메타 태그를 함께 설정하면 모바일 환경에서도 콜아웃이 자연스럽게 표시됩니다.
이처럼 CSS의 위치 지정 속성과 간단한 자바스크립트 한 줄만 활용하면, 별도의 라이브러리 없이도 실용적인 콜아웃 메시지를 손쉽게 만들 수 있습니다.