티스토리 뷰

나는 오늘도 공부한다/HTML&CSS

HTML & CSS 메뉴만들기

realMarketing 2014. 9. 12. 18:42

오늘 소개할 것은 HTML & CSS를 활용한 메뉴 만들기 이다. 앞서 언급한 바가 있는 리스트 태크를 활용할 예정이다. 나또한 이제 막 HTML과 CSS를 공부하기 시작하였고, 내가 공부한 것을 많은 이들과 공유하기 위하여 글을 게재하는 것이니 혹시 잘못된 부분이 있으면 바로 알려주면 수정하겠습니다.

기본적으로 HTML은 정적인 페이지를 구현하고 이에 CSS를 활용하여 스타일 효과를 준다. 그래서 일반적으로 HTML을 이용하여 기본 틀을 잡고 CSS를 활용하여 꾸며주게 된다.

이번 시간에 해볼 메뉴는 세로가 아닌 가로로 출력되는 메뉴이다. 세로로 출련되는 메뉴의 경우는 리스트 태그를 활용하고, 이를 CSS로 꾸며주기만 하면 되기때문에 간단하다. 가로로 출력되는 메뉴의 경우는 리스트 태그를 살짝 변형 시켜주게 된다.

HTML의 기본 구조를 입력하여 주고, 리스트 태그와 하이퍼링크 태그를 활용하여 원하는 메뉴를 만들어 준다. 저의 경우는 구글, 네이버, 다음, 티스토리 사이트로 이동하는 메뉴를 만들었습니다.

<!DOCTYPE HTML >

<html>

<head>

<title>MenuTest</title> 

</head>

</head>

<body>

<ul>

<li><a href = "http://www.google.co.kr">Google</a></li>

<li><a href = "http://www.naver.com">Naver</a></li>

<li><a href = "http://www.daum.net">Daum</a></li>

<li><a href = "http://www.tistory.com">Tistory</a></li>

</ul>

</body>

</html>

기본적인 틀은 완성이 되었습니다. 이제 CSS를 활용하여 스타일을 입혀주는 일이 남았습니다.

CSS코드는 다음과 같습니다. CSS코드를 <head>와</head>사이에 추가하여 주시면 됩니다.

<style>

ul{width:650px;height:30px;background:black;opacity:0.5;list-style:none;padding-top:15px;}

li{float:left; margin-right:50px }

a{font-size:12px;color:white;font-weight:bold;text-decoration:none}

</style> 

코드를 살펴보자면, ul태그에 가로:650px, 세로:30px, 배경색 : 검은색, 투명도 : 50%(투명도는 0~1사이의 값을 입력하여한다), 리스트 스트일 : 없음, 패딩-탑:15px를 적용하여 주었다.

또한 li태그에 CSS효과 float:left를 주어 세로로 출력되는 메뉴를 가로로 출력되게 끔하였고, margin-right를 사용하여 각 태그간의 간격을 50px주었다.

마지막으로 a태그에 CSS효과를 주어 폰트 사이즈는 12px, 글자 색은 하얀색, 그리고 하이퍼링크 밑에 파란줄을 없애 주었다.

다음과 같은 메뉴바가 완성되게 된다.

완성작은 첨부파일로 첨부하였다.(연결프로그램을 메모장으로 틀면 코드를 볼 수 있고, 인터넷으로 틀면 사이트를 볼 수 있다.) 

MenuTest.html

기타 궁금한 점이 있으면 댓글을 달아주시면 답변드리겠습니다.


저작자표시

'나는 오늘도 공부한다 > HTML&CSS' 카테고리의 다른 글

즐겨찾기/주소창 아이콘 적용하기(파비콘 적용하기)  (0) 2016.04.20
HTML 이미지 띄우기  (0) 2014.09.13
HTML 리스트 만들기 & 하이퍼링크  (0) 2014.06.22
HTML(H태그)+스타일태그  (0) 2014.06.22
HTML의 기본구조  (0) 2014.06.22
공유하기 링크
댓글