반응형
|
스타일 시트 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>
▼ 이제 배열이 끝났으니 링크를 걸어야 합니다. 각 메뉴의 링크는 <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' 카테고리의 다른 글
| 스타일 시트 CSS 배경색, 이미지 지정하는 background 속성 알아보기 (0) | 2020.01.04 |
|---|---|
| 스타일시트 CSS 가운데 정렬하는 방법, text-align 과 margin 이용 (1) | 2020.01.03 |
| 스타일시트 CSS text-align 을 이용한 정렬 방법 (1) | 2019.12.29 |
| 스타일시트 CSS margin 을 주는 방법 (2) | 2019.11.23 |
| 스타일 시트 CSS 목록 표시 list-style-image 속성 이미지와 텍스트가 정렬 안될 때 (0) | 2019.04.08 |
| 스타일 시트 CSS 목록 표시를 위한 list-style 속성 다루는 방법 (0) | 2019.04.02 |
| 스타일 시트 CSS gradient 종류 중 linear-gradient 그라데이션 적용하는 방법 (0) | 2019.03.17 |
| 스타일 시트 CSS 대소문자 전환을 위한 text-transform 속성 사용하기 (0) | 2019.03.06 |
