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

미디어쿼리 예제 본문

TIS_2016/주말반_1기

미디어쿼리 예제

moozi 2016. 3. 26. 11:21

<!doctype htmle>
<html>
    <head>
        <title></title>
        <style type="text/css">
            /* 스마트폰 */
            @media(max-width:799px){
                body{
                    background-color: black; 
                    color:white;
                }
               
                 #title:after{content:"스마트폰"};
                #img1{
                    width:100%;
                }
            }
           
            @media only screen and (min-width:800px) and (max-width:1023px){
                body{
                    background-color: red;                   
                }
               
                #title:after{content:"태블릿"}\
                #img1{
                    width:50%;
                }
            }
           
            @media only screen and (min-width:1024px){
                body{
                    background-color: green;                   
                }
               
                #title:after{content:"데스크탑"}
                #img1{
                    width:30%;                   
                }
            }
        </style>
    </head>
    <body>
        <div id="title"></div>
        <div>
            <img id="img1" src="img/img_forest.jpg">
        </div>
       
       
    </body>
</html>

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

movie작업예제  (0) 2016.04.02
gallery 예제  (0) 2016.03.26
animation 파일  (0) 2016.03.26
3/19 오전 수업 사용 소스  (0) 2016.03.19
3/12 오전까지 수업시간 작성 코드  (0) 2016.03.12
'TIS_2016/주말반_1기' Related Articles more
Comments