CSS

[CSS] - after, hover, list-child 등을 이용한 간단한 테스트

Riucc 2018. 9. 15. 14:46

○ after, hover, list-child 등을 이용한 간단한 테스트

 

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>


    <style>

        ul, li { /* ul, li 에 원래 적용되어있는 효과 없애기 */

            margin: 0; padding: 0;

        }

        /* id는 #으로 접근, class는 .으로 접근 */

        #topmenu li {  /* display를 바꿔 옆으로 글자만큼 차지 */

            display: inline-block;

        }


        #topmenu li a:after { /* li의 a링크 뒤(after)에 글자 | 포함하고 마진 주기 */

            content: '|';

            margin-left: 5px;

        }


        #topmenu li:last-child a:after { /* 마지막만 글자 없애기 */

            content: none;

            margin-left: 5px

        }


        #topmenu li a:hover { /* a링크에 hover 사용해서 선택 시 글자색과 배경색 변경 */

            background-color: #26a69a;

            color: #eafaf9;

        }


        #menu { /* list-style을 none 효과 주어 들여쓰기 및 동그라미 없애기 */

            list-style-type: none;

        }


        #bottommove { /* list-style을 none 효과 주어 들여쓰기 및 동그라미 없애기 */

            list-style: none;

            display: inline;

        }


        #bottommove li a {

            float: left;

            padding: 4px;

            margin-right: 3px;

            width: 15px;

            color: #000;

            font: bold 12px;

            text-align: center;

            text-decoration: none;

        }


        #bottommove li a:hover { /* a링크에 hover 사용해서 선택 시 글자색과 배경색 변경 */

            color: #fff;

            border: 1px solid #f40;

            background-color: #f40;

        }

    </style>

</head>


<body>

    <div id='top'>

        <ul id='topmenu'>

            <li><a href="#">로그인</a></li>

            <li><a href="#">회원가입</a></li>

            <li><a href="#">공지사항</a></li>

        </ul>

    </div>

    <ul id='menu'>

        <li class='item'>HTML</li>

        <li class='item'>CSS</li>

        <li class='item'>Javascript</li>

    </ul>


    <ul id='bottommove'>

        <li><a href="#">1</a></li>

        <li><a href="#">2</a></li>

        <li><a href="#">3</a></li>

        <li><a href="#">4</a></li>

        <li><a href="#">5</a></li>

        <li><a href="#">6</a></li>

        <li><a href="#">7</a></li>

        <li><a href="#">8</a></li>

        <li><a href="#">9</a></li>

        <li><a href="#">10</a></li>

    </ul>

</body>

</html>



   


저작자표시