HTML 코드
<div class="app">
<aside class="side">
<b>MyApp</b>
<a class="on">대시보드</a><a>프로젝트</a><a>메시지</a><a>설정</a>
</aside>
<main>본문 영역</main>
</div>
<style>
body{padding:0}
.app{display:flex;height:100vh}
.side{width:180px;padding:16px 10px;border-right:1px solid var(--border);background:var(--surface);display:flex;flex-direction:column;gap:4px}
.side b{padding:4px 10px 12px}
.side a{padding:8px 10px;border-radius:8px;color:var(--muted)}
.side a.on{background:var(--bg);color:var(--fg);font-weight:600}
main{flex:1;padding:20px;color:var(--muted)}
</style>AI에게 이렇게 요청하세요
관리자 화면 왼쪽에 폭 240px로 고정하고 아이콘+텍스트 메뉴 5개 중 현재 페이지를 배경색으로 강조하는 사이드바 만들어줘
<div class="app">
<aside class="side">
<b>MyApp</b>
<a class="on">대시보드</a><a>프로젝트</a><a>메시지</a><a>설정</a>
</aside>
<main>본문 영역</main>
</div>
<style>
body{padding:0}
.app{display:flex;height:100vh}
.side{width:180px;padding:16px 10px;border-right:1px solid var(--border);background:var(--surface);display:flex;flex-direction:column;gap:4px}
.side b{padding:4px 10px 12px}
.side a{padding:8px 10px;border-radius:8px;color:var(--muted)}
.side a.on{background:var(--bg);color:var(--fg);font-weight:600}
main{flex:1;padding:20px;color:var(--muted)}
</style>언제 쓰나
메뉴가 많은 관리 화면·대시보드·문서 사이트. 항상 보여서 페이지를 자주 옮겨 다닐 때 편합니다.
비슷한 것과 차이
- 드로어: 평소엔 숨어 있다가 버튼을 눌러야 밀려 나옴
- 헤더·내비바: 메뉴가 위쪽에 가로로 놓임 → 메뉴 수가 적을 때