250x250
Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
일 월 화 수 목 금 토
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
관리 메뉴

커리까지

CSS 수업 : mediaquery 1 - 기본 본문

CSS

CSS 수업 : mediaquery 1 - 기본

목표는 커리 2021. 3. 25. 04:34
728x90
SMALL
  • 미디어에따라 보여지는 것
  • 반응형의 심장과 같은 존재
<!doctype>
<html>
    <head>
       <meta charset="UTF-8">
        <style>
            @media (width:500px){
                body{
                    background-color: red;
                }
            }
        </style>
    </head>
    <body>

    </body>
</html>
  • 500px가 되면 body의 색상을 레드로 바꾼다.
<!doctype>
<html>
    <head>
       <meta charset="UTF-8">
        <style>
            @media (max-width:500px){
                body{
                    background-color: red;
                }
            }
        </style>
    </head>
    <body>

    </body>
</html>
  • 500px 이하가 되면 실행된다.
<!doctype>
<html>
    <head>
       <meta charset="UTF-8">
        <style>
            @media (min-width:500px){
                body{
                    background-color: red;
                }
            }
        </style>
    </head>
    <body>

    </body>
</html>
  • 500px이상일 때 실헹된다.
<!doctype>
<html>
    <head>
       <meta charset="UTF-8">
        <style>

            @media (max-width:500px){
                body{
                    background-color: red;
                }
            }
            @media (max-width:600px){
                body{
                    background-color: green;
                }
            }
        </style>
    </head>
    <body>
        ~500px: red
        501~600px  green
        601px~ : blue
    </body>
</html>
  • 500px이하에서 브라우저는 첫번째와 두번째가 같다면 나중에 나오는게 우선순위가 높다.
<!doctype>
<html>
    <head>
       <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            @media (max-width:600px){
                body{
                    background-color: green;
                }
            }
            @media (max-width:500px){
                body{
                    background-color: red;
                }
            }
            @media (min-width:601px){
                body{
                    background-color: blue;
                }
            }
        </style>
    </head>
    <body>
        ~500px: red
        501~600px  green
        601px~ : blue
    </body>
</html>

css39

728x90
LIST
저작자표시

'CSS' 카테고리의 다른 글

[생활코딩] CSS 수업 - float 2 : holy grail layout  (0) 2021.03.29
CSS 수업 - float 1  (0) 2021.03.26
CSS 수업 - Multi column  (0) 2021.03.24
CSS 수업 - flex 5 : 기타 속성 들  (0) 2021.03.23
CSS 수업 - flex 4 : holy grail layout  (0) 2021.03.22
'CSS' Related Articles more
Comments