웹 페이지에서 사용자에게 중요한 정보를 전달할 때 메모(note) 또는 알림(alert) 박스를 활용하면 시각적으로 효과적인 UI를 만들 수 있습니다. CSS만으로도 위험(danger), 성공(success), 정보(info)처럼 용도에 맞는 다양한 스타일의 메모 박스를 손쉽게 구현할 수 있습니다.
핵심 원리는 간단합니다. 배경색(background-color)으로 메모의 분위기를 나타내고, 왼쪽 테두리(border-left)에 굵은 색상 막대를 추가해 메모의 성격을 한눈에 구분하는 것입니다.
아래는 세 가지 유형의 메모를 만드는 완전한 예제 코드입니다.
<!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;
}
div {
margin-bottom: 15px;
padding: 4px 12px;
font-size: 18px;
}
.danger {
background-color: #ffdddd;
border-left: 6px solid #f44336;
}
.success {
background-color: #ddffdd;
border-left: 6px solid #4CAF50;
}
.info {
background-color: #e7f3fe;
border-left: 6px solid #2196F3;
}
</style>
</head>
<body>
<h1 style="text-align: center;">메모 예제</h1>
<div class="danger">
<p><strong>위험!</strong> 이 작업은 컴퓨터에 손상을 줄 수 있습니다</p>
</div>
<div class="success">
<p><strong>성공!</strong> 작업이 성공적으로 완료되었습니다</p>
</div>
<div class="info">
<p><strong>정보!</strong> 이 작업을 수행하려면 더 많은 리소스가 필요합니다</p>
</div>
</body>
</html>
코드 핵심 포인트
- background-color : 메모의 종류에 따라 연한 붉은색(#ffdddd), 연한 초록색(#ddffdd), 연한 파란색(#e7f3fe) 배경을 적용해 분위기를 구분합니다.
- border-left : 왼쪽에 6px 두께의 진한 색상 막대(#f44336, #4CAF50, #2196F3)를 넣어 어떤 유형의 메모인지 즉시 알아볼 수 있게 합니다.
- padding과 margin : 내부 여백(padding)으로 텍스트와 배경 사이 간격을 확보하고, 아래쪽 마진(margin-bottom)으로 메모 박스 사이 간격을 유지합니다.
- font-size : 18px로 지정해 메모 내용이 잘 읽히도록 가독성을 높였습니다.
실행 결과
위 코드를 브라우저에서 실행하면 빨간색 계열의 '위험' 메모, 초록색 계열의 '성공' 메모, 파란색 계열의 '정보' 메모가 차례로 화면에 표시됩니다. 같은 방식으로 경고(warning), 팁(tip) 등 원하는 유형의 메모 박스를 자유롭게 추가할 수 있습니다.
