스타일 시트 CSS 리스트 속성으로 ul 태그를 메뉴로 만드는 방법

 

환경: Eclipse Mars

 

ul 태그는 주로 목록을 만들 때 많이 사용합니다. 그런데 list-style 속성을 사용해서 메뉴를 만드는 것도 가능합니다. list-style 속성으로 메뉴처럼 가로로 배치한 후 마우스를 가져갔을 때 색상이 변경되도록 가상 클래스를 사용할 것입니다.

 

샘플 소스에서는 <ul> 태그의 글머리 기호를 없애기 위해 list-style: none 으로 설정하였습니다. 다음은 줄 바꿈을 없애기 위해 float: left 로 옆으로 정렬 되게 했습니다. float 속성은 div 태그같은 줄 바꿈이 자동으로 이루어 지는 요소들을 옆으로 배치시킬 때 많이 이용합니다.   

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>CSS</title>
<style type="text/css">
	body {
		margin: 30px 0px;
	}
	ul {
		list-style: none;
		font-style: italic;
		font-weight: bold;
	}
	ul li {
		float: left;
		margin: 0px 20px;
	} 
</style>
</head>
<body>
	<ul>
		<li>개요</li>
		<li>비전</li>
		<li>경영진소개</li>
	</ul>
</body>
</html>

스타일 시트 CSS 리스트 속성으로 ul 태그를 메뉴로 만드는 방법

 

이제 배열이 끝났으니 링크를 걸어야 합니다. 각 메뉴의 링크는 <a> 태그를 이용합니다. 그리고 메뉴처럼 마우스를 가져갔을 때 색깔의 변화와 text-decoration 속성을 이용해서 밑줄을 안보이게 처리합니다. 아래 그림처럼 정말 메뉴 같이 만들어 졌습니다

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>CSS</title>
<style type="text/css">
	body {
		margin: 30px 0px;
	}
	ul {
		list-style: none;
		font-style: italic;
		font-weight: bold;
	}
	ul li {
		float: left;
		margin: 0px 20px;
	} 
	ul a {text-decoration: none; color: black;}
	ul a:hover {color: red;}
</style>
</head>
<body>
	<ul>
		<li><a href="#">개요</a></li>
		<li><a href="#">비전</a></li>
		<li><a href="#">경영진소개</a></li>
	</ul>
</body>
</html>

스타일 시트 CSS 리스트 속성으로 ul 태그를 메뉴로 만드는 방법


저작자 표시 비영리 변경 금지
신고
Posted by 녹두장군