Notice
Recent Posts
Recent Comments
Link
«   2024/04   »
일 월 화 수 목 금 토
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
Tags more
Archives
Today
Total
관리 메뉴

moozi

8/4 반응형레이아웃 본문

TIS_2017/응용sw_2기

8/4 반응형레이아웃

moozi 2017. 8. 4. 14:35

8/4 반응형레이아웃



<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>레이아웃 - 반응형 웹</title>

    <!-- 디바이스의 가로폭에 맞게 글자크기,이미지 등 조절됨 -->

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

    <style>

        @import url(http://fonts.googleapis.com/css?family=Poiret+One);    


        /* reset */

        * { margin:0;  padding:0;}

        ol,ul { list-style: none; }

        a { outline:0; text-decoration:none; color:#555; }

        img { border:0;}

        body { font:12px/1.6 'Poiret One'; color:#555; } 


        header { position:fixed; width:15%; height:100%; background:#fff; top:0px; left:0px; transition:all 0.5s;}

        nav { position:relative; width:85%; height:35px; background:#212121; margin-left:15%; transition:all 0.5s;}   

        section { width:85%; position:relative; margin-left:15%;}

        article { float:left; height:260px; transition:all 0.5s; animation:rotate 1s 1;}

        

        @keyframes rotate{

            0%{transform: rotateY(0deg);}

            100%{transform:rotateY(180deg);}

        }  

    

        /* 기본형태 */

        article:nth-child(1) { width:60%; height:520px; background:#ddd;}

        article:nth-child(2) { width:40%; background:#ccc;}

        article:nth-child(3) { width:20%; background:#bbb;}

        article:nth-child(4) { width:20%; background:#aaa;}

        article:nth-child(5) { width:20%; background:#999;}

        article:nth-child(6) { width:40%; background:#888;}

        article:nth-child(7) { width:20%; background:#777;}

        article:nth-child(8) { width:20%; background:#666;}

        article:nth-child(9) { width:40%; background:#555;}

        article:nth-child(10) { width:20%; background:#444;}

        article:nth-child(11) { width:20%; background:#333;}

        article:nth-child(12) { width:20%; background:#222;}

        

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

             header { position:relative;width:100%; height:150px; background:#fff; top:0px; left:0px; transition:all 0.5s;}

            nav { width:100%; margin-left:0%;}

       section { width:100%; margin-left:0px;}

        }

        

    </style>

</head>

<body>

    <header>

        

    </header>

    <nav>

        

    </nav>

    <section>

        <article></article>

        <article></article>

        <article></article>

        <article></article>

        <article></article>

        <article></article>

        <article></article>

        <article></article>

        <article></article>

        <article></article>

        <article></article>

        <article></article>

    </section>

</body>

</html>

'TIS_2017 > 응용sw_2기' 카테고리의 다른 글

javascript연습문제01  (0) 2017.08.07
html연습문제09  (0) 2017.08.04
8/3 movie  (0) 2017.08.04
html연습문제08  (0) 2017.08.03
html연습문제07  (0) 2017.08.02
'TIS_2017/응용sw_2기' Related Articles more
Comments