[HTML 5 반응형 웹디자인_2015.03.26] 4. 미디어 쿼리

[ 들어가면서...]

ㅇ 미디어쿼리

    - 화면의 크기에 반응하는 페이지 배치  => 화면의 크기에 반응하는 디자인에 필요

    - CSS3 모듈 중 하나

    - device의 display 능력에 따라 CSS3 스타일 지정

    - CSS 파일내의 가장 마지막에 기술

ㅇ CSS파일의 작성 순서
    1. 공통사항을 작성
    2. 특정태그에만 적용하는 사항을 작성
    3. 미디어쿼리를 작성 - 특정태그가 화면크기에따라 달라지는 부분을 작성

 

[ 미디어 퀴리 구문 작성 위치 ]

ㅇ CSS파일(.css)에 @media로 기술 <-권장
     - 화면 크기별 CSS를 1개의 파일로 만들 경우 사용 ? p.59

     - 문법: @media 조건      예) @media screen and (max-width: 320px){}

ㅇ HTML페이지의 <link>태그에 media속성에 기술
     - 화면 크기별로 별도의 CSS파일을 만들어 사용할 경우 ? p.60
     -  예: <link rel=“stylesheet” type=“text/css”  href=“theme.css” media=“screen and (max-width: 320px)”>
     - 문법: media="조건"     예) media=“screen and (max-width: 320px)”

 

[ 미디어 퀴리 구문]

ㅇ 디바이스

     - all - 모든 디바이스 대상
     - screen - 화면
     - print - 인쇄 미리보기
ㅇ 화면의 너비

     -  min-width  - 최소크기(너비) : ~부터(이상)
     -  max-width  - 최대크기(너비) : ~까지(이하)
     -  예) 화면의 너비가 768px까지
         @media screen and (max-width: 768px) {//적용할 스타일}

        예) 화면의 너비가 1000px 부터 ~
         @media screen and (min-width: 1000px){//적용할 스타일}

 

ㅇ CSS파일을 작성하고 HTML페이지에 적용(p.59)
       ① HTML페이지 작성 - a.html
       ② a.html에 CSS파일(css/t.css)을 적용하는 <link>태그 추가       <link href="css/t.css" rel="stylesheet"/>
       ③ CSS파일작성 위치 : [css]폴더
           - [프로젝트]-[WebContent]를 선택 후 마우스 오른쪽 버튼을 눌러 [New]-[Folder]선택
           - [folder name]: css

       ④ CSS파일생성 : t.css
           - [프로젝트]-[WebContent]-[css] 를 선택 후 마우스 오른쪽 버튼을 눌러 [New]-[other]선택
           - [Web]-[CSS file]항목 선택
           - [file name] : t.css

 

[ 첫번째 반응형 디자인]

 

실습준비 - 예제 폴더를 몽땅 끌어온다.

 

ㅇ 고정형 디자인 작성
  - 기본적인 html, css
  - 한줄에 여러개의 태그를 배치하는 경우: 네비게이션 메뉴
    => 화면의 크기에 따라 자연스럽게 흐르듯이 배치
      -> 화면의 크기에 따라 한줄에 배치되는 메뉴의 수의 달라짐, 다음줄로 나머지 메뉴가 마저 배치됨
    * float 사용
      ① float 지정 - float : 방향(left/right)
          float : left; - 왼쪽 정렬
          float : right; - 오른쪽 정렬

          예) content-right / sidebar-left

               .... veiw port 폭을 서서히 줄이면 sidebar도 left에서 right로 흐르듯이 재배치 된다.

                  but, 이런 흐름을 어느 시점에서 끊어줘야 한다.  이것이 float 해제
      ② float 해제 - clear : 방향(left/right/both)
          예)clear : both;

    * inline : <p> 태그와 달리 list 항목들을 좌우로 나란히 놓을 때 사용   예)menu

 

ㅇ 반응형 이미지 : 이미지를 작은 조각으로 처리, 로딩 속도가 빨라짐
    - background-repeat: repeat-x;
    -  background-image: url (../img/buntingSlice3Invert.png);

 

ㅇ 다양한 크기의 뷰포트를 지원하기 위한 고정 디자인
    -  태블릿용 미디어 쿼리 추가
       @media screen and (max-width: 768px) {}

ㅇ 내비게이션 영역의 링크가 배경이미지를 벗어나는 문제 처리
      #navigation {padding-top: 20px;}

ㅇ 콘텐트 영역이 사이드바 아래에 표시되는 문제 처리
     #content {float: right;}    .....id
     .sideBlock {float: left;}   .... class

 

ㅇ 지금까지 작성한 반응형 디자인의 문제점
   - 미디어쿼리가 좁은 뷰포트만 처리
    768px초과 ~960px
   - 뷰포트에서 콘텐트 짤림. 미디어쿼리 적용 안 됨.
    768px미만
   - 뷰포트에서 콘텐트 짤림.
  =>해결방안 : 고정형 레이아웃을 유동형 레이아웃으로 변경 ====    px -> %

 

CSS3 기능 - 트랜스 폼 http://www.panic.com/blog/ http://demo.marcofolio.net/3d_animation_css3/ http://designlovr.com/examples/dynamic_stack_of_index_cards/

 

*** 홈페이지를 들어가면 실제로 index.html. index.htm.... 또는 index.jsp가 실행되는 것이다.

      하지만 사이트를 입력할 때 index.***까지는 치지 않는다.

      이러한 경로의 결정은 web.xml에 선언되어 있다.

 

 

*** 색 선택

      색상지정 소스에 마우스를 올려 놓으면 색상을 지정할 수 있는 박스가 자동으로 나타난다.