link 스타일

imjingu·2023년 7월 4일

개발공부

목록 보기

32/481

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>link 스타일</title>
<style>
    .container {
        width: 960px;
        margin : 0 auto;
    }
    .navi{
        width:960px;
        height:60px;
        padding-bottom:10px;
        border-bottom:2px solid #ccc;
        text-align : center;
    }

    .navi ul{
        list-style: none;
        padding-top:10px;
        padding-bottom:5px;
    }
    .navi ul li {
        display:inline-block;
        width:150px;
        height:40px;
        padding:0px;
        text-align: center;
    }

    .navi ul li a {
        display:block;
        width:150px;
        height:40px;
        line-height: 40px;
        color: white;
        text-decoration: none;
    }

    li:nth-child(2n) { /* li 태그 중에서 짝수 번째에 해당하는 li 태그들의 배경 색상과 글자 색상을 지정 */
            background-color: gray;
        }

    li:nth-child(2n+1) { /* li 태그 중에서 홀수 번째에 해당하는 li 태그들의 배경 색상과 글자 색상을 지정 */
        background-color: black;   
    }    

    li:hover {
            /* li 태그에 마우스를 올렸을 때 배경 색상을 변경 */
            background-color: pink;
        }

    li:active { /* li 태그를 클릭했을 때 배경색 변경 */
        background-color: red;
    }
    
</style>
</head>

<body>
    <div class="container">
        <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>

imjingu

이전 포스트

가상 요소 선택자

다음 포스트

link 스타일

개발공부

가상 요소 선택자

overflow 속성

0개의 댓글