[CSS] - after, hover, list-child 등을 이용한 간단한 테스트
○ 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>
|
'CSS' 카테고리의 다른 글
| [CSS] - owlcarousel 이용한 다중 캐러셀에서 a href 안될 때 해결법 (0) | 2018.09.29 |
|---|---|
| [CSS] - bxslider 이용한 캐러셀, owlcarousel 이용한 다중 캐러셀 (0) | 2018.09.28 |
| [CSS] - <input type=" ">에 효과 주기, 둥근 테두리 만들기 (0) | 2018.09.18 |
| [CSS] - position : static, relative, absolute, fixed (0) | 2018.09.13 |
| [CSS] - display : block, inline 그리고 메뉴 만들기 (0) | 2018.09.13 |