생활코딩

Coding Everybody

media query

토픽 생활코딩 > 클라이언트 > CSS > CSS 수업

소개

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. 곤비
    0218
  2. DreamBoy
    2023.09.20. CSS - 레이아웃 - media query 파트를 시작합니다.
  3. AgainstartJH
    2022년 11월 20일 일요일 학습완료!
  4. 헤밍웨이
    220823
  5. INJE
    22/03/17
  6. 감자
    감사합니다!
  7. 드림보이
    2021.11.14. media query 파트 수강완료
  8. vogueupp
    완료!!!!!!
  9. choi
    완료
  10. jeisyoon
    2021.06.22 Media query - OK
  11. ㅠㅠ 미디어쿼리 밑으로 빼야하는거군요
    대화보기
    • 하.... 난 왜 테두리 안없애지지 ㅠㅜ 똑같이 해도 안되니까 열받네여
    • 반응형 웹을 위한 media query
    • 주니어개발자
      감사합니다. 디자인 초보일때 흔히하는 실수일 것 같네요 ㅋㅋ 삽질하며 시간낭비를 줄이는 팁!
      대화보기
      • 따뜻한츄르
        2021 01 01
      • 201216 1월이 되면 공부하러 가야해서... 단기 속성으로 익히고 싶어서 열심히 듣는 중인데 어제 갑자기 사이트를 만들고 싶어서 만들다가 현타가 왔습니다... 제가 원하는 대로 안되니까 화도 나고 그러더라고요 호호홓 style에서 위와 아래의 우선순위 같은 것을 신경 안쓰고, 클래스나 아이디를 잘 안쓰니까 지저분하고 중구난방인 코드들을 보면서 열심히 해야겠다는 생각이 들었습니다..홧팅
      • 만듀
        2020.11.16
      • 박병진
        감사합니다.!
      • 콜라
        20200930 완료
      • 김성곤
        20200724 감사합니다!
      • 한강
        미디어 쿼리 잘 배웠습니다~^^!
        2006010
      • 코딩중독
        정말 감사드립니다 생활코딩님
      • green diseny
        복습하니깐 재미있고 뿌듯하고 좀더 뭔가 내용이 많아서 알찼던것같다!!
      • 무지개반사
        완료
      • Blanc
        2020.01.05
      • 다나가
        190806 - 수강완료
      • FIRE
        20190730 완료
      • 저도 그래서 확인해보니,현재 화면을 확대해서 보셔서 그렇습니다.
        설정에서 zoom을 100%로 하시고 하시면 정상적으로 됩니다.
        대화보기
        • lygon
          2019-03-03 완료
        • 한승민
          190226
        • 숨이
          완료햇습니당
        • anna
          개발자도구 항목의 점 세개가 아니라 화면에 나타난 디바이스 툴바 상단 우측의 점 세개 옵션이에요~
          대화보기
          • 김민영
            완료!
          • Seo Yun Seok Tudoistube
            크롬 검사툴에 X 버튼 왼쪽에 세로로 점 3개 모양 클릭하면
            Dock side
            Show console drawer
            Open file
            Search
            More tools▶
            ----------------
            Settings
            Shortcuts
            Help▶

            이렇게 나오고 More tools 를 클릭해도 show mediaquery 라는게 안나오는데 크롬버전이 바뀌어서 안보이는걸까요?
            감사합니다!
          • 아 그렇군요
            답변 감사합니다.
            대화보기
            • egoing
              두가지는 완전히 다른 기술이랍니다. 동명이인 같은거에요
              대화보기
              • adobe Flex와 CSS flex를 구분 해야 하는건가요??
                다들 구분없이 그냥 flex라고 하는거 같아서요
                대화보기
                • egoing
                  그건 adobe flex이고,
                  이건 css flex 입니다. ^^
                  대화보기
                  • 현업에서 Flex를 안쓴다는 이야기가 많은데 어떻게 해야 하는걸까요...
                    심지어 사장된 기술이라고까지 하는데...
                    이제 입문하는 사람으로써 갈팡질팡하네요
                  • JN87
                    PC웹을 기준으로 제작한 페이지의 CSS에 미디어쿼리를 사용해
                    반응형 웹으로 만들고자 하는데 질문 하나 드립니다.ㅠ

                    PC화면을 기준으로 작성한 CSS 코드 가장 아랫쪽에

                    @media (max-width:768px) {
                    /* 새로운 CSS 코드 */
                    }

                    이런식으로 추가했습니다.
                    다만 이렇게 했더니 작동을 안하길래 기존 CSS 코드들도 별개로

                    @media (min-width:769px) {
                    /* 기존의 CSS 코드 */
                    }

                    이렇게 묶어줬더니 이제야 제대로 작동하더군요.
                    그런데 다만 이렇게 했더니 코드가 너무나 길어지는 것이 거슬려서

                    새로운 CSS코드 부분에서 기존 CSS코드가 일치(중복)하는 부분은 삭제하고
                    추가 및 변동된 코드만 남겨뒀습니다만... 이경우는 또 화면에 정상출력이 되지 안하더군요.
                    질문이 너무 두서없네요. 정리하자면


                    A. 기존의 PC기준으로 작성된 CSS 코드

                    @media (max-width:~~){
                    B. 모바일버전 CSS코드
                    }

                    에서 'A'의 CSS코드들은 유지된 채, 'B'에서 추가 및 변동된 CSS코드들만
                    적용하여 반응형 웹을 작동시키는 법이 궁금합니다.
                  • Minju Kim
                    content 안에 있는 nav 태그에만 적용시키려면 .content nav 로 해야하고, nav 태그 전체에 적용시키려면 그냥 nav 로 해도 됩니다!
                  • 띠링
                    style 태그 안에서 어떨 때는 .content.nav로 해야하고, 어떨 때는 그냥 nav로 해도 되고
                    이건 어떻게 구분해야 하나요?
                  • 푸른하늘
                    11일차 공부 감사합니다
                  • 오빠는다르다
                    감사합니다~!!!!!
                  • 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
                        감사합니다 !