JAVA
20220321 - WEB JavaScript 14
쿠쿠(KOOKOO)
2022. 3. 23. 08:48
- Property 찾기
Property CSS에서 어떠한 효과를 의미하는 것
구글 검색 css property text size
font-size CSS에서 폰트 크기를 키울 수 있는 속성
text-align CSS에서 폰트 정렬 속성
|
1
2
3
4
5
6
7
8
9
10
11
|
<head>
<style>
h1 {
font-size:45px;
text-align: center;
}
</style>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
</body>
|
프로그램에서도 property를 찾아주기떄문에
외우려하기보다 찾는 방법 위주로 이해할 것
- 선택자 찾기
내가 찾은 방법: a:visited
검색어 css hyperlink visited color
a class
a:link 방문 전
a:visited 방문 후
a:hover 마우스 오버
a:active 클릭시
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<style>
a{
color:black;
text-decoration:none;
}
a:visited{ /*방문한, a 속성으로 color:gray가 들어가는 중복을 막을 수 있다*/
color:gray;
}
</style>
</head>
<body>
<h2><a href="index.html">Best 3 movies I love</a></h2>
<ol>
<li><a href="closer.html" style="color:red;">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>
|
강의 방법: class, .saw
|
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 |
<style>
a{
color:black;
text-decoration:none;
}
.saw{ /*온점을 불여야 class가 saw인 태그를 가리키는 선택자로 설정할수 있게됨,
saw만 선택자로 기재하면 이 웹페이지의 모든 saw라는 태그를 의미하는 것임*/ color:gray;
}
.active{ /*적용되는 이유는 단순히 active가 saw보다 나중에 등장했기 떄문임,
active가 먼저 등장한다면 회색*/ color:red;
}
</style>
</head>
<body>
<h2><a href="index.html">Best 3 movies I love</a></h2>
<ol>
<li><a href="closer.html" class="saw active">Closer</a></li>
<li><a href="her.html" class="saw">Her</a></li> <!--saw라는 클래스-->
<li><a href="apple.html" class="saw">You Are the Apple of My Eye</a></li>
</ol>
|
class: 그룹핑하다, 하나로 묶는다
class라는 속성의 값은 여러 개의 값이 들어올 수 있고 띄어쓰기로 구분할 수 있다는 것을 알 수 있다.
id 선택자
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<style>
.saw{
color:gray;
}
#active{ /*id선택자를 지칭하는 #*/
color:red;
}
</style>
</head>
<body>
<li><a href="closer.html" class="saw" id="active">Closer</a></li>
|
class 선택자와 id 선택자가 붙으면 순서와 상관없이 id선택자로 적용된다.
태그 선택자 < class 선택자 < id 선택자 순으로 강하다. (우선순위)
동일한 형태의 선택자라면 가장 마지막에 등장하는 선택자가 우선순위다.
id의 값은 단 한번만 등장해야한다. active를 한번 썼으니 또 나오면 안된다.
CSS는 포괄적인 것 보다 구체적인 것의 우선순위가 더 높다.
https://www.w3schools.com/cssref/css_selectors.asp
selector 참고하기 좋은 사이트
공부 자료: https://opentutorials.org/