- 반응형 웹
: 웹 페이지 하나로도 데스크톱, 태블릿PC, 스마트폰에 맞게 디자인이 자동으로 반응해서 변경됨
미디어 쿼리 (media query)를 사용해 개발
1. 반응형 웹 설정
1) meta 태그
<head> </head> : 브라우저에게 지시
<meta> 태그 : 웹 페이지에 추가 정보 제공
<meta name="title" content="ITCookbook HTML5 프로그래밍을 위한 페이지">
<mate name="description" content="meta 태그의 title 속성과 description 속성입니다">
meta : 정보를 설명하기 위한 부가적인 정보
2) 뷰포트(viewport) 태그
-
뷰포트: 눈에 보이는 영역
-
viewport meta 태그
: name 속성에 viewport가 입력된 meta 태그, PC 브라우저에는 영향X -
viewport meta 태그에 입력할 수 있는 값
-width: 화면 너비
-height: 화면 높이
-initial-scale: 초기 확대 비율
-user-scalable: 확대 및 축소 가능 여부
-minimum-scale: 최소 축소 비율
-maximum-scale: 최대 축소 비율
-target-densitydpi: DPI 지정
<meta name="viewport" content="user-scalable=no, initial-scale=1" />user-scalable: 확대, 축소 X
initial-scale: 초기 출력 크기 기본값 설정
3) 미디어 쿼리
- 미디어 쿼리 사용 방법
-
@media
- @-규칙 : 스타일시트 내부에서 특정한 규칙을 표현하는 데 사용
- CSS 영역 내부
@media (<미디어쿼리>) { <CSS 코드> } -
media 속성
- link 태그에 입력해서 해당 미디어 쿼리 조건에 맞는 장치에서만 CSS 파일을 불러옴
- CSS 파일 有
<link rel="stylesheet" href="<파일이름>" media="<미디어쿼리>">
@media 규칙
<style>
@media screen {
body {
background-color: red;
}
}
@media print {
body {
background-color: green;
}
}
</style>media 속성
<head>
<title>Media Atttibute</title>
<link rel="stylesheet" href="36-2Screen.css" media="screen" />
<link rel="stylesheet" href="36-3Print.css" media="print" />
</head>/* 36-2Screen.css */
@media screen {
body {
background-color: red;
}
}/* 36-3Print.css */
@media print {
body {
background-color: green;
}
}
- 지원하는 미디어 타입
- all : 모든 장치
- screen : 화면
- handheld : 손으로 들고 다니는 작은 장치 ···
- 미디어 타입 연산자
- only : 해당 장치에서만
- not : 해당 장치를 제외한
- 미디어 특징
- width : 화면 너비
- orientation : 장치 방향 (가로/세로) ···
<!-- 화면이면서 최대 너비가 767px일 때 phone.cee 파일 불러옴 -->
<link rel="stylesheet" href="phone.css" media="screen and (max-width: 767px)" />
<!-- 화면이면서 최소 너비가 768px, 최대 너비가 959px일 때 tablet.css 파일 불러옴 -->
<link rel="stylesheet" href="tablet.css" media="screen and (min-width: 768px) and (max-width: 959px)" />
<!-- 화면이면서 최소 너비가 960px일 때 desktop.css 파일 불러옴 -->
<link rel="stylesheet" href="desktop.css" media="screen and (min-width: 960px)" />- 스마트폰, 태블릿PC, 데스크톱 구분
<head>
<title>Media Feature</title>
<meta
name="viewport"
content="user-scalable=no, initial-scale=1, maximum-scale=1"
/>
<style>
/* 스마트폰 */
@media screen and (max-width: 767px) {
body {
background-color: red;
}
}
/* 태블릿 */
@media screen and (min-width: 768px) and (max-width: 959px) {
body {
background-color: green;
}
}
/* 데스크톱 */
@media screen and (min-width: 960px) {
body {
background-color: blue;
}
}
</style>
</head>
- 화면 방향 전환
<head>
<title>Orientation</title>
<meta
name="viewport"
content="user-scalable=no, initial-scale=1, maximum-scale=1"
/>
<style>
@media screen and (orientation: portrait) {
body {
background-color: red;
}
}
@media screen and (orientation: landscape) {
body {
background-color: green;
}
}
</style>
</head>
2. 반응형 웹 패턴
HTML 태그 구성은 모바일 장치 기준으로 함 (mobile-first)
- 기준 (Breakpoint)
- 넓 - 왼 / 좁 - 위
- 넓 - 오 / 좁 - 위
- 넓 - 왼 / 좁 - 아래
- 넓 - 오 / 좁 - 아래
1) 넓왼/좁위
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 960px;
margin: 0 auto;
oveflow: hidden;
}
#menu {
width: 260px;
float: left;
}
#section {
width: 700px;
float: right;
}
li {
list-style: none;
}
@media screen and (max-width: 767px) {
body {
width: auto;
}
#menu {
width: auto;
float: none;
}
#section {
width: auto;
float: none;
}
}
</style>
2) 넓오/좁위
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 960px;
margin: 0 auto;
oveflow: hidden;
}
#menu {
width: 260px;
float: right;
}
#section {
width: 700px;
float: left;
}
li {
list-style: none;
}
@media screen and (max-width: 767px) {
body {
width: auto;
}
#menu {
width: auto;
float: none;
}
#section {
width: auto;
float: none;
}
}
</style>
