• 코드:
​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
            list-style-type: none;
11
            margin: 0;
12
            padding: 0;
13
            overflow: hidden;
14
        }
15
        li { float: left; }
16
        li a {
17
            display: block;
18
            background-color: #FFDAB9;
19
            color: #000000;
20
            padding: 8px;
21
            text-decoration: none;
22
            text-align: center;
23
            font-weight: bold;
24
        }
25
        li a:hover {
26
            background-color: #CD853F;
27
            color: white;
28
        }
29
    </style>
30
</head>
31
​
32
<body>
33
​
34
    <h1>수평 내비게이션 바</h1>
35
    <ul>
36
        <li><a href="/index.php">Home</a></li>
37
        <li><a href="/html/intro">HTML</a></li>
38
        <li><a href="/css/intro">CSS</a></li>
39
        <li><a href="/bbs/login.php">로그인</a></li>
40
        <li><a href="/bbs/register_form.php">회원가입</a></li>
41
    </ul>
42
​
43
</body>
44
​
45
</html>