css로 반응형 웹사이트(화면 축소시 메뉴 사라지고 아이콘 등장)

 

 

css로 반응형 웹사이트(화면 축소시 메뉴 사라지고 아이콘 등장)

 

미디어 쿼리를 이용하여 반응형 웹사이트 만들기를 해 보고 있어요.

 

 

미디어 쿼리, @media query 이해하기

 

반응형 웹사이트(소스) 만들기 연습

 

CSS로 반응형 웹사이트(소스) 만들기: 사이드바가 본문 아래로 떨어지게

 

이번 시간엔

 

1. 화면 480px 이하로 축소하면, 상단 메뉴바가 사라지고

2. 메뉴 아이콘이 새로 등장하며

3. 아이콘을 클릭했을 때 다시 메뉴가 등장하는 방법

 

을 배워 볼게요.

 

 

 A 화면

 

  B 화면

 

 C 화면

 

A화면 만들기

 

전체 html 소스

<div id="header">
<a href="#" id="menu">&#8634;</a>             /*메뉴 아이콘*/
<ul id="nav">                                            /*메뉴*/
<li><a href="#">Home</a> &#10072;</li>
<li><a href="#">Guest</a> &#10072;</li>
<li><a href="#">Notice</a></li>
</ul>
</div>

 

<div id="contents">본문</div>                   /*본문 영역*/ 
<div id="side">오른쪽 사이드바</div>         /*사이드바 영역*/ 
<div id="footer">footer</div>                      /*푸터 영역*/ 

 

 

그럼 하나씩 살펴보도록 하겠습니다~

 

메뉴 아이콘 만들기

 

<a href="#" id="menu">&#8634;</a>

위 코드에서 &#8634 와 &#10072은 특수 기호를 입력하는 html 코드입니다.

 

chracter entity라고 부르며, &#8634 으로 메뉴 아이콘을 만들고, &#8634 는 수직바 입니다.

(위 이미지에서 C화면 참조)

 

chracter entity를 더 보시려면 http://dev.w3.org/html5/html-author/charref 참조  

 

 

 

메뉴 만들기

 

이건 지난 시간에 배운 것과 다르지 않습니다. 1단 메뉴 만드는 기본 구성입니다.

 

<ul id="nav">                                           
<li><a href="#">Home</a> &#10072;</li>
<li><a href="#">Guest</a> &#10072;</li>
<li><a href="#">Notice</a></li>
</ul>

 

 

나머지는 지난 시간에 배운 것과 동일하며

 

한 가지 다른 점은, 메뉴를 감싸는 #header div가 새로 생겼습니다.

 

 

이제 css 작성법을 보도록 하겠습니다

 

css

#header, #footer, #side {background-color:#FFE08C;}        /*헤더,푸터,사이드 배경색 지정*/

#header{margin-bottom:10px;}                                         /*하단과의 여백 조절*/

a#menu{text-decoration:none;display:none;}                      /*링크 밑줄 없애기, 초기화면에서 아이콘 숨김*/

 

#nav { padding:0; margin:0; display:inline;}                      /*메뉴 여백 초기화, 메뉴바를 일렬로 늘어놓기*/
#nav li{display:inline;}                                         /*메뉴 목록을 일렬로 늘어놓기*/

 

#contents {min-height: 400px; width: 80%; background: #E4F7BA;float:left;}
#side {min-height: 400px;}
#footer {margin-top: 10px;}

 

초기 화면에서는 아이콘이 드러나지 않아야 하므로 숨김 상태로 해 놓습니다.

 

나머지 설명이 따로 없는 부분은 이전 강좌를 보시면 다 나옵니다~

 

 

 

B화면, C화면 만들기

 

css

@media screen and (max-width: 480px)
{

#nav{display:none;}
a#menu{display:inline;}
a#menu:hover + #nav{display:inline;}
 

#contents {width: auto; float: none; min-height: 200px;margin-bottom: 10px;}
#side {width: auto; min-height: 0;}
}

 

#nav {display:none;} 는 화면 축소 시 메뉴바를 감추는 것

 

a#menu(display:inline;} 는 메뉴 아이콘만 생성하는 것

 

a#menu:hover + #nav{display:inline;} 은 아이콘에 마우스 오버했을 때 메뉴를 드러나게 하기

 

마우스 오버가 아닌, 마우스 클릭 시 메뉴를 드러나게 하려면

 

:target 선택자를 사용할 수 있는데, 문제는 한 번 클릭을 하면, 화면을 확대하고 다시 축소 시에도

 

2번째 메뉴가 계속 드러나 있습니다.

 

이건 아마도 자바스크립트를 이용해 풀어야 하나 봐요. (자바스크립트 소스는 다음 시간에 알아 볼게요)

 

아무튼 :target 선택자 소스는 다음과 같습니다

 

#nav:target {display:inline;}

 

두 가지 다 다운 받아서 실행해 보세요

 

media query(icon).html 

media query(target).html

 

 

 

 

 

   

IE 문서 모드란(meta http-equiv="x-ua-compatible" content="IE=edge")

 

meta viewport (메타 뷰포트 태그) 사용법

 

웹사이트 운영자라면 알아야할 html, css 상식