Daum 웹표준을다루다 Web Standards Darum

반응형 웹 적용방법

• 외부 CSS 파일을 조건에 다라 불러오는 방법

  < link rel="stylesheet" media="screen and (min-width: 640px)" href="example1.css">
  < link rel="stylesheet" media="screen and (min-width: 1024px)" href="example2.css">
  
  <!-- 화면 너비가 640px 이상이면 example1.css 를 로드, 1024px 이상이면 example2.css 도 같이 로드함 -->

• style 태그를 이용하는 방법

  < style type="text/css" media="screen and (min-width: 640px)">
  body { background-color: #000 }
  < /style >
   
  < style type="text/css" media="screen and (min-width: 1024px)">
  body { background-color: #fff }
  < /style >
   
  <!-- 화면 너비가 640px 이상이면 배경색이 검정, 1024px 이상이면 배경색이 흰색으로 캐스캐이딩 됨 -->

• css파일내에서 사용하는 방법

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

  적용사이트 :
  • 다룸 http://darum.daum.net/
  • 모바일 미디어다음 http://m.media.daum.net/m/media/
  • 다음탑 http://m.daum.net/
  • 스토리볼 http://storyball.daum.net/

• 브라우저의 UA(userAgent)값에 따라 CSS파일을 분기 처리하여 내려줍니다.
  • userAgent 문자열은 홈페이지를 만들때, 접속하는 사용자의 웹 브라우저 종류, 버전, 또는 모바일 장비에서 접속 했는지 등을 알고자 할 때 분석되는 문자열입니다.
• PC브라우져 창크기를 변화해도 화면이 반응하지 않으며 해당기기에 최적화된 화면만 확인 할 수 있다
  • IE 6~8 을 위한 JS라이브러리가 별도로 필요하지 않음
• UA분기를 이용한 모바일과 테블릿 환경에서 미디어쿼리를 다시 사용할 수 있어서 테블릿의 가로와 세로를 다르게 구현하거나 패블릿에서 테블릿의 화면을 보이게 처리할 수 도 있다

• 유동형 그리드 (fluid grids)
  • 반응형 웹 이전부터 사용되어 온, 그리드 시스템과 달리 EM 등이 제안하는 유동형 그리드는 고정된 PX가 아닌 em이나 %를 사용합니다.
  • Tiny Tweaks 방식으로 예시) 검색결과 화면
• 유동형 이미지 (fluid/flexible images)
  • 유동형 그리드와 마찬가지로, 고정된 PX가 아닌 em과 %를 이용하여 접근하는 방법으로, 특히 이 경우 max-width를 사용하고, 이를 처리하지 못하는 ie6~ie7의 경우 jabascript를 사용합니다.
• javascript를 통한 반응형 레이아웃 (responsive layouts) 대응
  • 스크린 사이즈 단계별 스타일을 하나의 CSS내에 class로 분리 구성하고 javascript를 사용하여 브라우져의 뷰포트 사이즈를 체크하여 최상위 요소에 해당 class명을 변경하여 CSS를 캐스케이딩합니다.

지금까지 "반응형 웹이란?"에 대해 살펴봤습니다.
이후 반응형웹 레이아웃에 대해 공유드리도록 하겠습니다.
기대 많이 해주세요~ 감사합니다.