CSS
HTML을 이용해서 전자문서를 만들 수 있었고, 해당 정보를 인터넷을 통해서 사람들이 볼 수 있도록 했다.
하지만 처음에는 HTML을 이용해서 문서를 만들수 있었지만 여러가지 불평들이 나옴.
나중엔 해당 문서를 웹페이지를 아름답게 표현하고 싶어함.
--> 웹 페이지를 아름답게 만들자!
1) CSS의 등장, 이점
등장배경
1. HTML은 너무나 중요하기 떄문에 HTML이 정보에 전념하게 하기위해서 HTML에게서 디자인적 요소를 뻇어옴
2. CSS를 통해 웹페이지를 디자인 하는 것이 HTML을 통해 디자인하는 것보다 효율적
이점
-- CSS의 사용으로 중복 제거
-- 웹페이지를 유지보수를 편리하게 하고, 가독성 증가
-- 효율적
-- <font> 태그는 이제 쓰지 않으니 머릿속에서 지워버리자!!
h1태그는 WEB이라는 글자가 제목이라는 중요한 정보를 알려주고
a태그는 WEB 이라는 글자가 링크라는 정보를 알려주지만
font태그는 red 색깔을 표현하는 디자인 요소를 표현할 뿐 어떠한 정보도 가지고 있지 않다.
-- style 태그는 HTML의 문법이면서 Style 태그 안쪽에 있는 내용은
CSS 문법에 맞게 해석해야해 라고 서버에 알림
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>생활코딩 WEB - CSS</title>
<style charset="utf-8">
a {
color: red;
}
</style>
</head>
<body>
<h1><a href="index.html"><font color="red">WEB</font></a></h1>
<ol>
<li><a href="1.html"><font color="red">HTML</font></a></li>
<li><a href="2.html"><font color="red">CSS</font></a></li>
<li><a href="3.html"><font color="red">JavaScript</font></a></li>
</ol>
<h2>CSS</h2>
<p>Cascading Style Sheets<u><strong>(css)</strong></u></p>
</body>
</html>
|
[CSS를 적용하는 방법]
- 속성을 통해 적용
- style 태그를 통해 적용
[css를 지배하는 두가지 토대]
1. 효과(속성)
2. 선택자(selector)
- class : 그룹핑하다. 하나로 묶는다.
- id : 하나만 지정할 수 있다.
[css의 우선순위 : 포괄적이지 않음 > 포괄적]
태그 < Class < ID
-- 속성(property)을 찾는 방법 : 웹사이트 검색 웹진에서 'css text center property' 정도로 검색한다.
-- 선택자를 찾는 방법 : 웹사이트 검색 웹진에서 'css selector'로 검색하면 선택자에 대해 설명을 찾을 수 있다.
[박스모델 : box model]
박스모델 : 중요한 개념이다.
CSS 하나하나를 BOX로 생각한다.
-- 제목태그는 화면전체를 쓰는것이 더 편하기 때문에 자동 줄바꿈이 된다.
|
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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*
block level element : 화면 전체 영역을 쓰는 태그
h1{
border-width : 5px;
border-color : red;
border-style :solid;
display : inline; /*inline으로 변경가능하다.
}
inline element : 자기자신의 부피만큼 영역을 쓰는 태그
a{
border-width : 5px;
border-color : red;
border-style :solid;
display : block; /*block으로 변경가능하다.
}
*/
/*중복 제거
h1, a {
border : 5px solid red;
}
*/
/*padding : 컨텐츠와 간격이 생김*/
/*CSS box model*/
/*CSS 하나하나를 BOX로 생각한다.*/
h1{
border : 5px solid red;
padding : 20px;
margin : 20px;
display: block;
width : 200px;
}
</style>
</head>
<body>
<h1>CSS</h1>
<h1>CSS</h1>
</body>
</html>
|
[grid : 그리드]
-- DIV는 아무런 의미가 없는 태그로 디자인 용도로 쓰인다.
DIV는 block level element
span은 inline element
-- 화면 전체 영역을 쓸건지 아닌지에 따라 두개의 태그 중에 결정하면 된다.
1fr : 화면전체를 쓰게 자동으로 조정해주는 단위
grid를 사용하면 좋은 점
-- 최신기술임
-- 현재사용해도 되는지 안되는지 데이터를 사용해서 확인해야 할 필요가 있다.
-- https://caniuse.com/ : 중요한 사이트
-- 현재 웹브라우저들이 얼마나 그 기술을 채택하고 있는가 통계를 보여주는 사이트
-- 연두색 : 부분적으로 지원하고 있다.
-- 녹색 : 쓸수있다.
-- 빨간색 : 동작하지 않는다.
|
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">
<title></title>
<style>
#grid{
border: 5px solid pink;
display : grid;
grid-template-columns: 150px 1fr;
}
div{
border : 5px solid gray;
}
</style>
</head>
<body>
<div id="grid">
<div>NAVIGATION</div>
<div>ARTTICLE</div>
</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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>생활코딩 WEB - CSS</title>
<style charset="utf-8">
body{
margin : 0;
}
a {
color : black;
text-decoration: none;
}
h1{
font-size: 45px;
text-align: center;
border-bottom : 1px solid gray;
margin : 0;
padding : 20px;
}
ol{
border-right: 1px solid gray;
width: 100px;
margin: 0;
padding:20px;
}
#grid ol{
padding-left: 33px;
}
#grid{
display: grid;
grid-template-columns: 150px 1fr;
}
#article{
padding-left: 25px;
}
</style>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<div id="grid">
<ol>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
<div id="article">
<h2>CSS</h2>
<p>Cascading Style Sheets<u><strong>(css)</strong></u></p>
</div>
</div>
</body>
</html>
|
[반응형 디자인과 미디어 쿼리 소개]
- 반응형 웹, 반응형 디자인
-- 화면의 크기에 따라서 웹페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀌게 하는 것
-- @media(조건){}
* 헤깔릴 수 있음 주의
|
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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
div{
border:10px solid green;
font-size:60px;
}
/*screen width > 800px : 화면의 크기가 800px 보다 크다면 아래 내용이 동작
@media(min-width:800px) {
div{
display:none;
}
}
*/
/*screen width < 800px : 화면의 크기가 800px보다 작다면 아래 내용이 동작*/
@media(max-width:800px) {
div{
display:none;
}
}
</style>
<body>
<div>
Responsive
</div>
</body>
</html>
|
[CSS 코드의 재사용]
css 코드는 1.html, 2.html, 3.html, index.html 모두 동일하게 사용
-- 중복의 제거를 위해 css 파일을 만들어 관리 : style.css
-- 캐싱 (네트워크를 안쓰기 때문에 트래픽(사용료)를 안쓸 수 있다. 웹페이지를 더 빠르게 표출할 수 있다.)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>생활코딩 WEB - JavaScript</title>
</head>
<link rel="stylesheet" href="style.css">
<body>
<h1><a href="index.html">WEB</a></h1>
<div id="grid">
<ol>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
<div id="article">
<h2>JavaScript</h2>
<p>JavaScript Starting<u><strong>(Yeap!!)</strong></u></p>
</div>
</div>
</body>
</html>
|
CSS 코드 (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
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
|
body{
margin : 0;
}
a {
color : black;
text-decoration: none;
}
h1{
font-size: 45px;
text-align: center;
border-bottom : 1px solid gray;
margin : 0;
padding : 20px;
}
ol{
border-right: 1px solid gray;
width: 100px;
margin: 0;
padding:20px;
}
#grid ol{
padding-left: 33px;
}
#grid{
display: grid;
grid-template-columns: 150px 1fr;
}
#article{
padding-left: 25px;
}
/*screen width < 800px*/
@media (max-width:800px) {
#grid{
display: block;
}
ol{
border-right: none;
}
h1{
border-bottom : none;
}
}
|
수업을 마치며
--> 배운 것을 토대로 웹페이지를 꾸며보자!!! 어떤 웹페이지를 만들어보는게 좋을까 ㅎㅎ
'생활코딩 > WEB' 카테고리의 다른 글
| 4) WEB - Ajax(2) : 페이지 구현 (0) | 2020.07.05 |
|---|---|
| 4) WEB - Ajax(1) (0) | 2020.07.01 |
| 3) WEB - Javascript (0) | 2020.06.22 |
| 1) WEB - HTML (0) | 2020.06.16 |
