HTML <kbd> 태그

<p>
    저장하려면 <kbd>Ctrl</kbd> + <kbd>S</kbd>를 누르세요.
</p>

<p>
    프로그램을 종료하려면 <kbd>Alt</kbd> + <kbd>F4</kbd>를 누르세요.
</p>

<!-- 1. 단축키 가이드 -->
<article class="shortcut-guide">
    <h2>VS Code 단축키 모음</h2>
    <ul>
        <li>파일 저장: <kbd>Ctrl</kbd> + <kbd>S</kbd></li>
        <li>전체 선택: <kbd>Ctrl</kbd> + <kbd>A</kbd></li>
        <li>복사: <kbd>Ctrl</kbd> + <kbd>C</kbd></li>
        <li>붙여넣기: <kbd>Ctrl</kbd> + <kbd>V</kbd></li>
    </ul>
</article>

<!-- 2. 게임 컨트롤 가이드 -->
<article class="game-controls">
    <h2>게임 조작법</h2>
    <p>
        이동: <kbd>W</kbd> <kbd>A</kbd> <kbd>S</kbd> <kbd>D</kbd><br>
        점프: <kbd>Space</kbd><br>
        달리기: <kbd>Shift</kbd>
    </p>
</article>

<!-- 3. 스타일링 예제 -->
<style>
.kbd-custom {
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.2);
    color: #333;
    display: inline-block;
    font-size: 0.85em;
    font-weight: 700;
    line-height: 1;
    padding: 2px 4px;
    white-space: nowrap;
}

.shortcut-guide kbd {
    background-color: #e3f2fd;
    border: 1px solid #2196f3;
    color: #1976d2;
}

.game-controls kbd {
    background-color: #fce4ec;
    border: 1px solid #e91e63;
    color: #c2185b;
}
</style>

<p>
    <kbd class="kbd-custom">Enter</kbd>를 눌러 확인하세요.
</p>