CSS 기초강좌 14 (CSS로 Menu 만들기)


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>


결과보기
저는 body의 바탕색을 그냥 흰색으로 했습니다.


아래에서 jsfiddle의 오른쪽에 있는 Edit in Jsfiddle을 클릭하여 코드를 이것 저것 바꿔보세요.


즐거운 하루 되세요.


디자인/CSS 강좌 다른 글

댓글 1

*

*