2. 미디어 쿼리 : 다양한 뷰포트의 지원 김은옥 1 학습목표 : 여기서는 미디어 쿼리 작성방법, 뷰포트 지정 방법 등 을 살펴본다.
목차 이장의 개요 내용 2
이장의 개요 미디어 쿼리는 CSS3 모듈 중 하나. 미디어 쿼리는 디바이스의 디스플레이 능력에 따라 CSS 스타일 지정 가능 3
이장의 개요 내용 반응형 웹 디자인에서 미디어쿼리가 중요한 이유 CSS3 미디어 쿼리를 구성하는 방법 테스트할 수 있는 디바이스 특징에 대한 이해 첫 CSS3 미디어 쿼리 작성하기 특정한 뷰포트에 CSS 스타일 규칙 적용 iOS 나 안드로이드 디바이스에서 미디어 쿼리 동작 4
미디어쿼리 미디어 쿼리 구문 작성 위치 CSS 파일 (.css) 에 기술 화면 크기별 CSS 를 1 개의 파일로 만들 경우 사용 – 책 59p HTML 페이지의 태그에 기술 화면 크기별로 별도의 CSS 파일을 만들어 사용할 경우 – 책 60p 5
미디어쿼리 작성방법 CSS 파일 (.css) 에 기술 예 screen and (max-width: 320px){} HTML 페이지의 태그에 기술 예 : 6
반응형 디자인 첫번째 반응형 디자인 처음은 기존의 디자인으로 시작 고정폭 디자인 권장 : 작은 화면 디자인 -> 큰 화면 디자인 태그를 사용해서 header, navigation, sidebar, content, footer 영역을 나눔 66p 7
반응형 디자인 첫번째 반응형 디자인 실습 준비 – 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 첫번째 반응형 디자인 반응형 이미지 : 이미지를 작은 조각으로 처리 로딩 속도가 빨라짐 작은 뷰포트에서 콘텐트 클리핑 ( 잘리는 ) 문제 뷰포트가 960 픽셀 이하에서 화면 잘림 모바일 기기에서는 화면 축소 문제 발생 : 뷰포트 조정필요
반응형 디자인 10 다양한 크기의 뷰포트를 지원하기 위한 고정 디자인 태블릿용 미디어 쿼리 screen and (max-width: 768px) {} 내비게이션 영역의 링크가 배경이미지를 벗어나는 문제 처 리 #navigation { padding-top: 20px;} 콘텐트 영역이 사이드바 아래에 표시되는 문제 처리 #content {float: right;}.sideBlock {float: left;}
반응형 디자인 11 지금까지 작성한 반응형 디자인의 문제점 미디어쿼리가 좁은 뷰포트만 처리 768px 초과 ~960px 뷰포트에서 콘텐트 짤림. 미디어쿼리 적용 안 됨. 768px 미만 뷰포트에서 콘텐트 짤림. 해결방안 : 고정형 레이아웃을 유동형 레이아웃으로 변경 px -> %