Media queries

두번째 단계로 미디어 쿼리를 추가해 보도록 하겠습니다. 

영어로는 breakpoint라는 것을 결정해야 합니다.

이 부분은 솔루션에 따라 약간씩 차이가 있는 것으로 보입니다.

모바일은 360px/640px

테블릿은 600px/768px 

데스크탑은 978px/1200px로 보겠습니다.

참고로 부트스트랩은 768px(tablet), 992px(laptop), 1200px(desktop)으로 구분하기도 합니다.

중단점(breakpoints)는 여러분이 홈페이지제작할 때 좀 더 고려하길 바랍니다.

그리고 반응형을 제작할 때 접근방식 또한 두가지 방식이 있습니다.

모바일 중심으로 갈 것인지, 데스크버전을 만들고 테블릿, 모바일 화면을 고려할 것인지를 결정하면 됩니다.

우리는 이미 데스크탑 기준 홈페이지를 만들었기 때문에 나중 방법을 따르겠습니다.

테블릿 사용자를 위한 CSS

/* Media for tablet */
@media screen and (max-width: 768px) {
	css 속성들....}

모바일 사용자를 위한 CSS

/* Media for mobile */
@media screen and (max-width: 640px) {
	css 속성들....
	}

위에서는 크게 종단점을 768px, 640px 만 고려했습니다. 

모바일 중심으로 CSS를 작성할 경우는 모바일 CSS를 작성한 후

위에서는 max-width로 표현되었지만 min-width로 표현하여 테블릿, 데스크탑 CSS를 작성하면 됩니다.

아래는 이번 프로젝트 관련 미디어 쿼리 반영한 전체 코드입니다.

/* Media for tablet */
@media screen and (max-width: 768px) {
    #header .SocialBarContainer .SocialRow{max-width:720px; }
    #header .logo{max-width:720px; }
    .nav ul { max-width:720px; }
    .main{ max-width:720px; }
    .footer .f_menu p{max-width:720px; }
    .footer .copyright p{max-width:720px; }
    .nav ul li {width:100%;}
    .nav ul li:hover ul {  width: 100%; position:relative;}
    .nav ul li:hover ul li {  width:100%;  }
    .main .container .m_column{ width:90%;text-align:center;padding-bottom:20px;}  
    .footer .f_menu p span{
            display:table;padding:5px;text-align:center;      
        }  
    .slide img{width:100%;height:auto;}    
    /* sub-title */
    .main2{ max-width:720px; }
    .subtitle{max-width:720px;}     
    .subtitle img{width:100%;height:auto;}  
    .aside {width:100%;}
    .subtainer {width:100%;}
    .aside img{width:100%;height:auto;} 
}

/* Media for mobile */
@media screen and (max-width: 640px) {
    #header .SocialBarContainer .SocialRow{max-width:620px; }
    #header .logo{max-width:620px; }
    .nav ul { max-width:620px; }
    .main{ max-width:620px; }
    .footer .f_menu p{max-width:620px; }
    .footer .copyright p{max-width:620px; }
        /* sub-title */
    .main2{ max-width:620px; }
    .subtitle{max-width:620px;}   
}

이미 위 소스에 반영이 되었는데 우리가 마지막으로 고려해야 할 것은 미디어와 관련된 부분입니다.

Flexible Media

우리가 만들고 있는 사이트엔 메인과 부메뉴 상단에 2개의 이미지가 있습니다. 이 부분 반응처리를 위해 아래와 같이 코드를 추가하였습니다.

    .slide img{width:100%;height:auto;} 
    .aside img{width:100%;height:auto;} 

최근에 추가된 <picture>요소를 이용하여 breakpoints별로 별도의 이미지를 준비할 수 있습니다. 다만 <picture>요소는 ie11에서도 지원하지 않습니다.

<picture>
  <source media="(max-width: 768px)" srcset="main-768.jpg">
  <source media="(max-width: 640px)" srcset="main-640.jpg">
  <img src="main.jpg" alt="main image" style="width:auto;">
</picture>

직관적이고 편하긴 하지만 이것을 웹사이트에 적용하기 위해서는 조금 더 기다리거나 판단이 필요해 보입니다.

다음 장부터는 부트스트랩을 이용하여 반응형 사이트를 코딩하는 방법을 진행하겠습니다.