<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8"/>
<title>CSS를 일렬로 나열하기</title>
<style type="text/css">
/* 기본 설정*/
a{text-decoration:none; color:#000000;}
a:hover{color:#ff0000;}
/* nav tag */
nav ul{padding-top:10px;} /* 상단 여백 10px */
nav ul li {
display:inline; /* 세로나열을 가로나열로 변경 */
border-left:1px solid #999; /* 각 메뉴의 왼쪽에 "|" 표시(분류 표시) */
font:bold 12px Dotum; /* 폰트 설정 - 12px의 돋움체 굵은 글씨로 표시 */
padding:0 10px; /* 각 메뉴 간격 */
}
nav ul li:first-child{border-left:none;} /* 메뉴 분류중 제일 왼쪽의 "|"는 삭제
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">MENU1</a></li>
<li><a href="#">MENU2</a></li>
<li><a href="#">MENU3</a></li>
<li><a href="#">MENU4</a></li>
<li><a href="#">MENU5</a></li>
</ul>
</nav>
</body>
</html>
'유용한정보' 카테고리의 다른 글
| JavaScript 최적화 (CompressorRater) (0) | 2015.02.20 |
|---|---|
| jquery 기본문법 (0) | 2015.02.16 |
| CSS border-image 속성 (0) | 2015.02.16 |
| 위, 아래 자동 스크롤 (0) | 2014.09.01 |
| 홈페이지에 무료음악 플레이어 설치하기 (0) | 2014.06.06 |
| 스마트폰 무료음악 감상 어플리케이션 (0) | 2014.06.06 |
| 랜덤배너소스 + 랜덤 아이프레임 소스 (0) | 2014.05.24 |
| 자동새로고침 (0) | 2014.05.24 |
댓글