html&css공부 <nav>만들기

행복한짱짱이 2015. 3. 19. 17:50

2015. 3. 19. 17:50

이번시간부터는 홈페이지를 만들어보려고합니다.

두근두근 ... ><

열심히 도전해보아요!!

이번엔 nav부터 만들어보겠습니다.

<html>

<head>

*{margin:0; padding:0;}

ul{list-style:none;}

h2{color:blue; margin:2px;}

#wrap{width:90%;}

#gnb nav ul{background:#111; margin-top:1em;}

#gnb nav ul li{font-style:bold; color:#eee; display:inline-block; padding-right:2em;}

</style>

</head>

<body>

<nav>

<h2>IT개발자스터디공간</h2>

<ul>

<li>ORACLE</li>

<li>Smart Phone</li>

</ul>

</nav>

</header>

</div>

</body>

</html>

결과입니다.

nav를 만들어 봤는데요.^^

생각보다 쉽죠??

display:inline-block; <-- 이부분을 잘알고 있어야해요!!

body쪽에는 <li><a href="#">ORACLE</a></li> 추가해서 링크를 걸수도 있어요 !!

그거는 다음글에서 연속해서 해보도록 하겠습니다. ^^

it개발자스터디공간