[CSS] ch01-10. pseudo

10_pseudo.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>요안도라</title>
<style>
    @import "../css/10_pseudo.css";
</style>
</head>

<body>
    <div class="container">
        <header> </header>
        <nav class="navi">
            <ul>
                <li><a href="#">이용 안내</a></li>
                <li><a href="#">객실 소개</a></li>
                <li><a href="#">예약 방법 및 요금</a></li>
                <li><a href="#">예약하기</a></li>
            </ul>
        </nav>
    </div>
</body>
</html>

 

10_pseudo.css

@CHARSET "UTF-8";/*should select*/

.container {
    width: 960px;
    margin: 0 auto;
    background-color: #fff;
    border: 1px solid #E7E7E7;
}
header {
    height: 280px;
    margin-top: 0;
    background-image: url(../img/10_bg.png); /*이미지 URL*/
    background-repeat: no-repeat; /*이미지 사이즈 조정*/
    background-position: left top; /*왼쪽삳단에 백그라운드를 위치 시키겠다.*/
}
.navi {
    background: #003E00; /*(==)background-color: */
    margin-top: -15px;
    width: 960px;
    height: 60px;
}
.navi ul {
    list-style: none;
    height: 40px;
    padding-top: 10px; /*안쪽에서 위쪽 여백*/
    padding-bottom: 5px; /*안쪽에서 아래쪽 여백*/
}
.navi ul li {
    display: inline; /*가로메뉴 구현*/
    float: left; /*가로메뉴 구현*/
    font-size: 15px;
}
.navi a, .navi a:visited { /* a 객체 중에 방문할때*/
    padding: 10px 5px 5px 35px; /*블럭 여백*/ /*12시부터 시계방향 북동남서*/
    display: block;
    color: #fff; /*글자색 흰색*/
    width: 150px; /*너비 150px*/
     text-decoration: none; /*밑줄 없음*/
}
.navi a:hover, .navi a:focus{ /*hover: 마우스를 올린상태 focus:메뉴를 선택했을때*/
    text-shadow: 0px 2px 2px #000; /*글자에 검은색 그림자//x축,y축,퍼지는정도,색깔*/
    color: #FC0; /*글자가 노랑 계열로*/
}
.navi a:active{/*마우스를 누른상태*/
    color: red; /* 글자색이 빨강으로*/
}