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

moozi

미디어쿼리샘플 본문

TIS_2016/주말반_3기

미디어쿼리샘플

moozi 2016. 7. 9. 13:19

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>미디어쿼리 연습</title>

    <link rel="stylesheet" href="css/desktop.css" media="screen">

    <link rel="stylesheet" href="css/print.css" media="print">

    <style>

        div{

            width:300px;

            height:300px;

            background: olive;

            float:left;

            margin:10px;

        }

        

        /* 가로크기 767px이하. 스마트폰 */

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

            body{ background-color: green;}

            #box2{display: none;}

            #box3{display:none;}

        }

        /* 가로크기 768px ~ 959px. 태블릿 */

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

            body{ background-color: red;}

            

            #box3{ display: none;}

        }

        /* 가로크기 960px이상. PC */

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

            body{ background-color: blue;}

        }

    </style>

</head>

<body>

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

    

    <div id="box1"></div>

    <div id="box2"></div>

    <div id="box3"></div>

    

</body>

</html>

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

서브메뉴 연습  (0) 2016.07.09
레이아웃 by skew  (0) 2016.07.09
반응형 메뉴 샘플  (0) 2016.07.09
웹폰트  (0) 2016.07.09
7/2 수업자료 전체백업  (0) 2016.07.02
'TIS_2016/주말반_3기' Related Articles more
Comments