• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>CSS Navigation bar</title>
7
    <style>
8
        ul {
9
            background-color: #FFDAB9;
10
            width: 150px;
11
            list-style-type: none;
12
            margin: 0;
13
            padding: 0;
14
        }
15
        li a {
16
            display: block;
17
            color: #000000;
18
            padding: 8px;
19
            text-align: center;
20
            text-decoration: none;
21
            font-weight: bold;
22
        }
23
        li a.current {
24
            background-color: #FF6347;
25
            color: white;
26
        }
27
        li a:hover:not(.current) {
28
            background-color: #CD853F;
29
            color: white;
30
        }
31
    </style>
32
</head>
33
​
34
<body>
35
​
36
    <h1>현재 메뉴의 위치 표시</h1>
37
    <ul>
38
        <li><a href="/index.php">Home</a></li>
39
        <li><a class="current" href="/html/intro">HTML</a></li>
40
        <li><a href="/css/intro">CSS</a></li>
41
        <li><a href="/javascript/intro">자바스크립트</a></li>
42
    </ul>
43
​
44
</body>
45
​
46
</html>