태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.


* 원래 웹사이트의 아이콘을 먼저 만드는 작업을 하려고 했는데, 디자이너의 작업이 늦어지면 이러한 아이콘 또한 늦게 나오기 마련이다. 따라서, 먼저 대략적인 구조를 받기 전에 요즘 웹페이지에 거의 들어갈만한 메뉴를 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로 메뉴 모양 만들어주기

: 그럼 이제는 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로만 구현이 가능하니 디자이너들도 쉽게 구현할 수 있는 내용이므로 실용적으로 사용할 수 있을 것이다.


* 아래 위의 버전을 조금 작게 수정한 메뉴이니 어떻게 동작하는지 실제로 참고하면 좋을 것이다.

 


- 다음 글

2014/01/22 - [밑바닥부터 홈페이지 만들기] HTML과 CSS로 드롭다운 메뉴 만들기

2014/01/27 - [밑바닥부터 홈페이지 만들기] 마우스 오버 이미지 배너 만들기(CSS, 자바스크립트 등)

2016/06/17 - [밑바닥부터 홈페이지 만들기] HTML과 CSS로 가로 드롭다운 메뉴 만들기

2016/06/?? - HTML과 자바스크립트로 드롭다운 메뉴 만들기

2016/07/?? - 간단한 반응형웹과 모바일용 웹 만들기


저작자 표시 비영리 동일 조건 변경 허락
신고

이 글을 공유하세요.

  • 이전 댓글 더보기
  • srendipity 2014.03.27 18:40 신고  댓글주소  수정/삭제  댓글쓰기

    좋은 강의 감사합니다.
    너무 잘 보고 잘 따라하고 있습니다!

    근데 따라하다보니 궁금한점이 있어서요.
    벌써부터 막히고 있어서.. 쿨럭..
    일단 이렇게 만들면 메뉴가 살짝 왼쪽에서 떨어져 있는데,
    바짝붙이기보단 보기가 좋은거 같아서 안에 내용물도 그대로 쓰려 했는데,
    내용물은 왼쪽으로 바짝 붙습니다.
    이런건 무조건 mergin같은걸 임의로 줘서 띄어야 하는 방법밖에 없나요?

    그리고 horizonal_split으로 화면을 나누신걸 보았습니다.
    근데 저 위에랑 같이 왼편으로 붙으면서 길이도 애매하고, 위아래로 글씨가 달라붙습니다.
    이런것도 내용물에 mergin같은걸 임의로 줘서 바꿔주는게제일 좋은 방법인지 알고싶습니다.
    감사합니다.

    • Unikys 2014.05.03 19:55 신고  댓글주소  수정/삭제

      네, margin을 사용하는 것이 일반적입니다. 그 외에 경우에 따라서 padding을 쓰기도 하는데, 혼용해서 쓰다보면 헷갈리니 우선 한가지 방법으로 정렬하는 것을 익히시면 좋을 것입니다. 옛날에는 position:absolute나 relative를 해서 left로 조정을 하곤 했는데, 특별한 경우가 아니면 그냥 margin으로 하는 것이 편합니다. 또 다른 방법으로는 &nbsp;를 원하는 만큼 띄워주는 방법이 있기는 한데, 글씨크기가 변하면 모양도 변할 수 있는 위험성이 있습니다.(오히려 좋은 경우도 있지만요.)

  • 2014.03.30 16:41  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  • 포털맨 2014.07.18 16:31 신고  댓글주소  수정/삭제  댓글쓰기

    srendipity 님 말씀처럼 margen을 적용하면 메뉴와 내용이 모두 같이 조절돼서 동일선상에 놓여지지가 않네요. 메뉴를 왼쪽으로 붙이고 동일선상에 놓으려고 CSS에
    #topMemu ul {
    float:left;
    alignment-adjust:middle;
    text-align:center;
    }
    추가도 해봤는데 도무지 맞춰지지가 않네요. 어떻게 해야 할까요...

    (..) 아하~ 그렇군요! 감사합니다. ^_______^

    • Unikys 2014.07.18 13:15 신고  댓글주소  수정/삭제

      네, li의 margin을 조절하면 모든 메뉴가 동시에 적용이 되기 때문에 가장 알기 위운 방법은 각 메뉴별로 별도의 id나 같은 margin을 가지는 메뉴들끼리 묶어서 같은 class를 준 뒤 각 id와 class별로 margin을 조절하면 됩니다. 만약 한 메뉴만 amrgin이 다르다 하면 해당 메뉴만 id 또는 class를 추가해서 설정하면 되고요. style이 적용되는 우선 순위가 id > class > tag 순이니 참고하세요.

  • 정희 2014.08.28 11:36 신고  댓글주소  수정/삭제  댓글쓰기

    아아아 이런 귀중한 정보를 이렇게 잘 정리해놓으셨군요
    득을 봤습니다 정말 감사합니다
    ㅠ_ㅠ 복받으실거에요

  • 왕초보마스타 2014.10.02 12:58 신고  댓글주소  수정/삭제  댓글쓰기

    저 메뉴 자체를 양쪽으로 1080px 로 늘리고 싶은데

    제가 1080으로 늘려 봤거든요?

    근데 안늘어 나져요.... 왜일까요?

  • 감사해용 2014.12.04 00:22 신고  댓글주소  수정/삭제  댓글쓰기

    많은 도움 되었슴돠ㅏㅏㅏㅏ

  • 김동민 2014.12.07 08:57 신고  댓글주소  수정/삭제  댓글쓰기

    설명해주신 코드를 입력해서 메뉴를 만들어 놨는데요 위에 올려주신 결과처럼 메뉴사이에 구분 선이 표시되지가 않는데요 따로 방법이 있나요?

    • Unikys 2015.01.02 13:13 신고  댓글주소  수정/삭제

      구분선은 메뉴 <li>들 사이사이에 <li>|</li>를 임의로 캐릭터로 넣어줘서 만들었습니다. 캐릭터로 되는 것을 원하지 않으신다면 CSS를 li에 적용 가능하게 border-left: 1px solid white; 등을 추가하시면 됩니다.

  • 2015.01.10 19:07  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  • 작은돌 2015.01.26 13:11 신고  댓글주소  수정/삭제  댓글쓰기

    정말감사합니다~! 차근차근 배울수 있을것같아요, 초보인데 알기쉽게 설명해주셔서 감사해요~!

  • Student 2015.03.25 11:43 신고  댓글주소  수정/삭제  댓글쓰기

    메뉴바를 전체적으로 중앙으로 맞추려고 하는데 어디에다가 손을 대야하나요?

  • 빵반죽 2015.04.12 17:24 신고  댓글주소  수정/삭제  댓글쓰기

    좋은글 정말 감사합니다. 초보에게 많은 도움이 되었습니다. (_ _)

  • 천주요한 2015.04.16 11:17 신고  댓글주소  수정/삭제  댓글쓰기

    현재 배우고 있는 학생인데 정말 정리 잘하신듯해요.. 도움 정말 많이됐습니다. 종종 찾아서 도움 받을께요~

    • Unikys 2016.05.01 03:40 신고  댓글주소  수정/삭제

      네, 재미있는 개발 되시길 바랍니다. 큰일이 어제 끝나서 이제 다시 블로그 시작하려고 하니 다시 찾아와주시면 좋겠네요.

  • 초보 2015.05.15 16:14 신고  댓글주소  수정/삭제  댓글쓰기

    감사합니다. 덕분에 잘 만들고 있습니다.

  • 감사합니당 ㅠㅠㅠ 2016.06.18 13:42 신고  댓글주소  수정/삭제  댓글쓰기

    잘배웠어요ㅠㅠㅠ학생인데 교수님보다 더 좋습니다... 사랑해요

    • Unikys 2016.06.19 01:42 신고  댓글주소  수정/삭제

      감사합니다. 즐거운 프로그래밍 공부 되시길 바랍니다. 원래 교수님들은 이러한 일반적인 프로그래밍보다 심화적인 것들을 더 잘하십니다 ㅎㅎ

  • 잘배우고갑니다 2016.07.27 11:04 신고  댓글주소  수정/삭제  댓글쓰기

    현재 메뉴에서 하위에 하위까지 3단 메뉴를 생성하고싶은데요 css에서 막혀버렸네요 ㅠㅠ

    • Unikys 2016.09.23 03:31 신고  댓글주소  수정/삭제

      그정도까지 내려가시면 단순히 CSS만으로 하기에는 벅찰수도 있습니다. 자바스크립트도 같이 섞어서 쓰시는게 소스 관리에도 편할 수 있습니다.

  • 아이리 2016.08.22 15:11 신고  댓글주소  수정/삭제  댓글쓰기

    좋은 정보 너무 감사합니다.

  • 미래 2016.09.02 17:46 신고  댓글주소  수정/삭제  댓글쓰기

    IE9에서 구현되는 방법 몰랐는데 너무 신기하고 알차네요 감사합니다 ㅎㅎ

  • izero 2016.12.17 21:10 신고  댓글주소  수정/삭제  댓글쓰기

    정말 도움이 많이 되는것 같습니다 앞으로도 좋은글 많이 올려주세요 :)

  • 꿀통맘 2016.12.25 16:45 신고  댓글주소  수정/삭제  댓글쓰기

    알기 쉽게 설명해 주셔서 쏙~쏙~ 이해가 되네요~ 감사합니다~^^

  • 답변부탁드립니다 제발 ㅜㅠㅠㅠ 2017.04.13 22:23 신고  댓글주소  수정/삭제  댓글쓰기

    먼저...소스 그대로 쓰면 잘됩니다 감사합니다
    제가 질문드릴껀 이게 처음부터 왼쪽이 form에서 살짝 띄워져있는데 그거 조절은 안될까요???

질문이나 의견을 댓글로 달아 주세요

티스토리 툴바