Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 2099dff

Browse files
redsome77-wqredsome77-wq
committed
0305 백업
1 parent ca930f0 commit 2099dff

5 files changed

Lines changed: 199 additions & 1 deletion

File tree

‎README.md‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -233,4 +233,12 @@
233233
`-webkit-background-clip: text;
234234
-webkit-text-fill-color: transparent;
235235
background-clip: text;
236-
color: transparent;`
236+
color: transparent;`
237+
## 반응형웹 설정
238+
* 설계방향 결정 /// 1. 모바일 -> pc 점점 크게
239+
* ----------- /// 2. pc -> 모바일 점점 작게
240+
* `@keyframes 애니메이션 이름 {애니메이션 규칙}` -> animation
241+
* `@media screen and (규칙) {실행명령어}`
242+
* `@media screen and (w320~) {320 이상일때 재배열 명령어}`
243+
* `@media screen and (w760~) {760 이상일때 재배열 명령어}`
244+
* `@media 규칙괄호()` 안에는 세미콜론(;) 금지

‎responsive1.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html lang="ko">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="description" content="">
6+
<meta name="keywords" content="">
7+
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
9+
<title>반응형 공부-1</title>
10+
<link rel="stylesheet" href="./styles/reset.css">
11+
<link rel="stylesheet" href="./styles/responsive1.css">
12+
</head>
13+
<body>
14+
<div id="wrap">
15+
<header>header</header>
16+
<main>main</main>
17+
<footer>footer</footer>
18+
</div>
19+
<!--
20+
반응형 표준 디바이스 크기(w) // 디자인에 따라 값 다를 수 있음
21+
* 320 이상일때 해당 디바이스에 맞는 모습으로 재배열함
22+
* 320~ (모바일 최소기준 (아이폰5))
23+
* 480~
24+
* 760~ (태블릿)
25+
* 960~
26+
* 1200~ (데스크탑)
27+
* 1600~
28+
-->
29+
</body>
30+
</html>

‎responsive2.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="ko">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="description" content="">
6+
<meta name="keywords" content="">
7+
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
9+
<title>반응형 공부-2</title>
10+
<link rel="stylesheet" href="./styles/reset.css">
11+
<link rel="stylesheet" href="./styles/responsive2.css">
12+
</head>
13+
<body>
14+
<div id="wrap">
15+
<header>
16+
<h1>logo</h1>
17+
<nav>nav</nav>
18+
</header>
19+
<main>
20+
<section>s1</section>
21+
<section>s2</section>
22+
</main>
23+
<footer>footer</footer>
24+
</div>
25+
</body>
26+
</html>

‎styles/responsive1.css‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
#wrap {
2+
border: 1px solid #000;
3+
}
4+
#wrap > * {
5+
max-width: 1300px;
6+
/* 최대 1300까지만 커지고 그 이하는 자동 가변형(%) // 화면 축소해도 가로스크롤 생기지 않음 */
7+
min-width: 320px;
8+
/* 전체 범위값 중 가장 큰값 & 가장 작은값은 미리 세팅하기 */
9+
margin: 0 auto;
10+
display: flex; flex-flow: row nowrap;
11+
justify-content: center; align-items: center;
12+
font-size: 3.0rem;
13+
}
14+
#wrap header {
15+
background-color:turquoise;
16+
height: 80px;
17+
}
18+
#wrap main {
19+
background: linear-gradient(pink, violet, brown);
20+
height: 300vh;
21+
}
22+
#wrap footer {
23+
background-color:sandybrown;
24+
height: 120px;
25+
}
26+
/* 반응형웹 설정 */
27+
/* 설계방향 결정 /// 1. 모바일 -> pc 점점 크게(min-width) */
28+
/* ----------- /// 2. pc -> 모바일 점점 작게(max-width) */
29+
/* @keyframes 애니메이션 이름 {애니메이션 규칙} -> animation */
30+
/* @media screen and (규칙) {실행명령어} */
31+
/* @media screen and (w320~) {320 이상일때 재배열 명령어} */
32+
/* @media screen and (w760~) {760 이상일때 재배열 명령어} */
33+
/* @media 규칙괄호() 안에는 세미콜론(;) 금지 */
34+
/* 반응형 제작 주의사항 */
35+
/* 1. @media 규칙 선언전 기존css에서 유지하고 싶은건 쓰지 않기 */
36+
/* 2. @media 규칙 선언후 재배열하고 싶은 css는 반드시 기본css에서 어느 선택자에 어떤 값으로 썼는지 확인하고 동일한 선택자에 동일 속성으로 값만 바꿔서 입력하기 */
37+
@media screen and (max-width:1299px) {
38+
#wrap > * {
39+
flex-flow:column nowrap;
40+
font-size: 2.0rem;
41+
}
42+
#wrap header {
43+
background-color: yellow;
44+
}
45+
#wrap main {
46+
background: linear-gradient(rgb(209, 240, 203), rgb(150, 212, 162), rgb(42, 165, 138))
47+
}
48+
#wrap footer {
49+
background-color:chartreuse;
50+
}
51+
} /* 1299 미만일때 {} 안의 선택자와 값 실행 */
52+
/* ~ w1299 */
53+
/* 801~1299 */
54+
/* 새로운 규칙은 기존 규칙 바깥에서 생성 */
55+
@media screen and (max-width:800px) {
56+
#wrap > * {
57+
align-items:flex-end;
58+
font-size: 1.0rem;
59+
}
60+
}
61+
/* 721~800 */
62+
@media screen and (max-width:720px) {
63+
#wrap {
64+
display: flex;
65+
flex-flow: row wrap;
66+
}
67+
#wrap > * {
68+
max-width: 100%;
69+
min-width: min-content;
70+
}
71+
#wrap header {
72+
width: 200px;
73+
height: 100vh;
74+
}
75+
#wrap main {
76+
width: calc(100% - 200px);
77+
height: 100vh;
78+
}
79+
#wrap footer {
80+
width: 100%;
81+
}
82+
} /* 320~720 */

‎styles/responsive2.css‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
/* mobile -> pc 점점 크게 */
2+
#wrap {
3+
background-color: rosybrown;
4+
margin: 0 auto;
5+
padding: 0 15px;
6+
min-width: 320px;
7+
max-width: 1440px;
8+
}
9+
#wrap > * {
10+
border: 1px solid #000;
11+
}
12+
#wrap header {
13+
height: 60px;
14+
display: flex; flex-flow: row nowrap;
15+
justify-content: space-between; align-items: center;
16+
}
17+
#wrap header h1 {}
18+
#wrap header nav {}
19+
#wrap main {
20+
}
21+
#wrap main section {
22+
background-color:antiquewhite;
23+
line-height: 400px; /* 높이 가운데 배치하기 -> 요소가 1줄일때만 가능*/
24+
text-align: center;
25+
}
26+
#wrap main section:nth-child(1) {}
27+
#wrap main section:nth-child(2) {}
28+
#wrap footer {
29+
line-height: 100px;
30+
text-align: center;
31+
}
32+
@media screen and (min-width:481px) { /* 480 이상일때 */
33+
#wrap {
34+
padding: 0 30px;
35+
min-width: 480px;
36+
}
37+
#wrap main {
38+
display: flex; flex-flow: row nowrap;
39+
}
40+
#wrap main section {
41+
width: 50%;
42+
}
43+
} /* 480~819 */
44+
@media screen and (min-width:820px) { /* 820 이상일때 */
45+
#wrap {
46+
min-width: 820px;
47+
}
48+
#wrap header {
49+
flex-flow: column nowrap;
50+
justify-content: center;
51+
}
52+
} /* 820~1440 */

0 commit comments

Comments
 (0)