태그 선택자
<li>태그 안에 글자가 빨간색이고, 밑줄을 치려면 어떻게 해야할까
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<html>
<head>
<style>
li{
color:red;
text-decoration:underline
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
|
cs |
우선 <style> 태그 안에 인라인 방식으로 li에 color와 text-decoration 같은 속성들을 써준다.
반드시 효과 뒤에는 세미콜론(;)을 써줘야한다!
선택자와 선언
여기서 li가 selector, 즉 선택자이고
color:red; 이런게 declaration,즉 선언이다.
color는 property(속성) red는 value(속성 값이다)
:는 value-property seperator로 속성과 값 구분하는 것이고
;는 declaration seperator로 선언과 선언을 구분해주는 것이다.
아이디 선택자
여기서 CSS라는 글자의 폰트 크기만 키워주려면 어떻게 해야할까?
바로 아이디 선택자를 이용하면 된다!
id 라는 속성에 값을 select라 넣어주면 된다.
<li id="select">CSS</li>
이 코드는 id 속성값이 select인 것에 효과를 주는 것을 의미한다.
그러면 스타일 태그 안에 select 선택자안에 폰트 사이즈 선언을 해주겠다.
하지만 이렇게 하면 모든 글자 크기의 변화가 없다.
왜냐면 웹페이지의 모든 select에 대해 효과를 주는 것이기 때문이다.
해결방법은
#select를 이용하는 것이다.
--> 이렇게 하면 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
|
<html>
<head>
<style>
li{
color:red;
text-decoration:underline;
}
select{ /*웹페이지의 모든 select에 대해 효과주는 것*/
font-size:100px;
}
#select{
font-size:50px;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li id="select">CSS</li> <!--id 속성값이 select인 것에 효과-->
<li>JavaScript</li>
</ul>
</body>
</html>
|
cs |
아이디 선택자는 딱 한군데에만 효과를 넣어주고 싶을 때 사용한다.
클래스 선택자
HTML과 JavaScript라는 글자 위에 줄을 표시해보려한다.
<li class="deactive">HTML</li>
<li class="deactive">JavaScript</li>
하나의 요소가 아닌 두개 이상의 요소에 동시에 효과를 주고 싶으면 클래스 선택자를 이용한다
|
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
|
<html>
<head>
<style>
li{
color:red;
text-decoration:underline;
}
#select{
font-size:50px;
}
.deactive{
text-decoration:line-through;
/*웹페이지의 모든 선택자 중 클래스의 값이 deactive인 태그에 대해서 선택 */
}
</style>
</head>
<body>
<ul>
<li class="deactive">HTML</li>
<li id="select">CSS</li>
<li class="deactive">JavaScript</li>
</ul>
</body>
</html>
|
cs |
아이디와 클래스의 차이
클래스: 어떠한 대상을 관리하기 쉽도록 grouping
아이디: 대상 하나하나를 구별하기 위한 식별번호
가장 큰 차이점이 있다면 아이디는 단 한번만 등장해야한다. 예를 들어 select라는 값을 id로 했다면 select가 다시는 등장하면 안된다. 여러번 등장해야한다면 class라는 속성으로 grouping 해야 한다.
이게 HTML이나 CSS에서는 id가 중복되도 에러가 나지 않지만 중복된 아이디를 가지고 자바스크립트 작업을 하게 되면 오류가 발생한다. 따라서 되도록이면 하나의 웹 페이지에 속하는 요소에는 다른 아이디 이름을 사용하거나 클래스를 사용하는 것이 좋다.
http://tcpschool.com/css/css_selector_basic
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
tcp 스쿨 사이트에 나와있는 개념을 보면
아이디 선택자는 CSS를 적용할 대상으로 특정 요소를 선택할 때 사용한다. 웹페이지에 포함된 여러 요소 중 특정 아이디
이름을 가지는 요소만 선택해준다.
클래스 선택자는 특정 집단의 여러 요소를 한 번에 선택할 때 사용한다. 특정집단을 클래스라하며, 같은 클래스 이름을 가지는 요소를 모두 선택해 준다.
클래스 선택자는 같은 태그 뿐만 아니라 다른 태그도 grouping해서 묶어줄 수 있다!
|
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
|
<html>
<head>
<style>
li{
color:red;
text-decoration:underline;
}
#select{
font-size:50px;
}
.deactive{
text-decoration:line-through;
}
</style>
</head>
<body>
<h1 class="deactive">수업의 순서</h1>
<ul>
<li class="deactive">HTML</li>
<li id="select">CSS</li>
<li class="deactive">JavaScript</li>
</ul>
</body>
</html>
|
cs |
h1태그에 수업의 순서를 추가해줬는데, li 태그랑 다른 태그지만 얘도 deactive라는 클래스를 이용해서 글자 위에 줄이 쳐지는 효과를 구현할 수 있다.
'CSS > 생활코딩' 카테고리의 다른 글
| [CSS]position (0) | 2022.03.28 |
|---|---|
| [CSS기초] 캐스 케이딩과 레이아웃 (0) | 2022.03.28 |
| [CSS 기초] font-size/color/text-align (0) | 2021.12.28 |
| [CSS기초] 부모자식 선택자/가상 클래스 선택자/여러가지 선택자들 (0) | 2021.12.22 |
| [CSS기초] HTML과 CSS가 만나는 법 (0) | 2021.11.18 |
댓글