html&css공부 유틸메뉴만들기

html&css공부

이번예제는 유틸메뉴를 만들어 보겠습니다. ^^

 

바디쪽 부터 시작해 볼께요.

<div id="wrap">

<div id="header">

<h1><a href="#">it개발자 스터디공간</a></h1>

<dl id="util_menu">

<dt class="hide">유틸메뉴</dd>

<dd><a href="#">홈</a></dd>

<dd><a href="#">로그인</a></dd>

<dd><a href="#">회원가입</a></dd>

<dd><a href="#">사이트맵</a></dd>

</dl>

</div>

</div>

 

CSS를 적용해보겠습니다.

 

 

<style type="text/css">

*{margin:0; padding:0;}

body{font:12px gulim,"굴림", sans-serif; color:#333;}

a{text-decoration:none; color:#333;}

.hide{position:absolute; left:-9999px; font-size:0; overflow:hidden;}

#wrap{width:770px; margin:0 auto;}

#header{height:100px; position:relative;}

#header h1{padding:30px 0 0 4px;}

#header dd{float:left; margin-left:30px; dispaly:inline;}

#util_menu{position:absolute; right:3px; top:8px;}

</style type>

 

 

 

 

연습을 계속 하다보면 실력이 up 될거에요 !!!

모두들 파이팅!!! ><

유틸메뉴 만들기 어렵지않아요~