20220403 - WEB JavaScript 26
- 반응형 웹디자인: 화면의 크기에따라 웹페이지 요소들이 반응해서 최적화된 모양으로 바뀌게 하는 것
이를 CSS를 통해 구현하는 핵심적인 개념 미디어 쿼리
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{
border:10px solid pink;
font-size:60px;
}
@media(min-width:800px) { /*= screen width > 800px
자매품 max-width*/
div {
display:none;
}
}
</style>
</head>
<body>
<div>
Responsive
</div>
</body>
</html>
|
- 예제에 적용해보기
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
<!DOCTYPE html> /*html으로 읽으라는 뜻*/
<html>
<head>
<meta charset="utf-8" /> /*utf-8로 만들어졌으니까 이걸로 열어줘*/
<title>Closer</title>
<style>
a {
color: black;
text-decoration: none;
}
h2 {
text-align: center;
border-bottom: solid gray 1px; /*내가 처음에 짠거: border-bottom-style:solid;*/
padding: 20px;
margin: 0;
}
#grid ol { /*ol으로 지정하는 것 보다 명확함, 조상이 #grid인 ol*/
border-right: solid gray 1px;
width: 200px; /*바보 ㅎㅎ..padding-right:0px;*/
margin-top: 0;
padding-top: 20px; /*마진이 패딩을 감싸는 구조임 기억하기!*/
padding-right: 25px;
}
body {
margin: 0; /*화면을 꽉 채우는 선 만들기*/
}
#grid {
display: grid; /*뺴먹으면 안됨*/
grid-template-columns: 250px 1fr;
/*column 열이라는 뜻. 찻반쩨 열(순서)는 메뉴*/
}
#article {
padding-left: 35px;
}
@media(max-width:800px){
#grid{
display: block;
}
#grid ol {
border-right: none;
}
h2 {
border-bottom: none;
}
}
</style>
</head>
<body>
<h2><a href="index.html" style="color:black;">Best 3 movies I love</a></h2>
<div id="grid">
<ol>
<li><a href="closer.html">Closer</a></li>
<li><a href="her.html">Her</a></li>
<li><a href="apple.html">You Are the Apple of My Eye</a></li>
</ol>
<div id="article">
<h3>CLOSER</h3>
<p>
<img src="closer.jfif" width="50%"><br>
A movie that feels different with age. <br>
I sympathized with Dan when I was a teenager, Alice when I was in my 20s and Anna when I was in my 30s.
</p>
</div>
</div>
</body>
</html>
|
- 현재까지 배운 내용을 다른 페이지에도 적용하기
head의 style 코드를 그대로 붙여넣더라도 body 구조가 달라서 다르게 적용된다.
style코드가 중복되는 부분을 일일이 추가, 수정하는 것은 상당히 번거롭고 비효율적인 과정
이러한 과정 없이 일괄적으로 적용할 수 있는 방법
css파일을 생성한다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!DOCTYPE html> /*html으로 읽으라는 뜻*/
<head>
<meta charset="utf-8" /> /*utf-8로 만들어졌으니까 이걸로 열어줘*/
<title>Closer</title>
<link rel="stylesheet" href="style.css"> /*style태그는 이 파일을 참고하라는 뜻*/
</head>
<body>
<h2><a href="index.html" style="color:black;">Best 3 movies I love</a></h2>
<div id="grid">
<ol>
<li><a href="closer.html">Closer</a></li>
<li><a href="her.html">Her</a></li>
<li><a href="apple.html">You Are the Apple of My Eye</a></li>
</ol>
<div id="article">
<h3>CLOSER</h3>
<p>
<img src="closer.jfif" width="50%"><br>
A movie that feels different with age. <br>
I sympathized with Dan when I was a teenager, Alice when I was in my 20s and Anna when I was in my 30s.
</p>
</div>
</div>
</body>
</html>
|
style.css
a {
color: black;
text-decoration: none;
}
h2 {
text-align: center;
border-bottom: solid gray 1px; /*내가 처음에 짠거: border-bottom-style:solid;*/
padding: 20px;
margin: 0;
}
#grid ol { /*ol으로 지정하는 것 보다 명확함, 조상이 #grid인 ol*/
border-right: solid gray 1px;
width: 200px; /*바보 ㅎㅎ..padding-right:0px;*/
margin-top: 0;
padding-top: 20px; /*마진이 패딩을 감싸는 구조임 기억하기!*/
padding-right: 25px;
}
body {
margin: 0; /*화면을 꽉 채우는 선 만들기*/
}
#grid {
display: grid; /*뺴먹으면 안됨*/
grid-template-columns: 250px 1fr;
/*column 열이라는 뜻. 찻반쩨 열(순서)는 메뉴*/
}
#article {
padding-left: 35px;
}
@media(max-width:800px) {
#grid {
display: block;
}
#grid ol {
border-right: none;
}
h2 {
border-bottom: none;
}
}
데이터(인터넷사용료), 일괄적용 면에서는 css파일이 더 효율적
논리적으로는 트래픽과 관련(네트워크적인 측면)해서는 html파일 안에 직접 style태그를 놓는 것이 더 효율적이지만
캐싱이라는 테크닉때문에 그렇지만도 않다.
style.css 파일이 바뀌지않는한 컴퓨터에 저장해둔 파일을 사용하기 때문.
중복을 줄여 가독성과 재사용성을 높이고 유지보수를 편리하게 할 수 있다.
- CSS 마무리
선택자와 속성을 많이 알 수록 좋다.
공부한 것을 사용해보고 찾아보고 심도있게 제작해볼 것
다음 공부 순서: Java! 사용자 반응형 웹사이트
공부 자료: https://opentutorials.org/