개발자노트/웹

Html 실습예제 메뉴 만들기 ( display, list-style-type, text-decoration )

hansummer 2022. 7. 22. 00:57 
<!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;