좌측 강조선 카드 Accent border card (Callout)
왼쪽에 굵은 색 선이 있는 상자. 본문 속 팁·주의·참고를 강조
다른 이름: 콜아웃, 강조 박스, 팁 박스, Admonition, Callout
HTML 코드
<div class="callout tip"><b>💡 팁</b><p>단축키 / 를 누르면 바로 검색할 수 있어요.</p></div>
<div class="callout warn"><b>⚠️ 주의</b><p>토큰은 다른 사람과 공유하지 마세요.</p></div>
<style>
.callout{border-left:4px solid var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--bg));border-radius:6px;padding:10px 14px;margin-bottom:10px}
.callout.warn{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 10%,var(--bg))}
.callout p{margin:4px 0 0;color:var(--fg)}
</style>AI에게 이렇게 요청하세요
본문 중간 팁 문단에 왼쪽 4px 파란 세로선·옅은 파란 배경·💡 아이콘과 굵은 제목이 붙은 콜아웃 박스 넣어줘
<div class="callout tip"><b>💡 팁</b><p>단축키 / 를 누르면 바로 검색할 수 있어요.</p></div>
<div class="callout warn"><b>⚠️ 주의</b><p>토큰은 다른 사람과 공유하지 마세요.</p></div>
<style>
.callout{border-left:4px solid var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--bg));border-radius:6px;padding:10px 14px;margin-bottom:10px}
.callout.warn{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 10%,var(--bg))}
.callout p{margin:4px 0 0;color:var(--fg)}
</style>언제 쓰나
문서·블로그 본문에서 놓치면 안 되는 팁·주의사항을 눈에 띄게 할 때.
비슷한 것과 차이
- 알림 배너: 페이지 상단에 시스템 상태(점검·오류)를 알림. 콜아웃은 본문 내용의 일부
- 카드: 독립된 콘텐츠 단위, 클릭해서 이동하는 경우가 많음