관리 메뉴

moozi

반응형 웹 샘플 본문

TIS_2016/주말반_4기

반응형 웹 샘플

moozi 2016. 9. 10. 15:37

반응형 웹 샘플


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>반응형 웹페이지 연습</title>

    <style type="text/css">

    * {

        box-sizing: border-box; /* 박스의 width에 padding,border포함 */

        padding:0px;

        margin:0px;

    }

      

    ul.topnav {

            list-style-type: none; /* 기호 없애기 */

            margin: 0;

            padding: 0;

            overflow: hidden;

            background-color: mediumvioletred;

            opacity:0.98;

        }


        ul.topnav li {

            float: left; /* 메뉴 항목을 옆으로 펼침 */

        }



        ul.topnav li a {

            display: block; /* 한항목씩 출력 */

            color: white;

            text-align: center;

            padding: 14px 16px;

            text-decoration: none; /* 밑줄없애기 */

        }


        ul.topnav li a:hover:not(.active) {

            background-color: #111;

        }


        ul.topnav li a.active {

            background-color: #4CAF50;

        }


        ul.topnav li.right {

            float: right; /* 오른쪽 끝으로 배치 */

        }    

         

         #toRight{

            float: right;

        }

        

    /* 767px 이하 */

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

        #toRight{

            float: none;

        }

        ul.topnav{

            position: fixed;

            width:100%;

            z-index: 10;

        }

        .header{

            padding-top: 55px !important;

        }

        

        [class*="col-"] {

            width: 100%; /* 가로폭 100% */

        }

        ul.topnav li:not(:first-child) {

              display: none;/* 첫번째 항목을 제외한 나머지는 안보이게 */

            }

        ul.topnav li.icon {

            float: right;/* 오른쪽 끝에 위치 */

            display: inline-block !important; /* 메뉴 아이콘이 보이게 */

        }

        

         ul.topnav.responsive li.icon {

            position: absolute;

            right: 0;

            top: 0;

          }

          ul.topnav.responsive li {

            float: none; /* 목록 아이템이 밑으로 */

            display: inline;

          }

          ul.topnav.responsive li a {

            display: block; /* 보이게 */

            text-align: left;

          }

    }

    /* 783px ~ 959px */

    @media screen and (min-width:768px) and (max-width:959px){

        .col-m-1 {width: 8.33%;}

        .col-m-2 {width: 16.66%;}

        .col-m-3 {width: 25%;}

        .col-m-4 {width: 33.33%;}

        .col-m-5 {width: 41.66%;}

        .col-m-6 {width: 50%;}

        .col-m-7 {width: 58.33%;}

        .col-m-8 {width: 66.66%;}

        .col-m-9 {width: 75%;}

        .col-m-10 {width: 83.33%;}

        .col-m-11 {width: 91.66%;}

        .col-m-12 {width: 100%;}

    }

    /* 960px 이상 */

    @media screen and (min-width:960px){

        .col-1 {width: 8.33%;}

        .col-2 {width: 16.66%;}

        .col-3 {width: 25%;}

        .col-4 {width: 33.33%;}

        .col-5 {width: 41.66%;}

        .col-6 {width: 50%;}

        .col-7 {width: 58.33%;}

        .col-8 {width: 66.66%;}

        .col-9 {width: 75%;}

        .col-10 {width: 83.33%;}

        .col-11 {width: 91.66%;}

        .col-12 {width: 100%;}

    }    


    .header {

        background-color: #9933cc;

        color: #ffffff;

        padding: 15px;

    }

    .menu ul {

        list-style-type: none;

        margin: 0;

        padding: 0;

    }

    .menu li {

        padding: 8px;

        margin-bottom: 7px;

        background-color :#33b5e5;

        color: #ffffff;

        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

    }

    .menu li:hover {

        background-color: #0099cc;

    }

    .aside {

        background-color: #33b5e5;

        padding: 15px;

        color: #ffffff;

        text-align: center;

        font-size: 14px;

        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

    }

    .footer {

        background-color: #0099cc;

        color: #ffffff;

        text-align: center;

        font-size: 12px;

        padding: 15px;

    }

    .row::after {

        content: "";

        clear: both;

        display: block;

    }

    /* 클래스명이 'col-'이 들어가는 것을 찾아서 적용 */

    [class*="col-"] {

        float: left; /* 옆으로 배치 */

        padding: 15px;

    }

      

    ul.topnav li.icon {

            display: none; /* 처음에 메뉴 아이콘이 안보이게 */

        } 

}

    </style>

</head>

<body>

    <ul class="topnav">

     <div id="toRight">

      <li><a class="active" href="#home">Home</a></li>

      <li><a href="#news">News</a></li>

      <li><a href="#contact">Contact</a></li>

      <li class="right"><a href="#about">About</a></li>

      <li class="icon">

        <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a>

      </li>

      </div>

    </ul>

    <div class="header">

        <h1>TIS정보기술교육센터</h1>

    </div>

    <div class="row">


        <div class="col-3 col-m-3 menu">

            <ul>

            <li>The Flight</li>

            <li>The City</li>

            <li>The Island</li>

            <li>The Food</li>

            </ul>

        </div>


        <div class="col-6 col-m-9">

            <h1>The City</h1>

            <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>

        </div>

        

        <div class="col-3 col-m-12 right">

            <div class="aside">

            <h2>What?</h2>

            <p>Chania is a city on the island of Crete.</p>

            <h2>Where?</h2>

            <p>Crete is a Greek island in the Mediterranean Sea.</p>

            <h2>How?</h2>

            <p>You can reach Chania airport from all over Europe.</p>

            </div>

        </div>


    </div>

    

    

    <div class="footer">

    <p>Resize the browser window to see how the content respond to the resizing.</p>

    

    <script type="text/javascript">

        function myFunction(){

            document.getElementsByClassName("topnav")[0].classList.toggle("responsive");/* responsive클래스를 적용/미적용 반복 */

        }

    </script>

</div>

</body>

</html>

'TIS_2016 > 주말반_4기' 카테고리의 다른 글

loader.html  (0) 2016.09.10
반응형 웹페이지 샘플 - photo  (0) 2016.09.10
9/3 수업파일  (0) 2016.09.03
layout05.html  (0) 2016.09.03
layout04.html  (0) 2016.09.03
Comments