CSS

media query

소개

media query는 화면의 종류와 크기에 따라서 디자인을 달리 줄 수 있는 CSS의 기능입니다. 특히 최근의 트랜드인 반응형 디자인의 핵심 기술이라고 할 수 있습니다. 

예제 - mediaquery.html

<!doctype html>
<html>
<head>
   <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>
   <ul>
       <li>~500px : red</li>
       <li>501~600px : green</li>
       <li>601px~ : blue</li>
   </ul>
    
    
    
</body>
</html>

미디어쿼리 응용

예제 - mediaquery_2.html

<!doctype>
<html>
<head>
    <meta charset="utf-8">
    <style>
        .container{
            display: flex;
            flex-direction: column;
        }
        header{
            border-bottom:1px solid gray;
            padding-left:20px;
        }
        footer{
            border-top:1px solid gray;
            padding:20px;
            text-align: center;
        }
        .content{
            display:flex;
            
        }
        
        .content nav{
            border-right:1px solid gray;
        }
        
        
        .content aside{
            border-left:1px solid gray;    
        }
        @media(max-width:500px){
            .content{
                flex-direction: column;
            }
            .content nav, .content aside{
                border:none;
                flex-basis: auto;
            }
            main{
                order:0;
            }
            nav{
                order:1;
            }
            aside{
                order:2;
                display: none;
            }
        }
        nav, aside{
            flex-basis: 150px;
            flex-shrink: 0;
        }
        main{
            padding:10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>생활코딩</h1>
        </header>
        <section class="content">
            <nav>
                <ul>
                    <li>html</li>
                    <li>css</li>
                    <li>javascript</li>
                </ul>
            </nav>
            <main>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis veniam totam labore ipsum, nesciunt temporibus repudiandae facilis earum, sunt autem illum quam dolore, quae optio nemo vero quidem animi tempore aliquam voluptas assumenda ipsa voluptates. Illum facere dolor eos, corporis nobis, accusamus velit, similique cum iste unde vero harum voluptatem molestias excepturi. Laborum beatae, aliquid aliquam excepturi pariatur soluta asperiores laudantium iste, architecto ducimus fugiat sed, saepe quaerat recusandae exercitationem sapiente, impedit nostrum error. Doloremque impedit, eos in quos assumenda illo eum dicta. Voluptatum quaerat excepturi consectetur, doloremque esse deleniti commodi natus, maxime sit? Officia rerum quibusdam porro dolorum numquam harum soluta ex quo! Vero, nam? Necessitatibus rem hic perferendis maiores obcaecati voluptate sunt autem id doloribus, similique repudiandae nesciunt vel facere ex accusantium ipsum provident iste itaque? Perferendis culpa nostrum repellendus dolores repudiandae assumenda, tempora laudantium in quibusdam placeat facilis ex voluptatem provident velit iusto fuga eum nobis deserunt enim minus. Explicabo vel labore, eum doloremque, impedit recusandae aut illum corporis quis atque sit vero quasi tempore placeat ipsam similique quo delectus provident animi distinctio debitis eligendi voluptatum! Dolorem perspiciatis similique non fugit eaque? Commodi suscipit earum aliquam rem, neque ad. Obcaecati nisi beatae officia inventore laborum nostrum natus perspiciatis iste, aperiam vero quisquam saepe labore facilis veritatis illo excepturi vitae autem quis! Voluptatibus atque doloribus perferendis, eligendi ex aliquid debitis laudantium omnis accusamus similique cum mollitia quos adipisci reprehenderit assumenda sequi, dolore tenetur ipsam, odio, vero reiciendis iure. Dolore itaque nesciunt ipsam, id maxime saepe officiis dolorum molestias earum temporibus? Possimus ipsum accusamus quasi minima, quod magnam iusto non cupiditate facilis pariatur aliquam omnis, blanditiis assumenda magni ad voluptas dicta est optio reprehenderit rem ratione earum ipsa, dolor vero! Totam, adipisci eos nihil repellendus. Maiores, blanditiis. Officiis aspernatur iure culpa illo sint ex id perferendis, explicabo architecto ipsa voluptatibus nesciunt pariatur commodi cum quam. Obcaecati ut quidem quam error nemo. Pariatur aliquid autem inventore laboriosam, velit totam, temporibus ad magnam minus, quis nesciunt aperiam veritatis. Vitae porro provident magni eos sit sed dignissimos iure natus odio nostrum molestiae atque mollitia saepe adipisci ut velit quo hic fuga ex, voluptates vel eum ipsum amet, sunt corporis. Maxime odit alias, ratione tenetur, asperiores consequuntur deserunt modi velit ab maiores pariatur voluptates beatae aut nesciunt perspiciatis sed veritatis doloremque quibusdam amet vero. Qui, labore. Atque ratione quae ducimus reprehenderit perferendis nisi earum, debitis commodi maxime sequi facere optio doloribus, repudiandae ex quidem amet iusto inventore quaerat at praesentium sint. Omnis mollitia esse illum suscipit, quis dolorem maxime sunt eaque, autem nisi corrupti perferendis provident tempore quas, unde! Doloribus, at, accusamus, maiores enim amet quod provident temporibus atque, ipsam fugiat incidunt. Quasi iusto ea quibusdam eveniet porro officiis dicta fugiat fugit laudantium ipsum esse quisquam quo laboriosam odit voluptates alias veritatis expedita quidem consectetur eos, impedit, incidunt dolorum? Laborum, facere nulla ullam, aliquid rerum nihil non adipisci, architecto obcaecati iure quam, fuga minus alias eligendi provident ex odio sit. Ducimus, facilis veritatis numquam, maxime quos natus animi, a magnam itaque veniam pariatur sed alias eos quas? Voluptatum fugit doloribus fugiat iste adipisci quidem odit consectetur, sapiente culpa magnam laborum, laboriosam exercitationem cupiditate dignissimos, nisi doloremque hic itaque aspernatur. Ab labore dolorum cumque rem vitae repellat quo quae porro cupiditate minus. Perspiciatis cumque sequi provident fugit. Nulla reiciendis voluptates molestiae corporis voluptate, quidem consequuntur, dolor vero necessitatibus deleniti tempora ab facilis similique, ea error deserunt fuga quia atque omnis nam earum non, illo. Minima quos optio nostrum eos aperiam? Quam, obcaecati velit deserunt tempore, iure vitae repudiandae quos illum quasi esse quas quaerat at consectetur necessitatibus. Cum, quod, dolore voluptatibus quibusdam accusamus aliquam consequatur dolorum illo! Sequi commodi adipisci explicabo soluta necessitatibus magni expedita cumque, officiis voluptas, vel amet recusandae sunt, quidem eum aliquid deleniti unde, impedit non magnam consectetur est minima facere architecto. Molestias cum vero nostrum saepe, dignissimos eius beatae natus fugiat deserunt esse, nesciunt eos ducimus id amet magnam possimus? Optio adipisci quisquam earum totam nemo sunt provident iure ab consectetur et deleniti molestiae blanditiis laudantium, autem consequatur rerum labore ipsa ipsam deserunt nisi, expedita doloremque quibusdam! Illo nemo laborum a sequi in, ad ipsum blanditiis alias! Eaque eos eligendi hic dolorum sint, tempore voluptatum ut numquam. Corporis similique itaque accusantium, esse porro ea dolor, quae consequuntur ullam necessitatibus magni rem optio officiis totam in dicta quas, odio quam blanditiis dolores pariatur? Dolorem, fuga? Harum ratione nemo perspiciatis culpa eum repudiandae esse, atque impedit nihil debitis, assumenda est. Sapiente rerum alias ipsa tempore obcaecati deserunt maiores distinctio officiis itaque fugit optio, eveniet facere amet ipsum, harum laboriosam eius, enim magni blanditiis temporibus nobis consequuntur ut. Quia magnam vero atque modi aspernatur in perferendis voluptas reprehenderit, rerum dolore unde iusto ab non eius molestiae quasi tenetur beatae ipsam quidem, quos at architecto voluptate alias eos. Deserunt velit beatae, ullam, accusantium sit asperiores! A vero perferendis, harum praesentium dolorem deserunt. Numquam voluptas necessitatibus, aliquam ullam saepe harum amet consequatur minima neque officia maxime quo beatae ab aliquid ex placeat rerum unde, reiciendis aspernatur similique, doloremque ad laboriosam modi. Minus quam aperiam, sed aliquid. Fugiat amet harum consequuntur reprehenderit id eum ratione quos temporibus, quae. Ab ut omnis tempora voluptates, sed ea animi voluptatem pariatur quod mollitia corrupti voluptas repellendus consequatur quae adipisci, enim vitae harum nulla natus iusto hic totam officia architecto quam. Debitis dignissimos praesentium, hic. Ad assumenda, aliquid consequuntur dolore eum repudiandae ab explicabo ipsa sed blanditiis. Quidem unde necessitatibus facilis, quis commodi. Dignissimos perferendis, nihil labore corrupti autem cumque ipsum vel voluptatum? Nostrum labore, omnis provident ullam repellendus culpa amet rem consequatur animi, necessitatibus porro. In consequatur optio recusandae, quisquam accusantium at deserunt voluptatem fugit quibusdam neque libero assumenda consectetur numquam ratione quaerat. Quos omnis neque atque, id perferendis possimus, alias, dignissimos doloribus ducimus similique ratione vitae eos laudantium, tempore cupiditate quod consectetur! Voluptas enim laboriosam nesciunt rem. Recusandae beatae numquam asperiores adipisci neque, vel pariatur suscipit provident, a est magni. Laborum dolore incidunt saepe ipsam? Eveniet doloremque animi maxime aliquid rem fugit dolor dignissimos! Quo, ut quod ab.
            </main>
            <aside>
                AD
            </aside>
        </section>
        <footer>
            <a href="https://opentutorials.org/course/1">홈페이지</a>
        </footer>
    </div>
</body>
</html>

참고

댓글

댓글 본문
작성자
비밀번호
  1. 푸른하늘
    11일차 공부 감사합니다
  2. 오빠는다르다
    감사합니다~!!!!!
  3. jimmyzip
    혹시 만드시는 웹페이지의 페이지마다 css가 각자 따로 있으신지요?
    그러한 경우라면, layout 관련만 작성한 css, 텍스트와 이미지 개별을 관장하는 css파일등의 기준으로
    최대한 공통의 css파일들을 만들어서 개별 페이지에 link시키신 다음에

    link한 파일에서 media query작업을 하시는게 좋을 것 같습니다.

    media query 구간 자체가 if의 성격을 가지고 있어서,
    (디바이스(브라우저) 최소너비가 얼마이고 최대 너비가 얼마일 때는 아래의 style을 적용!)
    어차피 불러와야 하는 css 파일 안에서 모바일 사이즈 대응을 위한 styling을 해주시면 됩니다.

    선한공동체님 페이지가 메인페이지 1, 서브페이지 2장 정도면
    개별 페이지마다 데스크탑 사이즈, 태블릿사이즈, 모바일사이즈 이렇게 media query 구간 나눠서
    총 9번의 작업을 해도 못할 만한 작업은 아니지만

    만약 서브페이지가 10장 정도 된다고 생각해보면
    공통 css파일로 최대한 축약해서
    공통 css파일에 media query구간을 나눠주고
    각 페이지에 link시켜 모든 페이지가 css파일 하나로 다 반응형에 맞춰지게 하는게 유지보수 측면에서 좋을 것 같습니다.
    대화보기
    • jimmyzip
      ^^bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
      대화보기
      • 선한공동체
        항상 감사히 듣고있습니다^^

        media query 수업을 듣다 궁금증이 생겨 글을 남깁니다.
        현재 데스크탑 웹페이지를 어느정도 완성해가고 있는 시점에서
        media query수업을 듣고 반응형을 고민하게 되었습니다.
        현재 만들어진 파일에 하나하나 media query 효과를 주는건 굉장히 힘든일이라..
        제가 반응형 효과를 주기위해서는 어떤 방법이 있는지 궁금합니다

        모바일html파일을 따로 만들어서 if문을 사용해서 해상도에 따라
        데스크탑/모바일 파일이 따로 열리게 하는 기능이 가능할까요?

        아니라면 어떤방법이 있는지 조언을 구합니다 ㅠ
      • 웅쓰
        감사합니다!!!
      • Media Query 수업 잘 들었습니다~ Flex 수업으로 이동합니다 ;)
      • illliilllliillliii
        감사합니다 !
      • leeyou
        혹시 미디어 쿼리 안돼시는 분
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        이거 한번 넣어 보세요 전 이거 넣고 해보니까 잘되더라구여
      • 저도 크롬인데 max-width , min-width 안먹네요.
        그냥 width:500px 상태일 때 백그라운드 red는 됩니다.

        개발자도구로 보면 아래 댓글 달아주신 분과 마찬과지로 display가 block 상태입니다.
      • 14번째
        5.24.
      • php가 첫취업?
        슬슬 복잡해 지네요 flex 완벽하게 마스터해야겠습니다
      • nabongee
         미디어 쿼리를 설정했는데 개발자 도구를 키니까
        display  가 block 이라구 뜨구 use agent stylesheet  이라고 뜨면서
        미디어쿼리가 먹질않아요 ㅠㅠ 어떻게해야하나요?
      • funlife
        감사합니다.
      • Soyoung Park
        크롬 개발자도구로 보는데 지정한 px보다 클 때 효과가 들어갑니다. 왜그런건가요?
        500px로 지정하면 625px에서 적용되고 600px로 지정하면 750px에서 효과 적용됩니다.
        아시는 분 알려주시면 감사하겠습니다.
      • cluelin
        조금정정합니다.
        크롬 개발자 도구로 가로 사이즈 줄엿을때 미리보기로 나오는건 안되고
        실제로 브라우저 창을 줄이니까 미디어쿼리 먹습니다.
        대화보기
        • cluelin
          아톰 에디터 사용중이고 브라우저 크롬 사용중입니다.

          미디어쿼리로 max-width 주고 사용해봤는데 크롬에서 적용이안되서 익스플로러에서 실행시켜보니 되네요

          이런 해괴한;;
        • 잘 보았습니다!
          감사합니다!
        • jgatsby
          와.. flex에 이어 대박인 기능이네요.
        • 껄강쇠
          잘보구 있어욘

          이고잉님 감사합니다.
        • 임지호
          미디어 쿼리 : 다양한 미디어의 크기에 따라 웹페이지를 다르게 할 수 있는 기술(반응형 디자인의 핵심)
          - 방법 : @media(max or min-width:...px) {~~~} -> 최대 ...px까지는 혹은 최소 ...px부터는 ~~~을 적용한다
        • 너무감사합니다 이고잉님덕분에 정말 제 인생이바뀌었다고해도 과언이아닙니다..
          정말감사해요..
        • W.Machine
          이고잉님 정말 감사 감사 또 감사드립니다.

          항상 행복하세요
        • 너무 유용한 내용 감사합니다!!
        • wlsl
          2016.09.10 완료!
        • 감자
          16.09.03 11:34pm
        버전 관리
        egoing
        현재 버전
        선택 버전
        graphittie 자세히 보기