CSS 메뉴 만들기
오늘은 그동안 배운 CSS만 이용해서 매우 간단한 메뉴를 만들어 보죠.
HTML 태그중에서 div와 a태그만 이용해서 만듭니다.
구조는 아래와 같습니다.
<html>
<head>
<style>
body{바디부분 스타일링(ex,바탕색,여백조정)}
div #menubar1 {메뉴바 스타일링(ex,테두리모양,색깔,여백조정)}
div #menubar1 > a{메뉴바 안의 각각의 메뉴버튼 스타일링(글씨체,색깔,모양등)}
div #menubar1 > a:hover{메뉴버튼 위에 마우스 올라왔을때 스타일링(색깔반전 등)}
</style>
</head>
<body>
<center> =>메뉴바 부분 중앙정렬
<div id="menubar1">
<a href="#">Home</a>
<a href="#">회사소개</a>
<a href="#">주요제품</a>
<a href="#">포트폴리오</a>
<a href="#">Contact</a>
</div>
</center>
</body>
</html>
특별한 내용은 없죠. 위의 코드중에서 그동안 배우지 않았던 것은 div #menubar1 > a {...} 바로 이부분의 ">"입니다.
위의 코드중에서 ">"의 의미는 div태그 중에서 id가 menubar1인 것을 찾은후 <div>와 </div>블럭 안에 있는 모든 a태그를 선택하라는 것입니다. (div가 부모이고 여러 자식중에서 a라는 자식만 골라서 일을 시키는 태그입니다.)
아래는 CSS로 스타일링한 예제 입니다.
<!doctype html>
<html>
<head>
<style>
body{background: #000; margin:0px;}
div#menubar1{padding: 24px;border:1px dashed #999;}
div#menubar1 > a{
font-family: Malgun Gothic,Gulim,Arial,Helvetica,sans-serif;
font-size: 17px;
background: #335;
padding: 12px 20px;
color: #999;
margin-right: 10px;
text-decoration: none;
border-radius:5px;
}
div#menubar1 > a:hover{
background: #6f8a00;
color: #fff;
}
</style>
</head>
<body>
<center>
<div id="menubar1">
<a href="#">Home</a>
<a href="#">회사소개</a>
<a href="#">주요제품</a>
<a href="#">포트폴리오</a>
<a href="#">Contact</a>
</div>
</center>
</body>
</html>
아래에서 jsfiddle의 오른쪽에 있는 Edit in Jsfiddle을 클릭하여 코드를 이것 저것 바꿔보세요.
즐거운 하루 되세요.
