<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>메뉴 만들기</title>
<style type="text/css">
li {
list-style-type: none; /* li의 점들을 제거 */
}
.gnb li {
display: inline; /* 블록요소인 li를 인라인요소처럼 보여줘라 */
}
.gnb li a { /* li는 블록요소지만 a태그는 인라인 요소기 때문에 width가 먹지 않기 때문에*/
display: inline-block; /* 인라인 요소지만 block(공간)을 가질 수 있도록 */
background: lightpink;
text-decoration: none; /* li의 텍스트 밑줄 제거*/
width: 100px;
text-align: center;
}
.gnb li a:hover {
background: lightblue;
text-decoration: underline; /* li의 텍스트 밑줄 제거*/
}
</style>
</head>
<body>
<!-- gnb = 글로벌 네비게이션바 == 메뉴 -->
<ul class="gnb">
<li><a href="#">메일</a></li>
<li><a href="#">블로그</a></li>
<li><a href="#">카페</a></li>
<li><a href="#">웹툰</a></li>
</ul>
</body>
</html>
글로벌 네비게이션바 == 메뉴 == gnb
인라인요소(li)에 block(공간)을 가질 수 있게 하는법 == display: inline-block;
li의 텍스트 밑줄 제거 == text-decoration;
li의 점들을 제거 == list-style-type: none;
'개발자노트 > 웹' 카테고리의 다른 글
| 웹 크롤링 - Jsoup을 이용한 ( CGV ) 크롤링 (0) | 2022.07.22 |
|---|---|
| Html - 긴 문장 스크롤 처리 하기 ( overflow-x, y ) (회원가입 약관동의) (0) | 2022.07.22 |
| Html 스타일시트(stylesheet) 실습예제 (0) | 2022.07.22 |
| Html에서 가상요소 선택자 (before / after) (스타일시트) (0) | 2022.07.22 |
| Html에서 가상 클래스 선택자 (호버링) (0) | 2022.07.22 |
