#
1. 반응형 웹 만들기
In
#
목차
1. 01 1.1. 미디어쿼리의 사용 p40 1.2. 서로 다른 크기의 박스를 가변 크기로 변환하기 p48 -1.2.0.0.0.1. 02-1_시작 -1.2.0.0.0.2. 02-1_완료 1.3. 가변마진,가변패딩 p52 1.3.1. 가변마진 -1.3.1.0.0.1. ex_01 1.3.2. 가변패딩 56 -1.3.2.0.0.1. ex_02 1.3.3. 가변패딩 58 -1.3.3.0.0.1. 02-2 1.3.4. 첫째마당 01-첫째마당/2장/실습/02_3 을 열어 직접 가변 패딩을 적용해본다 -1.3.4.0.0.1. 02-3_시작 -1.3.4.0.0.2. 02-3_완료
1.4. 가변미디어 73p 1.4.1. 가변이미지 -1.4.1.0.0.1. ex_11 1.4.2. 가변비디오 75p -1.4.2.0.0.1. ex_12 -1.4.2.0.0.2. ex_13(fitvids)
1.5. 미디어쿼리 80p 1.5.1. Media Query의 기본 문법 1.5.1.1. @media 규칙
1.5.2. 미디어 유형 1.5.3. 조건문 1.5.4. 적용하기1 -1.5.4.0.0.1. ex_01 1.5.5. 적용하기2 -1.5.5.0.0.1. 03-1_시작 -1.5.5.0.0.2. 03-1_완료
1.6. 뷰포트 91p
#
1. 01
#
1.1. 미디어쿼리의 사용 p40
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<title>Document</title>
<style></style>
</head>
<body></body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<title>Document</title>
<style>
@media all and (min-width: 320px) {
body {
background: #e65d5d;
}
}
@media all and (min-width: 768px) {
body {
background: #2dcc70;
}
}
@media all and (min-width: 960px) {
body {
background: #6fc0d1;
}
}
</style>
</head>
<body></body>
</html>
#
1.2. 서로 다른 크기의 박스를 가변 크기로 변환하기 p48
#
1.2.0.0.0.1. 02-1_시작
#
1.2.0.0.0.2. 02-1_완료
#
1.3. 가변마진,가변패딩 p52
#
1.3.1. 가변마진
#
1.3.1.0.0.1. ex_01
#
1.3.2. 가변패딩 56
#
1.3.2.0.0.1. ex_02
#
1.3.3. 가변패딩 58
#
1.3.3.0.0.1. 02-2
#
1.3.4. 첫째마당 01-첫째마당/2장/실습/02_3 을 열어 직접 가변 패딩을 적용해본다
#
1.3.4.0.0.1. 02-3_시작
#
1.3.4.0.0.2. 02-3_완료
#
1.4. 가변미디어 73p
#
1.4.1. 가변이미지
#
1.4.1.0.0.1. ex_11
#
1.4.2. 가변비디오 75p
#
1.4.2.0.0.1. ex_12
#
1.4.2.0.0.2. ex_13(fitvids)
#
1.5. 미디어쿼리 80p
#
1.5.1. Media Query의 기본 문법
#
1.5.1.1. @media 규칙
@media 룰은 특정 조건에 따라 스타일을 적용하기 위해 사용됩니다.
```css
@media 미디어유형 and (조건문) {
/* 스타일 규칙들 */
실행문
}
```
#
1.5.2. 미디어 유형
#
1.5.3. 조건문
#
1.5.4. 적용하기1
#
1.5.4.0.0.1. ex_01
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
h1 {
display: none;
}
#wrap {
height: 500px;
margin: 0 auto;
border: 4px solid #000;
}
/* 화면 최소너비 320px 이상 #wrap 너비는 30%, 배경색은 #00d2a5*/
@media all and (min-width: 320px) {
#wrap {
width: 30%;
background: #00d2a5;
}
}
/* 화면 최소너비 768px 이상 #wrap 너비는 60%, 배경색은 #40b0f9*/
@media all and (min-width: 768px) {
#wrap {
width: 60%;
background: #40b0f9;
}
}
/* 화면 최소너비 1024px 이상 #wrap 너비는 90%, 배경색은 #f45750*/
@media all and (min-width: 1024px) {
#wrap {
width: 90%;
background: #f45750;
}
}
</style>
<!-- 미디어 쿼리를 적용하는 방법2 -->
<link rel="stylesheet" media="all and (min-width:500px)" href="style320px.css" />
</head>
<body>
<div id="wrap">
<h1>320</h1>
</div>
</body>
</html>h1 {
display: block;
}@media and all (min-width: 320px) {
}
@media and all (min-width: 768px) {
}
@media and all (min-width: 1024px) {
}min은 최소 또는 그 이상 이라는 뜻으로 점차 커지는 것을 의미 하기 때문에 반드시 작은 순서에서 큰 순서로 작성 해야 한다. 반대로 max는 최대 또는 그 이하 라는 뜻으로 점차 작아지는 것을 의미 하기 때문에 큰순서에서 작은 순서로 작성한다.
#
1.5.5. 적용하기2
브라우저의 크기가 320이상일때 박스의 가로를 100%
브라우저의 크기가 768이상일때 첫번째 박스부터 네번째 박스까지 너비를 50% col배치 줄바꿈 마지막 박스는 100%
브라우저의 크기가 1024이상일때 모든 박스 너빗값 20% row 배치
#
1.5.5.0.0.1. 03-1_시작
#
1.5.5.0.0.2. 03-1_완료
#
1.6. 뷰포트 91p
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
width=device-width: 뷰포트 너비를 디바이스의 화면 너비와 동일하게 설정합니다.
initial-scale=1: 초기 축척 비율(scale)을 1로 설정하여 기본 확대/축소 비율로 시작합니다.
minimum-scale=1: 최소 축척 비율(scale)을 1로 제한하여 사용자가 줌 아웃(축소)할 수 없도록 합니다.
maximum-scale=1: 최대 축척 비율(scale)을 1로 제한하여 사용자가 줌 인(확대)할 수 없도록 합니다.
user-scalable=no: 사용자가 화면을 줌 인/아웃 할 수 없도록 합니다.