• 코드:
​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
            border: solid 1px black;
15
        }
16
        li { border-bottom: solid 1px black; }
17
        li:last-child { border-bottom: none; }
18
        li a {
19
            display: block;
20
            color: #000000;
21
            padding: 8px;
22
            text-align: center;
23
            text-decoration: none;
24
            font-weight: bold;
25
        }
26
        li a.current {
27
            background-color: #FF6347;
28
            color: white;
29
        }
30
        li a:hover:not(.current) {
31
            background-color: #CD853F;
32
            color: white;
33
        }
34
    </style>
35
</head>
36
​
37
<body>
38
​
39
    <h1>메뉴 간 경계선 표현</h1>
40
    <ul>
41
        <li><a href="/index.php">Home</a></li>
42
        <li><a class="current" href="/html/intro">HTML</a></li>
43
        <li><a href="/css/intro">CSS</a></li>
44
        <li><a href="/javascript/intro">자바스크립트</a></li>
45
    </ul>
46
​
47
</body>
48
​
49
</html>