CSS - basic
2020. 7. 27. 17:18ㆍWeb(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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS basic</title>
<link href="basic.css" rel="stylesheet">
<style type="text/css">
/*<!--2. Internal CSS - 임베드 방식--> */
.bl {color: blue;}
</style>
</head>
<body>
<h1>CSS basic</h1>
<p>
선택자{속성:속성값;} --- (선택자는 꾸며줄 대상, 주인공)
</p>
<h2>적용방식3가지</h2>
<ol>
<li class="gr">External CSS - 외부파일방식.<br>
CSS파일을 따로 만들어 독립시키고(*.css) html문서와 연결시켜 적용<br>
통일성있는 디자인 구성이 가능하며 유지보수가 용이</li>
<li class="bl">Internal CSS - 임베드 방식<br>
CSS 소스가 html문서의 안에 존재<br>
해당 html문서에만 적용됨
</li>
<li style="color: orange;">Inline CSS - 인라인방식<br>
CSS소스가 html문서의 해당 태그 뒤에 존재.<br>
통일성 있는 디자인 구성이 어렵고 유지보수시 불리.<br>
(적용시 나머지 방식보다 우선순위가 가장 높음)</li>
</ol>
<h2>CSS선택자 대표 3가지</h2>
<p class="pre">
선택자의 종류가 많으며 그 중 대표적인 종류가 아래와 같다
*는 전체 선택자로 말 그대로 웹문서의 모든 선택자를 불러올 수 있다.
</p>
<ul>
<li class="pre">tag선택자 - tag를 그대로 사용(abc)</li>
<li class="pre" id="li05">id선택자 - tag에 id를 지정하고 그 id값을 선택자로 활용(#abc)
중복 적용 불가. 주로 구조적인 목적에 이용</li>
<li class="pre gr">class선택자 - tag에 class를 지정하고class값을 선택자로 활용(.abc)
여러 tag에 중복 적용가능. 조합가능. 주로 디자인적인 목적에 이용</li>
</ul>
</body>
</html>"
@charset "UTF-8";
h1{color: #720;}
h2{color: #940;}
h1,h2{margin: 3em 1em;
padding-top: 0.4em 1em;
border-top: 4px solid;
border-bottom: 2px solid;
}
p {
background-color: #cdf;
}
span{font-weight: bold;}
.gr {color: green;}
.pre{white-space: pre;}
/*엔터키 적용*/
#li05{line-height: 2;}
|
cs |
<link href="basic.css" rel="stylesheet">
css는 head 부분에 링크를 걸어서 페이지를 참조해서 적용시키는 방식으로 배웠다. 창을 두 개로 분리해서 적용해야 하는 부분을 보면서 해봤는데 생각보다는 편했다. 가벼운 마음으로 보면 좋을 것 같다. 모르면 찾아가며 해보자!
'Web(CSS)' 카테고리의 다른 글
| CSS - text (0) | 2020.07.27 |
|---|---|
| CSS - font (0) | 2020.07.27 |
| HTML -6-2 (0) | 2020.06.09 |
| HTML -6 (0) | 2020.06.09 |
| HTML -5-1 (0) | 2020.06.09 |