본문 바로가기

TUTORIAL


반응형 사이트 만들기(2019)

10. 반응형 사이트 만들기 : 헤더 메뉴

(2019/10) 반응형 사이트 만들기 - 헤더 메뉴

반응형 웹 사이트를 만들기 위한 헤더 퀵 메뉴 예제입니다. 영상을 보면서 같이 따라하세요^^

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
    <meta name="author" content="webstoryboy">
    <meta name="description" content="반응형 사이트 따라하기">
    <meta name="keywords" content="반응형사이트, 웹퍼블리셔, 웹접근성, HTML5, webstoryboy, webs">
    <title>반응형 사이트 만들기 : 헤더 메뉴</title>

    <!-- style -->
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">

    <!-- 파비콘 -->
    <link rel="shortcut icon" href="icon/favicon.ico">
    <link rel="apple-touch-icon-precomposed" href="icon/favicon-152.png">
    <link rel="icon" href="path/to/favicon.png">
    <link rel="icon" href="icon/favicon-16.png" sizes="16x16"> 
    <link rel="icon" href="icon/favicon-32.png" sizes="32x32"> 
    <link rel="icon" href="icon/favicon-48.png" sizes="48x48"> 
    <link rel="icon" href="icon/favicon-64.png" sizes="64x64"> 
    <link rel="icon" href="icon/favicon-128.png" sizes="128x128">

    <!-- HTLM5shiv ie6~8 -->
    <!--[if lt IE 9]> 
        <script src="js/html5shiv.min.js"></script>
        <script type="text/javascript">
            alert("현재 당신이 보는 브라우저는 지원하지 않습니다. 최신 브라우저로 업데이트해주세요!");
        </script>
    <![endif]-->
    <style>
        /* reset */
        /* 여백 초기화 */
        body,div,ul,li,dl,dd,dt,ol,h1,h2,h3,h4,h5,h6,input,fieldset,legend,p,select,table,th,td,tr,textarea,button,form,figure,figcaption{margin:0;padding:0;}

        /* a 링크 초기화 */
        a {color: #222; text-decoration: none;}
        a:hover {color: #2698cb;}

        /* 폰트 초기화 */
        body, input, textarea, select, button, table {font-family: 'Nanum Gothic', AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif; color: #222; font-size: 13px; line-height: 1.5;}

        /* style */
        /* 레이아웃 */
        #header {background: url(img/header_bg.jpg) repeat-x center top;  }
        #nav {}
        #title {}
        #contents {}
        #footer {}

        /* 컨테이너 */
        .container {position: relative; width: 1200px; margin: 0 auto; background: rgba(0,0,0,0.3)}

        /* 헤더 */
        .header {height: 327px;}
        .header .header_menu {text-align: right;}
        .header .header_menu a {color: #fff; padding: 8px 0 6px 10px; display: inline-block; transition: color 0.3s ease; font-family: 'Abel', sans-serif;}
        .header .header_menu a:hover {color: #ccc;}

        /* mediaquery */
        /* 화면 너비 0~1220px */
        @media (max-width: 1220px){
            .container {width: 100%;}
            .row {padding: 0 15px;}
        }
    </style>
</head>
<body>
    
    <header id="header">
        <div class="container">
            <div class="row">
                <div class="header">
                    <div class="header_menu">
                        <a href="http://websedu.tistory.com/">Blog</a>
                        <a href="https://www.facebook.com/webstoryboys">facebook</a>
                        <a href="http://richclub8.dothome.co.kr/webstandard/web/index.html">Webstandard</a>
                    </div>
                    <!-- //header_menu -->
                </div>
            </div>
        </div>
    </header>
    <nav id="nav">
        <h2>반응형 사이트 전체 메뉴</h2>
    </nav>
    <article id="title">
        <h2>반응형 사이트 서브 타이틀</h2>
    </article>
    <main>
        <section id="contents">
            <h2>반응형 사이트 컨텐츠</h2>
            <section>
                <h3>반응형 사이트 왼쪽 컨텐츠</h3>
                <article><h4>반응형 사이트 왼쪽 컨텐츠1</h4></article>
                <article><h4>반응형 사이트 왼쪽 컨텐츠2</h4></article>
                <article><h4>반응형 사이트 왼쪽 컨텐츠3</h4></article>
            </section>
            <section>
                <h3>반응형 사이트 가운데 컨텐츠</h3>
                <article><h4>반응형 사이트 가운데 컨텐츠1</h4></article>
                <article><h4>반응형 사이트 가운데 컨텐츠2</h4></article>
                <article><h4>반응형 사이트 가운데 컨텐츠3</h4></article>
            </section>
            <section>
                <h3>반응형 사이트 오른쪽 컨텐츠</h3>
                <article><h4>반응형 사이트 오른쪽 컨텐츠1</h4></article>
                <article><h4>반응형 사이트 오른쪽 컨텐츠2</h4></article>
                <article><h4>반응형 사이트 오른쪽 컨텐츠3</h4></article>
            </section>
        </section>
    </main>
    <footer id="footer">
        <h2>반응형 사이트 푸터</h2>
    </footer>
    
    <!-- JavaScript Libraries -->
    <script src="js/jquery.min_1.12.4.js"></script>
    <script src="js/modernizr-custom.js"></script>
</body>
</html>





























































<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
    <meta name="author" content="webstoryboy">
    <meta name="description" content="반응형 사이트 따라하기">
    <meta name="keywords" content="반응형사이트, 웹퍼블리셔, 웹접근성, HTML5, webstoryboy, webs">
    <title>반응형 사이트 만들기 : 헤더 메뉴</title>

    <!-- style -->
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">

    <!-- 파비콘 -->
    <link rel="shortcut icon" href="icon/favicon.ico">
    <link rel="apple-touch-icon-precomposed" href="icon/favicon-152.png">
    <link rel="icon" href="path/to/favicon.png">
    <link rel="icon" href="icon/favicon-16.png" sizes="16x16"> 
    <link rel="icon" href="icon/favicon-32.png" sizes="32x32"> 
    <link rel="icon" href="icon/favicon-48.png" sizes="48x48"> 
    <link rel="icon" href="icon/favicon-64.png" sizes="64x64"> 
    <link rel="icon" href="icon/favicon-128.png" sizes="128x128">

    <!-- HTLM5shiv ie6~8 -->
    <!--[if lt IE 9]> 
        <script src="js/html5shiv.min.js"></script>
        <script type="text/javascript">
            alert("현재 당신이 보는 브라우저는 지원하지 않습니다. 최신 브라우저로 업데이트해주세요!");
        </script>
    <![endif]-->
</head>
<body>
    
    <header id="header">
        <div class="container">
            <div class="row">
                <div class="header">
                    <div class="header_menu">
                        <a href="http://websedu.tistory.com/">Blog</a>
                        <a href="https://www.facebook.com/webstoryboys">facebook</a>
                        <a href="http://richclub8.dothome.co.kr/webstandard/web/index.html">Webstandard</a>
                    </div>
                    <!-- //header_menu -->
                </div>
            </div>
        </div>
    </header>
    <nav id="nav">
        <h2>반응형 사이트 전체 메뉴</h2>
    </nav>
    <article id="title">
        <h2>반응형 사이트 서브 타이틀</h2>
    </article>
    <main>
        <section id="contents">
            <h2>반응형 사이트 컨텐츠</h2>
            <section>
                <h3>반응형 사이트 왼쪽 컨텐츠</h3>
                <article><h4>반응형 사이트 왼쪽 컨텐츠1</h4></article>
                <article><h4>반응형 사이트 왼쪽 컨텐츠2</h4></article>
                <article><h4>반응형 사이트 왼쪽 컨텐츠3</h4></article>
            </section>
            <section>
                <h3>반응형 사이트 가운데 컨텐츠</h3>
                <article><h4>반응형 사이트 가운데 컨텐츠1</h4></article>
                <article><h4>반응형 사이트 가운데 컨텐츠2</h4></article>
                <article><h4>반응형 사이트 가운데 컨텐츠3</h4></article>
            </section>
            <section>
                <h3>반응형 사이트 오른쪽 컨텐츠</h3>
                <article><h4>반응형 사이트 오른쪽 컨텐츠1</h4></article>
                <article><h4>반응형 사이트 오른쪽 컨텐츠2</h4></article>
                <article><h4>반응형 사이트 오른쪽 컨텐츠3</h4></article>
            </section>
        </section>
    </main>
    <footer id="footer">
        <h2>반응형 사이트 푸터</h2>
    </footer>
    
    <!-- JavaScript Libraries -->
    <script src="js/jquery.min_1.12.4.js"></script>
    <script src="js/modernizr-custom.js"></script>
</body>
</html>






























































/* 레이아웃 */
#header {background: url(img/header_bg.jpg) repeat-x center top;}
#nav {}
#title {}
#contents {}
#footer {}

/* 컨테이너 */
.container {position: relative; width: 1200px; margin: 0 auto; background: rgba(0,0,0,0.3)}

/* 헤더 */
.header {height: 327px;}
.header .header_menu {text-align: right;}
.header .header_menu a {color: #fff; padding: 8px 0 6px 10px; display: inline-block; transition: color 0.3s ease; font-family: 'Abel', sans-serif;}
.header .header_menu a:hover {color: #ccc;}

/* mediaquery */
/* 화면 너비 0~1220px */
@media (max-width: 1220px){
    .container {width: 100%;}
    .row {padding: 0 15px;}
}

































/* 여백 초기화 */
body,div,ul,li,dl,dd,dt,ol,h1,h2,h3,h4,h5,h6,input,fieldset,legend,p,select,table,th,td,tr,textarea,button,form,figure,figcaption{margin:0;padding:0;}

/* a 링크 초기화 */
a {color: #222; text-decoration: none;}
a:hover {color: #2698cb;}

/* 폰트 초기화 */
body, input, textarea, select, button, table {font-family: 'Nanum Gothic', AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif; color: #222; font-size: 13px; line-height: 1.5;}