반응형
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 접두어 webkit, moz, ms, o 의미 (2) | 2024.12.03 |
|---|---|
| HTML img 태그 CSS vertical-align 속성으로 이미지 수직 정렬 (0) | 2024.04.16 |
| 스타일 시트 CSS 브라우저 내 위치를 지정하는 left, right, top, bottom 속성 (0) | 2024.02.18 |
| 스타일 시트 CSS vertical-align 속성, inline 요소끼리 수직 정렬 옵션 (0) | 2023.12.01 |
| 스타일 시트 CSS 가상 선택자 after 사용하는 방법 (0) | 2023.03.18 |
| 스타일 시트 CSS 여러 태그에 스타일을 동시 적용하거나 특정 태그에 적용하는 방법 (1) | 2020.01.18 |
| 스타일 시트 CSS width 와 height 속성 사용법 (0) | 2020.01.17 |
| 스타일시트 CSS 마우스오브(Mouseover) 이미지 테두리 적용 (0) | 2020.01.16 |
