CSS - @media 쿼리 :: 아빠개발자의 노트

CSS - @media 쿼리

2019. 3. 2. 01:24

반응형 디자인을 만들기 위해서 쓴다

특정 페이지 크기 이상이되면 css를 동적으로 사용할수 있다.

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
        <style>


            @media (min-width: 600px) {
                /*페이지크기 600px이하 되면 아래 구문 수행*/
                /* width < 600 */

                /* 만약 @media (min-width: 600px) {*/
                /*페이지크기 600px이상 되면 아래 구문 수행*/
                /* width > 600 */
              div {
                display: none;
              }
            }

            @media (max-width: 600px) and (min-width:400px){
             // 이렇게하면 600이상 , 400 이하 일경우 아래 구문 수행
                .maxdang{
                    display: none;
                }
            }    
      
            .div{
             width: 500px;
             height: 500px;
             background-color: pink;
            }
        </style>
</head>
<body>
    <div class="div">
    안녕
    </div>
</body>
</html>

이렇게 동적으로 화면을 반응형으로 만들수 있는게 @media 미디어 쿼리이다

css의 조건문 같은느낌이다.

media 쿼리는 이것말고도 상당히 많은 부분을 할수있다

가령 print 할경우 @media print { } 로 써서 프린트할떄 필요없는부분을 display:none; 을 사용하여

바꿀수있다.

미디어 쿼리로 반응형을 사용하엿을경우 모바일은 적용이 잘안되는모습을 볼수있는대 (크기가 다르기때문)

위와 같이 메타태그를 추가하면 모바일에서도 똑같이 작동된다.

'디자인 > CSS' 카테고리의 다른 글

CSS - 가상클래스(pseudo) (0)	2019.03.02
CSS - display 속성 (0)	2019.03.02
CSS - 선택자(selector) (0)	2019.03.02
CSS - 애니메이션 @keyframes (0)	2019.03.02
CSS - 문서의 보이는 순서 (Z-INDEX , POSITION) (0)	2019.03.01

아빠개발자의 노트

CSS - @media 쿼리

'디자인 > CSS' 카테고리의 다른 글

+ Recent posts

티스토리툴바