티스토리 뷰
[밑바닥부터 홈페이지 만들기] nav, ul, li 태그 HTML과 CSS로 가로형 메뉴 만들기
Unikys 2014. 1. 15. 09:30* 원래 웹사이트의 아이콘을 먼저 만드는 작업을 하려고 했는데, 디자이너의 작업이 늦어지면 이러한 아이콘 또한 늦게 나오기 마련이다. 따라서, 먼저 대략적인 구조를 받기 전에 요즘 웹페이지에 거의 들어갈만한 메뉴를 html과 css로 만들어보자. 화려한 애니메이션이나 이러한 옵션은 나중에 기획이 확정되면 넣기로 하고 일단 기본적인 틀만 만들어보자.
- 이전글
2013/11/01 - [밑바닥부터 홈페이지 만들기] 예고편
2013/11/01 - [밑바닥부터 홈페이지 만들기] HTML5 기본 템플릿, DOCTYPE 종류
2014/01/13 - [밑바닥부터 홈페이지 만들기] 최종 목표 예고 - toc21.com
* 작업하던 소스
: 지난번에는 기본적인 템플릿을 만들어서 기본 html 개발을 하기 전에 준비 단계였고, 이번에는 어느 홈페이지에나 들어가게 되는 메뉴를 한번 간단하게 만들어보도록 하겠다. 드랍다운 메뉴나 마우스오버와 같은 추가적인 기능은 디자이너와 기획자가 기능을 결정해서 오면 구현하기로 하고 일단 기본 틀을 만들어 놓자. 아래가 지난번까지 작업했던 html의 템플릿 소스이다.
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="utf-8"/>
<meta name="description" content="The Overflowing church website's main page" />
<meta name="author" content="unikys@gmail.com" />
<title>The Overflowing Church</title>
</head>
<body>
This site is under construction!
</body>
</html>
* <nav> 태그
: html5에서 <nav> 태그는 현재 웹 사이트에서 주요한 지점으로 이동할 수 있는 네비게이션(NAVigation) 역할을 담당하고 있는 태그이다. 예전에는 메뉴든 뭐든 전부다 div에 넣는 것이 일반적이었지만, 이제 div는 일반적으로 떠다니는 내용을 넣을 때의 역할을 하는 경우가 많아졌고, html5에서는 각 영역별로 그 의미를 나타내기 위하여 <nav> 태그와 같은 특정 태그를 사용하게 되었다. 일반적으로 웹사이트에서 주요한 네비게이션은 바로 '메뉴'일 것이다. 따라서 이러한 메뉴를 <nav> 태그로 만들어보도록 하자.
* <nav> 태그로 메뉴 만들 때의 html 템플릿
: 최근 <nav> 태그로 메뉴를 만들 때에는 기본적으로 <ul>과 <li> 태그를 이용하는 것이 일반적이다. 왜냐하면 목록은 순서가 중요하지 않은 목록이기 때문에 <ul> 태그를 사용하는 것이다. 그리고 각 목록의 항목들을 나타내는 <li> 태그의 안에는 메뉴 <a> 태그로 메뉴들의 링크를 만들어두는 것이 기본적인 템플릿이다. 아래와 같이 작성할 수 있다.
<nav>
<ul>
<li><a href="#">About us</a></li>
<li><a href="#">Ministries</a></li>
<li><a href="#">Community</a></li>
<li><a href="#">Locations</a></li>
<li><a href="#">Blog</a></li>
</ul>
</nav>
: 위처럼 작성하고나서 페이지를 확인해보자.
: 아주 볼품없한 모습이기는 하지만, 이러한 모습은 인터넷이 잘 안되는 상황에서 종종 봤을 것이다. 이 모양은 CSS를 적용하지 않았을 때 reader로 봤을때 나오게 되는 순수한 모습이다. HTML5와 CSS를 적용해서 홈페이지를 만들었을 때에는 'CSS가 없어도 홈페이지의 내용을 알고 이해할 수 있어야 한다'. 이것은 웹개발을 하게 될 때 이러한 마인드를 기본적으로 가지고 일단 틀을 만들어놓고 CSS를 적용하는 식으로 진행하면 된다. 처음에는 이러한 모양에서 CSS를 어떻게 입혀야할 지 애매하지만, 몇 번 하다보면 금방 익숙하게 처리가 가능해진다.
* CSS로 메뉴 모양 만들어주기
<nav id="topMenu" >
<ul>
<li><a class="menuLink" href="#">About us</a></li>
<li><a class="menuLink" href="#">Ministries</a></li>
<li><a class="menuLink" href="#">Community</a></li>
<li><a class="menuLink" href="#">Locations</a></li>
<li><a class="menuLink" href="#">Blog</a></li>
</ul>
</nav>
: <a>의 태그는 여러개에 같은 CSS를 적용하고자 하니 class 속성을 부여하고, <nav> 태그는 고유한 하나의 상단 메뉴가 될 것이므로 id를 부여하자. 그리고 하나씩 필요한 CSS를 맞춰나가자. 먼저 <li> 태그의 목록 표시를 없애주자. <head>태그에 <style> 시트를 추가해서 한번 적용시켜보자. 이러한 내용을 헤더에다가 추가하면 된다. id로 설정된 태그의 스타일을 지정할 때에는 #을 해당 아이디의 앞에 붙이면 되고 클래스는 .을 해당 아이디 앞에 붙이면 된다. 한번에 여러 아이디/클래스/태그명을 같이 붙일 수 있으며, 이러한 경우 상하 관계로 설정이 가능한 것이다. 각 css를 line-by-line으로 적용하면 효과를 표시해주려고 했는데 너무 길어질 것 같아서, 각 라인별로 어떠한 역할을 하는지 주석을 달아놨다.
<style>
#topMenu { // topMenu의 ID를 가진 태그의 스타일 지정
height: 30px; // topMenu의 높이를 30px로 설정(제대로 설정 안하면 아래 내용이 깨짐)
width: 850px; // topMenu의 넓이를 850px로 설정(제대로 설정 안하면 브라우져 넓이가 좁아지면 깨짐)
}
#topMenu ul li { // topMenu의 ID를 가진 태그 안에 <ul> 태그 안에 <li> 태그의 스타일을 지정
list-style: none; // <li> 태그는 위의 이미지처럼 목록을 나타내는 점을 없앤다
color: white; // 글씨 색을 흰색으로 설정
background-color: #2d2d2d; // 배경색을 진한 회색(RGB(2D,2D,2D)으로 설정
float: left; // <li>태그들이 왼쪽에 흐르게 설정(그러면 아래있는 내용은 오른쪽으로 옴)
line-height: 30px; // 글씨가 가운데로 오도록 설정하기 위해 한줄의 높이를 30px로 설정
vertical-align: middle; // 세로 정렬을 가운데로 설정(위의 line-height와 같이 설정 필요함)
text-align: center; // 글씨 정렬을 가운데로 설정
}
#topMenu .menuLink { // topMenu 아이디를 가진 태그 안에 있는 menuLink 클래스 태그들의 스타일 설정
text-decoration:none; // 링크(<a> 태그)가 가지는 기본 꾸밈 효과(밑줄 등)을 없앰
color: white; // 폰트색을 흰색으로 설정
display: block; // 링크를 글씨가 있는 부분 뿐만아니라 전체 영역을 클릭해도 링크가 걸리게 설정
width: 150px; // 메뉴링크의 넓이 설정
font-size: 12px; // 폰트 사이즈 12px로 설정
font-weight: bold; // 폰트를 굵게
font-family: "Trebuchet MS", Dotum, Arial; // 기본 폰트 적용, 시스템 폰트를 종류별로 순서대로
}
#topMenu .menuLink:hover { //topMenu 아이디를 가진 태그 안에 menuLink클래스를 가진 태그에 마우스가 over되면 스타일 설정
color: red; // 글씨 색을 붉은색으로 설정
background-color: #4d4d4d; // 배경색을 조금 더 밝은 회색으로 설정
}
</style>
* 구현 내용 확인
: 이렇게 구성을 하고 브라우져로 열어보면 다음과 같이 보이게 된다. (메뉴는 다소 바뀌었다. 생각해보니 이 블로그도 한번 재구성을 하고 싶었는데 이렇게 하는김에 미리 작업을 조금 해두는 것이다!)
: 그리고 마우스오버를 해보면 아래와 같이 hover로 설정한 글씨 색과 조금 더 밝은 바탕화면색으로 변경되는 것을 확인할 수 있다.
: 이렇게 구현을 해봤으면 '반드시' 여러 브라우져에서 띄워서 같이 확인을 하는 습관을 들이면 좋을 것이다. 아래는 크롬에서도 확인을 해본 것이다. 일반적으로 IE와 크롬이 두 가지를 체크하곤 하지만, 추가로 서버에 올려놓고 모바일 브라우져에서도 확인하면 좋을 것이다.
: IE에서 테스트할 때 중요한 것은 IE는 버전별로도 다르게 보이기 때문에 항상 버전별로도 테스트를 하면 좋다는 것이다. IE9 이후에서 메뉴의 도구>개발자툴(또는 F12 단축키)에서 이번에는 브라우져 모드를 IE8로 설정해서 테스트 해보자.
: 그러면 위에서 정상적으로 보이던 것이 아래와 같이 나오게 된다..! 이러한 현상들이 바로 여러 브라우져 버전에서 다 잘 나오는지 테스트를 해야하는 이유이다. 모든 사람들이 같은 브라우져를 쓰는 것이 아니므로 최대한 많은 사람들에게 정상적인 사이트를 보여주면 좋을 것이기 때문이다.
* IE9이하 HTML5 태그 지원 시키기
: <nav> 태그는 html5에서 새로 나온 태그로 기존의 IE(Internet Explorer) 버전들에서는 다른 브라우져들과 다르게 인식을 하게 된다. 가장 큰 문제는 바로 IE9 이전 버전에서는 "불명의 태그에 대하여 CSS 적용"이 정상적으로 안된다는 것이다. 따라서 브라우져의 호환성을 위하여 IE에서도 이러한 태그들을 인식할 수 있도록 해줘야한다. 그러한 역할을 하는 라이브러리는 html5shiv 또는 html5shim 이다.
https://code.google.com/p/html5shiv/
https://code.google.com/p/html5shim/
: 이 두가지 간의 차이는 오로지 v로 끝냐느냐, m으로 끝나느냐의 차이 뿐이라 어느것을 사용해도 상관이 없다. 여기 프로젝트 페이지에 써있듯이, <body> 태그보다 위에 반드시 넣어야하며, css와의 위치는 상관이 없으나 css를 먼저 가져오는 것이 퍼포먼스상 유리하다고 한다. 따라서, 아래의 태그를 <head> 안의 제일 아래에 배치해두면 된다.
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
: 위의 조건문에서 IE9버전 이하의 버전인 경우 HTML5의 태그들을 인식하지 못하여 CSS를 적용하지 못하므로 인식할 수 있는 작업을 미리 해두고 있는 것이다. 만약 IE9이상 버전이거나 다른 브라우져면 위의 소스는 주석으로 인식하고 무시하게 된다. 이 라이브러리 안에서 어떠한 일을 하는지까지는 너무 깊이 내려가는 것이므로 여기서는 다루지 않겠지만, 직접 파고 들어가보는 것도 재미있을 것이다.
* IE9이하 버전 수정한 것 확인
: 이제 IE9버전 이하에서도 잘 보이는지 확인해보자.
: 이제 IE8에서도 제대로 보여준다! 상단의 가로형 메뉴는 이렇게 아주 간단하게 HTML 몇 줄과 CSS를 통해서 만들 수 있게 되었다.
* 참고: IE의 상휘버전들에서는 하위 버전의 브라우져가 어떻게 홈페이지를 보여주는지 테스트할 수 있도록 되어있는데, 이 기능은 개발할 때 주로 사용하고, 나중에 상용에 올리게 되면 직접 그 버전의 브라우져에서 테스트를 하는 것이 홈페이지의 모양과 동작을 보장할 수 있는 방법이다.
* 메뉴 마무리
: 이제 각 a태그의 href에 메뉴별로 링크 시키고 싶은 페이지를 링크 시키면 된다. 첨부파일로 위의 구현 내용을 첨부하니 파일 내용을 참고하면 될 것이다.
css_menu[unikys_tistory].html
<nav id="topMenu" > <ul> <li><a class="menuLink" href="http://unikys.tistory.com/category/Programming%20Lecture/%EB%B0%91%EB%B0%94%EB%8B%A5%EB%B6%80%ED%84%B0%20%ED%99%88%ED%8E%98%EC%9D%B4%EC%A7%80%20%EB%A7%8C%EB%93%A4%EA%B8%B0">LECTURES</a></li> <li>|</li> <li><a class="menuLink" href="http://unikys.tistory.com/guestbook">GUEST BOOK</a></li> <li>|</li> <li><a class="menuLink" href="http://unikys.tistory.com/tag">TAG CLOUD</a></li> <li>|</li> <li><a class="menuLink" href="http://unikys.tistory.com/media">MEDIA LOG</a></li> <li>|</li> <li><a class="menuLink" href="http://unikys.tistory.com/location">LOCATION LOG</a></li> </ul> </nav>
* 정리 및 trouble shooting
- 만약 li들이 나열되다가 아래로 내려온다면 부모 태그(nav)의 width와 height를 적절하게 설정한다.
- 만약 하단의 내용들이 상단 메뉴 옆으로 올라온다면 nav의 height를 설정한다.
- 메뉴의 폰트가 세로 정렬이 안되면 vertical-align:middle과 line-height를 적당한 높이로 설정한다.
- 만약 IE 낮은 버전에서 스타일이 깨진다면 html5shim을 추가한다.
- 모든 IE 버전에서 스타일이 깨진다면 DOCTYPE을 제대로 선언한다.
- 마우스오버가 동작 안한다면 .menuLink:hover 이렇게 붙여서 선언한다.
- CSS와 HTML만으로 마우스오버 가로형 메뉴를 아주 쉽게 만들 수 있다!
- 디자이너는 정확한 픽셀 값(각 메뉴 칸별로 가로/세로 그리드 등)과 각 폰트/배경의 RGB 값을 주는 것이 중요하다.
* 다음에는 드랍다운 메뉴를 한번 구현해보도록 하겠다. 이것도 오로지 CSS와 HTML로만 구현이 가능하니 디자이너들도 쉽게 구현할 수 있는 내용이므로 실용적으로 사용할 수 있을 것이다.
* 아래 위의 버전을 조금 작게 수정한 메뉴이니 어떻게 동작하는지 실제로 참고하면 좋을 것이다.
- LECTURES
- |
- GUEST BOOK
- |
- TAG CLOUD
- |
- MEDIA LOG
- |
- LOCATION LOG
- 다음 글
2014/01/22 - [밑바닥부터 홈페이지 만들기] HTML과 CSS로 드롭다운 메뉴 만들기
2014/01/27 - [밑바닥부터 홈페이지 만들기] 마우스 오버 이미지 배너 만들기(CSS, 자바스크립트 등)
2016/06/17 - [밑바닥부터 홈페이지 만들기] HTML과 CSS로 가로 드롭다운 메뉴 만들기
2016/06/?? - HTML과 자바스크립트로 드롭다운 메뉴 만들기
2016/07/?? - 간단한 반응형웹과 모바일용 웹 만들기
- Total
- Today
- Yesterday
- java
- Javascript
- 사진
- HTML5
- HTML5 튜토리얼
- 뽐뿌
- 자바스크립트
- Python
- 안드로이드
- gae
- K100D
- lecture
- ny-school
- Android
- 속깊은 자바스크립트 강좌
- 강좌
- mini project
- google app engine
- 서울
- Writing
- php
- 샷
- gre
- 삼식이
- 안드로이드 앱 개발 기초
- TIP
- 팁
- GX-10
- 탐론 17-50
- c++
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | |||||
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 | 21 | 22 | 23 |
| 24 | 25 | 26 | 27 | 28 | 29 | 30 |