CSS 3일차

미디어 쿼리

CSS에서 화면의 크기또는 방향등 디바이스의 특성에따라 다른 스타일을 적용할 수 있도록 해주는 기능.
반응형 웹을 만들때 화면크기에따라 요소들을 다르게 배치할 수 있다.

 

@media(조건)

조건 : max-width -> 최대넓이(max-width아래에서만 해당 스타일 적용)

          min-width -> 최소넓이(min-width위에서만 해당 스타일 적용)

          screen -> 현재 화면의 크기 

 

반응형

화면 넓이가 0 ~ 1200px일때 {}안에 스타일을 적용

 

@media (max-width: 1200px){
    #wrap{ width: 100%; }

    #content2 .article-box{ flex: 0 0 50% ;}
    #content2 .article-box:nth-child(3){display: none;}

    #content3 .article-square{flex: 0 0 calc(33% - 24px);}
    #content3 .article-square:nth-child(4){ display: none;}
}

/* width가 768이하에서 적용 */
@media (max-width: 768px){
    #content2{flex-wrap: wrap;}
    #content2 .article-box{ flex: 0 0 100%;}
}

/* width가  480이하에서 적용 */
@media(max-width: 480px) {
    #content1{flex-direction: column;}
    #content1 .nav{width: 100%; height: 200px;}
    #content1 .article-right{width: 100%; height: 200px;}

    #content3 .article-square{flex: 0 0 calc(100% - 24px);}
} */

<div id="wrap">
    <header id="header"></header>
    <section id="banner"></section>
    <section class="main-section" id="content1">
        <nav class="nav"></nav>
        <div class="right">
            <article class="article-right"></article>
            <article class="article-right"></article>
        </div>
    </section>
    <section class="main-section" id="content2">
        <article class="article-box"></article>
        <article class="article-box"></article>
        <article class="article-box"></article>
    </section>
    <section class="main-section" id="content3">
        <article class="article-square"></article>
        <article class="article-square"></article>
        <article class="article-square"></article>
        <article class="article-square"></article>
    </section>
    <footer id="footer"></footer>
</div>