[코딩 초보 개발일지] 상세_06. 반응형 알아보기(미디어쿼리 @media)

반응형=미디어쿼리

=@media 란?

 

디스플레이의 종류(태블릿, 모바일)에 따라 웹 화면의 크기가 
자동으로 최적화되는 것

즉, PC에서 보는 웹페이지 ≠ 태블릿에서 보는 웹페이지 ≠ 모바일에서 보는 웹페이지
 
웹페이지 스타일을 변형시키는 것.
따라서 css에 작성한다.
 
 

<작성방법>

@media(설정조건) {작동방법}

 

단, 반응형을 줄때에는 유의해야할 점이 있다.
이미지크기는 변형이 되지 않는다.
= 반응형 크기마다 그에맞는 이미지로 변경해야 한다.

 

---

@media(max-width:1280px){}
/*일반적인 pc 사이즈*/

@media(max-width:768px){} 
/*큰 태블릿 사이즈*/

@media(max-width:480px){} 
/*모바일 사이즈*/

---

<예시_PC to Tablet>

다음과 같은 PC 웹페이지가 있다고 할 때,

 
태블릿 사이즈로 반응형을 만들어 보자.
 

반응형을 주지 않았을 때,
태블릿크기인 768로 웹페이지를 줄여보자.
아래와 같이 네비게이션 바 아래에 있는
#banner 이미지가 잘려보이고,
네비게이션도 어정쩡하게 배치된다.
 
 
반응형을 통해
#banner 이미지를 변경 ,
네비게이션도 짝수 로 예쁘게 정렬하고,
이용안내~고객센터에 이르는
하단 메뉴는 왼쪽정렬로,
하단로고는 제거 해주자.
 
 
 
 
 
 
 
 
 
 
 
 
여기서 잠깐!
반응형에 따라 이미지가 변경되도록
html에서 반응형(컴퓨터,태블릿,모바일)에 따른
이미지를 3가지 모두 넣어주었다.

728x90

---

<section id="banner">
    <ul>
        <li><img class="img_large" src="./images/slider1.jpg" alt="그린복지재단 이미지01"></li>
        <li><img class="img_midium" src="./images/slider1_medium.jpg" alt="이미지중간"></li>
        <li><img class="img_small" src="./images/slider1_small.jpg" alt="이미지스몰"></li>
    </ul>
</section>

이렇게 이미지를 넣고나면, pc화면에서 이미지가 모두 보이게 되는데
가장 큰 사이즈만 보이도록 #banner의 높이를 지정하고,
넘치는 영역은 overflow:hidden;을 통해 보이지 않게 잘라주었다.

'PC크기 반응 이미지-태블릿크기 반응 이미지-모바일크기 반응 이미지' 순으로 수직정렬되어있음.

---

<style>
#banner{
    height: 300px;
    overflow: hidden;
}
</style>

이렇게 overflow:hidden;으로 
태블릿크기 이미지와 모바일크기 이미지를
PC화면에서는 보이지 않도록 숨겨준다.
 
그다음! 
반응형을 줘보자.

---

@media(max-width:768px){
    #wrap{width: 100%;} /*전체영역*/
    #header{width: 60%; height:100%;} /*메인로고, 네비게이션*/ 
    #banner{width: 100%; height: 100%;} /*네비 하단이미지*/
    .img_large{display: none;}
    .img_midium{display: block;}
    #contents{width: 100%; height: 100%;} /*공지사항~바로가기*/
    footer{width: 100%; height: 100%;} 
    #footer .f_menu{text-align: left;} /*이용안내~고객센터*/
    #footer .f_logo{display: none;} /*하단 로고*/
}

• #header : 네비게이션의 넓이를 60%로 줄여서, 짝수로 보이도록 해주었다.
• .img_large : pc크기 이미지의 이름을 .img_large로 지칭하였다. 웹페이지 크기가 768까지(태블릿크기)일 때에는 이미지가 사라지도록 하고 .img_midium 이라는 이미지가 나타나도록 하였다.
• #footer .f_menu : 이용안내~고객센터에 이르는 하단메뉴를 가운데정렬에서 왼쪽정렬로 바꾸어주도록 하였다.
• #footer .f_logo : 하단로고는 삭제되도록 하였다.

 

<결과화면_태블릿크기>

태블릿크기 에서는
 
#header 네비게이션이 예쁘게 정렬,
#banner 이미지도 변경,
하단로고는 삭제,
하단메뉴는 왼쪽정렬
 
되었다.
 
 
 
 
 
 
 
 
 
 
 
 
 
 

 

---

<응용_PC to Mobile(480)>

---

@media(max-width:480px){
    #wrap{width: 100%;}
    #header{width: 100%; height: 100%;} 
    #banner{width: 100%; height: 100%;}
    .img_large{display: none;}
    .img_midium{display: none;}
    .img_small{display: block;}
    #contents{width: 100%; height: 100%;}
    .link{display: none;}
    footer{width: 100%; height: 100%;} 
    #footer .f_menu{display: none;}
    #footer .f_logo{display: none;}
}

 

모바일크기에서보는 웹페이지

 
 

<끝!>