<최종 화면> 처음에는 html문서에 style을 써서 컬러, 폰트를 적용하고, 나중에 css파일을 만들어서 적용을 할것이다.
이제 처음부터 차근차근 하나씩 적용하며 봐보자.
8가지 경우를 하나하나 살펴보겠다. 우선 기본 틀을 만들자.
(주석은 딱히 안써도 됨. 혹시몰라 사진 밑에 복붙용 코드 있으니 따라해봐도 됨.)
|
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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 기초</title>
<!-- 웹문서(HTML)에 스타일을 적용하기. (스타일적용 언어 : CSS3) -->
<!-- 스타일 작성 영역 [반드시 head에 있어야 하는 것은 아니지만 가급적] -->
<style type="text/css">
/* 이 영역안에서는 css언어의 문법을 따라야 함. */
/* 이 영역에서는 html언어의 문법 사용 불가!! */
/* 기본 문법 : 선택자{속성:값;} */
/* 선택자 종류 */
/* 1. 타입(요소종류) 선택자 */
/* 2. 전체 선택자 */
/* 3. 아이디 선택자 */
/* 4. 클래스 선택자 */
/* 선택자 섞어서 사용하기 */
/* 5. 선택자 그룹 */
/* 6. 자식, 자손 선택자 */
/* 아래 둘은 완전히 다름 */
/* 이런식으로 복합적으로.. */
/* 7. 속성 선택자 */
/* 8. 의사(pseudo-class) 선택자 */
</style>
</head>
<body>
<!-- 1 ~ 4 선택자까지 연습용 요소들 -->
<h2 class="aa">CSS Selector Test</h2>
<p id="p1">Hello world</p>
<p class="aa">Nice to meet you.</p>
</body>
</html>
|
마우스 우클릭으로 화면으로 확인해보자.
이 텍스트에 여러가지 색을 줄것이다. (스타일 적용 및 우선순위 영향을 보자.)
h2요소에 색을 준다.
p요소에 색을 준다.
색과 추가로 폰트로 줄 수 있다.
*은 전체를 의미한다. 전체에 폰트와 색을 줘보자.
아이디를 이용해서 선택 적용이 가능하다.
class속성을 이용해서 적용이 가능하다. [class ="aa"인것에 컬러를 줌.]
p요소 중에 class="aa"인것에 적용해보자. ( <p>들중에 class명을 줘서 따로 적용할때 사용함.)
선택자를 적용을 알아보기 위해 우선 리스트를 만들어서 적용하겠다.
이제 만든 리스트에 적용을 해보자.
은근 많이 실수한다, 리스트에 적용하려면 ul 이 아닌 li에 적용해야 한다.
자식, 자손을 연습하기 위해 새로운 글씨를 쓰겠다.
우선 자식과 자손의 차이를 알아야 한다. 그림을 보고 저렇게 대충 생각이 들면 된다. (조금만 연습하면 됩니다.)
이제 부모, 자식, 자손을 구분만 할 수 있으면 된다. (입장에 따라 자식과 자손이 됨)
[해당하는 것 기준으로 바로 밑에 있으면 자식이다.]
아래 사진과 같이 새로운 글씨를 만들고, 색은 위에 연습하던 것이 적용된 것이다. (1. 타입-p 파란색 2. *전체-노란색 )
이제 ss에 자식 p요소에게 적용해보자.
이제 ss의 자손들에게 적용을 해보겠다.( 자식도 자손에 포함된다. )
새로운 그룹으로 연습을 하겠다. 추가를 해보자.
위에서 사용한 것을 복합적으로 사용을 많이 한다.
(kk 자손들중 ul 2개 요소가 있으며, ul들중 class="gg"의 자식에게 li에 적용한다.)
p요소들중 class 속성이 있으면 적용이 되도록 해보자. [위에서는 class명으로 했지만.. class로도 가능하다.]
div들중에 id가 ss인 것에 적용해보자.
a요소를 이용해서 링크를 걸었다.
링크는 여러 동작여부가 있다. (클릭하기 전, 클릭 후, 커서를 올렸을 때, 눌린 상태)
<위 사진까지의 코드>
|
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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 기초</title>
<!-- 웹문서(HTML)에 스타일을 적용하기. (스타일적용 언어 : CSS3) -->
<!-- 스타일 작성 영역 [반드시 head에 있어야 하는 것은 아니지만 가급적] -->
<style type="text/css">
/* 이 영역안에서는 css언어의 문법을 따라야 함. */
/* 이 영역에서는 html언어의 문법 사용 불가!! */
/* 기본 문법 : 선택자{속성:값;} */
/* 선택자 종류 */
/* 1. 타입(요소종류) 선택자 */
h2{color:red;}
p{color: blue; font-family: serif;}
/* 2. 전체 선택자 */
*{font-style: italic; color: yellow;} /*같은 스타일을 적용시 개별선택자가 우선적용됨*/
/* 3. 아이디 선택자 */
#p1{color:green;}/*타입선택자보다 우선시 됨*/
/* 4. 클래스 선택자 */
.aa{color: violet;}
/* 선택자 섞어서 사용하기 */
p.aa{background-color: yellow;} /*p요소중에서 class가 aa인 요소*/
/* 5. 선택자 그룹 */
li, a{color: gray;}
/* 6. 자식, 자손 선택자 */
#ss>p{color: black;}
#ss p{color: limegreen;}
/* 아래 둘은 완전히 다름 */
p.aa{} /* p요소 중에서 class값이 aa인 요소 */
p .aa{} /* p요소의 자손들 중에서 class값이 aa인 요소 */
/* 이런식으로 복합적으로.. */
/* 7. 속성 선택자 */
p[class]{font-size: 30px;} /* p요소중에서 class 속성이 지정된 요소 */
div[id="ss"]{font-weight: bold;}
/* 8. 의사(pseudo-class) 선택자 */
/* link, visited는 브라우저마다 동작여부가 다름 */
a:link{color: blue;}
a:visited{color: brown;}
a:hover{color: green;}
a:active{color: red;}
/* hover는 반드시 link와 visited 다음에 작성해야만 함. */
/* active는 반드시 hover 다음에 작성해야함. */
</style>
</head>
<body>
<!-- 1 ~ 4 선택자까지 연습용 요소들 -->
<h2 class="aa">CSS Selector Test</h2>
<p id="p1">Hello world</p>
<p class="aa">Nice to meet you.</p>
<!-- 5. 선택자 그룹 연습용 요소들 -->
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
<a href="">naver</a>
<!-- 6. 자식, 자손 선택자 연습용 -->
<div id="ss">
<h4>Region</h4>
<p>Hello world</p>
<div>
<p>Apple</p>
<p>Banana</p>
<p>Orange</p>
</div>
</div>
<div id="kk">
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<ul class="gg">
<li>uuu</li>
<li>ppp</li>
<li>www</li>
</ul>
</div>
<!-- 8. 의사 선택자 연습-->
</body>
</html>
|
추가로 리스트를 사용할때 특정 번째에만 적용해보겠다.
리스트중 첫 번째에만 적용을 해보겠다.
마직막 리스트에만 적용을 해보겠다.
특정 번째에 적용을 해보겠다.
테이블을 추가하고 특정 번째 요소를 한번 더 연습해보자.
테이블 행의 짝수 번째에만 적용을 해보겠다.
테이블 행의 홀수 번째에만 적용을 해보겠다.
지금까지 내부에서 적용을 해보았다.
스타일을 .CSS 파일로 만들어서 적용을 해보자. 간단하다. (지금까지 style에 적용한것을 css파일에 옮기면 됨.)
CSS 파일을 만들겠다.
style안에 내용을 모두 복사한다. ( 01_ex.html의 <style></style>의 내용은 없어도 된다.)
잘라내기 해서 만든 css 파일에 붙여넣기 한다. (밑에 사진은 잘라내기한 것임. html파일에 style은 없어도됨.)
만든 css 파일 안에 붙여넣기 하자.
그리고 css파일을 적용하기 위해 head안에 link문을 써준다. ( ./ 은 같은 선상의 위치를 의미.. )
그리고 실행을 해보아도 style에는 내용이 없지만, css파일에 같은 내용이 있으므로 적용이 된다.
[style에 있던 내용을 CSS 파일에 복붙하고 그 파일을 링크해서 가져왔기 때문에(외부 스타일 시트) ]
<복붙용 코드>
01_ex.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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 기초</title>
<!-- 웹문서(HTML)에 스타일을 적용하기. (스타일적용 언어 : CSS3) -->
<!-- 스타일 작성 영역 [반드시 head에 있어야 하는 것은 아니지만 가급적] -->
<style type="text/css">
</style>
<!-- 스타일 적용하는 3가지 방법 -->
<!-- 1. 외부 스타일시트 -->
<!-- 2. 내부 스타일시트 -->
<!-- 3. 인라인 스타일: 순서와 상관 없이 최종적용[우선순위 1등] -->
<!-- 같은 요소에 같은 속성을 적용하면 우선순위상 3번의 내용이 적용됨 -->
<!-- 내부, 외부는 작성한 순서가 나중인 것이 적용됨 -->
<!-- 우선순위 적용을 알아보기 위해서 02_test.html -->
</head>
<body>
<!-- 1 ~ 4 선택자까지 연습용 요소들 -->
<h2 class="aa">CSS Selector Test</h2>
<p id="p1">Hello world</p>
<p class="aa">Nice to meet you.</p>
<!-- 5. 선택자 그룹 연습용 요소들 -->
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
<a href="">naver</a>
<!-- 6. 자식, 자손 선택자 연습용 -->
<div id="ss">
<h4>Region</h4>
<p>Hello world</p>
<div>
<p>Apple</p>
<p>Banana</p>
<p>Orange</p>
</div>
</div>
<div id="kk">
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<ul class="gg">
<li>uuu</li>
<li>ppp</li>
<li>www</li>
</ul>
</div>
<!-- 8. 의사 선택자 연습-->
<!-- 수식을 이용한 n번째 자식 요소 선택 연습 -->
<table border="1">
<tr>
<td>aa</td>
<td>bb</td>
<td>cc</td>
</tr>
<tr>
<td>aa</td>
<td>bb</td>
<td>cc</td>
</tr>
<tr>
<td>aa</td>
<td>bb</td>
<td>cc</td>
</tr>
<tr>
<td>aa</td>
<td>bb</td>
<td>cc</td>
</tr>
</table>
</body>
</html>
|
01_ex.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
|
/* 이 영역안에서는 css언어의 문법을 따라야 함. */
/* 이 영역에서는 html언어의 문법 사용 불가!! */
/* 기본 문법 : 선택자{속성:값;} */
/* 선택자 종류 */
/* 1. 타입(요소종류) 선택자 */
h2{color:red;}
p{color: blue; font-family: serif;}
/* 2. 전체 선택자 */
*{font-style: italic; color: yellow;} /*같은 스타일을 적용시 개별선택자가 우선적용됨*/
/* 3. 아이디 선택자 */
#p1{color:green;}/*타입선택자보다 우선시 됨*/
/* 4. 클래스 선택자 */
.aa{color: violet;}
/* 선택자 섞어서 사용하기 */
p.aa{background-color: yellow;} /*p요소중에서 class가 aa인 요소*/
/* 5. 선택자 그룹 */
li, a{color: gray;}
/* 6. 자식, 자손 선택자 */
#ss>p{color: black;}
#ss p{color: limegreen;}
/* 아래 둘은 완전히 다름 */
p.aa{} /* p요소 중에서 class값이 aa인 요소 */
p .aa{} /* p요소의 자손들 중에서 class값이 aa인 요소 */
/* 이런식으로 복합적으로.. */
/* 7. 속성 선택자 */
p[class]{font-size: 30px;} /* p요소중에서 class 속성이 지정된 요소 */
div[id="ss"]{font-weight: bold;}
/* 8. 의사(pseudo-class) 선택자 */
/* link, visited는 브라우저마다 동작여부가 다름 */
a:link{color: blue;}
a:visited{color: brown;}
a:hover{color: green;}
a:active{color: red;}
/* hover는 반드시 link와 visited 다음에 작성해야만 함. */
/* active는 반드시 hover 다음에 작성해야함. */
#kk ul li:first-child{color: red;}
#kk ul li:last-child{color: blue;}
#kk ul li:nth-child(2){color: green;}
/* 수식을 이용한 n번째 자식 스타일링 */
table tr:nth-child(2n+1){background-color: aquamarine;}
|
'안드로이드 웹앱 콘테츠 개발자 양성(국비지원) > HTML+ CSS' 카테고리의 다른 글
| HTML+CSS (기초) 링크, 이미지, 리스트 스타일 적용[배경색, 이미지 적용, ] (0) | 2019.12.06 |
|---|---|
| HTML+CSS (기초) 경계선 및 배경색 스타일 적용 1-2 (0) | 2019.12.06 |
| HTML+CSS (기초) 경계선 및 배경색 스타일 적용 1-1 (0) | 2019.12.06 |
| HTML+CSS (기초) font 적용과 text 스타일 속성 적용 (0) | 2019.12.05 |
| HTML+CSS (기초) html파일에 스타일을 css로 적용하기{외부,내부,이인라인} [짧음] (0) | 2019.12.05 |
댓글