2. 미디어 쿼리 : 다양한 뷰포트의 지원 김은옥 1 학습목표 : 여기서는 미디어 쿼리 작성방법, 뷰포트 지정 방법 등 을 살펴본다.

Presentation on theme: "2. 미디어 쿼리 : 다양한 뷰포트의 지원 김은옥 1 학습목표 : 여기서는 미디어 쿼리 작성방법, 뷰포트 지정 방법 등 을 살펴본다."— Presentation transcript:

1 2. 미디어 쿼리 : 다양한 뷰포트의 지원 김은옥 (probemedia@gmail.com) 1 학습목표 : 여기서는 미디어 쿼리 작성방법, 뷰포트 지정 방법 등 을 살펴본다.

2 목차  이장의 개요  내용 2

3 이장의 개요  미디어 쿼리는 CSS3 모듈 중 하나.  미디어 쿼리는 디바이스의 디스플레이 능력에 따라 CSS 스타일 지정 가능 3

4 이장의 개요  내용  반응형 웹 디자인에서 미디어쿼리가 중요한 이유  CSS3 미디어 쿼리를 구성하는 방법  테스트할 수 있는 디바이스 특징에 대한 이해  첫 CSS3 미디어 쿼리 작성하기  특정한 뷰포트에 CSS 스타일 규칙 적용  iOS 나 안드로이드 디바이스에서 미디어 쿼리 동작 4

5 미디어쿼리  미디어 쿼리 구문 작성 위치  CSS 파일 (.css) 에 기술 화면 크기별 CSS 를 1 개의 파일로 만들 경우 사용 – 책 59p  HTML 페이지의 태그에 기술 화면 크기별로 별도의 CSS 파일을 만들어 사용할 경우 – 책 60p 5

6 미디어쿼리  작성방법  CSS 파일 (.css) 에 기술 예 : @media screen and (max-width: 320px){}  HTML 페이지의 태그에 기술 예 : 6

7 반응형 디자인  첫번째 반응형 디자인  처음은 기존의 디자인으로 시작 고정폭 디자인 권장 : 작은 화면 디자인 -> 큰 화면 디자인 태그를 사용해서 header, navigation, sidebar, content, footer 영역을 나눔 66p 7

8 반응형 디자인  첫번째 반응형 디자인  실습 준비 – 66p [RWDHTML5CSS3_Chapt er2]- [basic_page_layout_AWT.h tml] 파일 열기 rwtest.html 파일 생성 [ 프로젝트 ] 선택 후 마우스 오른쪽 버튼 클릭 [New]-[HTML file]. 파일명 : rwtest.html basic_page_layout_AWT. html 의 6~55 라인 복사 rwtest.html 의 6~10 라인 을 블록 설정 후 붙여넣 기. 7 라인에서 type="text/css" 제거, href=“css/rwtest.css” rwtest.css 생성 [RWDHTML5CSS3_Ch apter2]-[css]-[main.css] 파일 복사 (ctrl+c) 후 붙 여넣기 (ctrl+v) 파일명은 rwtest.css 로 변경 8

9 반응형 디자인 9  첫번째 반응형 디자인  반응형 이미지 : 이미지를 작은 조각으로 처리 로딩 속도가 빨라짐  작은 뷰포트에서 콘텐트 클리핑 ( 잘리는 ) 문제 뷰포트가 960 픽셀 이하에서 화면 잘림 모바일 기기에서는 화면 축소 문제 발생 : 뷰포트 조정필요

10 반응형 디자인 10  다양한 크기의 뷰포트를 지원하기 위한 고정 디자인  태블릿용 미디어 쿼리 추가 @media screen and (max-width: 768px) {}  내비게이션 영역의 링크가 배경이미지를 벗어나는 문제 처 리 #navigation { padding-top: 20px;}  콘텐트 영역이 사이드바 아래에 표시되는 문제 처리 #content {float: right;}.sideBlock {float: left;}

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