반응형 웹 4/4

안녕하세요 다룸 입니다. 오늘은 "CSS @media queries (미디어 쿼리)를 이용한 반응형웹 적용"에 대해 공유드리려고 합니다.

CSS @media queries (미디어 쿼리)를 이용한 반응형웹 적용

1안 : Mobile → Tablet → PC

PC의 모든 브라우저가 미디어쿼리를 지원하지 않음에 따라, 미디어쿼리를 지원하지 않는 IE 6~8 에서는 모바일 화면이 기본으로 노출되버림.
해결책은 다음과 같음.

• 모바일용 CSS 코드를 먼저 작성하고 미디어쿼리로 감싸지 않음.
• IE 6~8 을 위한 JS 라이브러리

• CSS 코딩순서 및 미디어 쿼리 분기점 (레이아웃 변경 포인트)

  /* 1. 공통 (Reset, Common) */
   
  /* 2. 모바일 (뷰포트너비 640px 미만) */
  .sample {background-color:black}
   
  /* 3. 패블릿 가로모드/태블릿 (뷰포트 너비 640ox 이상) */
  @media all and (min-width:640px) {
      .sample {background-color:red}
  }
   
  /* 4. PC (해상도 1024px 이상) */
  @media all and (min-width:1024px) {
      .sample {background-color:green}
  }

  • 디자인에 따라 미디어쿼리 분기점은 조정 가능.
• IE 6~8 을 위한 JS 라이브러리

  < head>
  <!--[if lt IE 9]>
  	<script type="text/javascript" src="respond.min.js"></script>
  <![endif]-->
  < /head>
   
  <!-- respond.min.js 라이브러리를 사용하면 IE 6~8 브라우저도 미디어쿼리를 해석할 수 있다. (라이센스: MIT.) -->>

  • ie 6~8 Media Queries 대응을 위한 스크립트 - https://github.com/scottjehl/Respond/
  • respond.min.js 유의사항
    • 로컬 환경에서 동작하지 않음.
    • 미디어쿼리 작성시 all and 키워드를 생략하면 동작하지 않음.

      @media all and (조건문){실행문}

  • 페이지가 무거운 경우 미디어쿼리 구문 안쪽 코드가 늦게 표시되어 IE 6~8 브라우저에서 모바일 화면이 잠깐 노출될 수 있음.

2안 : Mobile 세로(Portrait) → Mobile 가로(Landscape) → Tablet 세로(Portrait) → Tablet 가로(Landscape) → PC

• CSS 코딩순서 및 미디어 쿼리 분기점 (레이아웃 변경 포인트)

  /* 1. 공통 (Reset, Common) */
   
  /* 2. Mobile 세로(Portrait) (해상도 640px 이하) */
  .sample {background-color:black}
   
  /* 3. Mobile 가로(Landscape) (해상도 640px 이상) */
  @media all and (min-width:640px) and (orientation:landscape){
      .sample {background-color:green}
  }
   
  /* 4. Tablet 세로(Portrait) (해상도 768x 이상) */
  @media all and (min-width:768px) and (orientation:portrait){
      .sample {background-color:red}
  }
   
  /* 5. Tablet 가로(Landscape) (해상도 1024px 이하) */
  @media all and (min-width:1024px) and (orientation:landscape){
      .sample {background-color:blue}
  }
   
  /* 6. PC (해상도 1025px 이상) */
  @media all and (min-width:1025px){
      .sample {background-color:yellow}
  }

주의사항
해상도 1024px 이하인 PC화면에서는 Tablet화면이 노출된다.
이를 방지하고자 UA(userAgent)값으로 PC화면에서 Tablet화면이 노출이 안되게 작업합니다.

/* 4. Tablet 세로(Landscape) (해상도 768x 이상) */
@media all and (min-width:768px) and (orientation:portrait){
    html:not(.pc) .sample {background-color:red}
}
 
/* 5. Tablet 가로(Landscape) (해상도 1024px 이하) */
@media all and (min-width:1024px) and (orientation:landscape){
    html:not(.pc) .sample {background-color:blue}
}
						

3안 : PC → Tablet → Mobile

미디어쿼리를 지원하지 않는 IE 6~8 에서도 PC 화면이 기본으로 보이므로 문제되지 않습니다.

• CSS 코딩순서 및 미디어 쿼리 분기점 (레이아웃 변경 포인트)

  /* 1. 공통 (Reset, Common) */
   
  /* 2. PC (해상도 1024px 이상) */
  .sample {background-color:black}
   
  /* 3. 패블릿 가로모드/태블릿 (뷰포트 너비 1024px 이하) */
  @media all and (max-width:1024px) {
      .sample {background-color:red}
  }
   
  /* 4. 모바일 (해상도 640px 이하) */
  @media all and (max-width:640px) {
      .sample {background-color:green}
  }

4안 : Mobile 세로(Portrait) → Mobile 가로(Landscape)

• CSS 코딩순서 및 미디어 쿼리 분기점 (레이아웃 변경 포인트)

  /* 1. 공통 (Reset, Common) */
   
  /* 2. Mobile 세로(Portrait) (해상도 640px 이하) */
  .sample {background-color:black}
   
  /* 3. Mobile 가로(Landscape) (해상도 640px 이상) */
  @media only screen and (min-width :640px) {
      .sample {background-color:green}
  }

지금까지 반응형웹 대해 살펴봤습니다.
이후 새로운 주제로 찾아뵙도록 하겠습니다.
감사합니다.

by. UI개발팀 smoothie