1. CSS Selector란
•
선택자. 내/외부 스타일 시트에서 문서의 html 요소를 선택할 수 있게 하는 문법
•
#id, .class, tag-name 세 가지를 주로 이용해서 select, 속성값으로도 select 가능
•
DS, DA의 입장에서는 특히 크롤링을 잘 하기 위해 선택자에 대한 이해가 필요함
•
선택자 종류
◦
tag 선택자: html 문서의 모든 특정 태그를 선택할 때 사용
◦
id 선택자: html 문서의 하나의 요소를 특정해서 선택할 때 사용
◦
class 선택자: html 문서의 여러 요소를 그룹으로 선택할 때 사용
•
사용 예
◦
div element를 select하기
div{
/* css 속성 선언 */
}
CSS
복사
◦
p element의 ds1 클래스를 select하기
p.ds1{}
CSS
복사
◦
한칸 띄우면 하위 element, 붙여쓰면 둘다 해당 element
p.ds1.ds{}
CSS
복사
2. 기본 Selector
2.1 Tag Selector
•
html 태그의 이름으로 바로 선택
•
어떠한 기호를 붙이지 않고 태그 이름을 바로 사용
•
문서 내 모든 해당 태그에 적용됨
•
사용 예
p{
/* css 속성 선언 */
}
CSS
복사
2.2 Id Selector
•
html 태그의 속성으로 id를 지정/선언
•
하나의 id는 문서 내 하나만 존재해야 함
•
#기호 사용: #id명
•
사용 예: id로 ds1, ds2를 select하여 style 적용하기
<head>
<style>
#ds1{
font-size: 32px;
}
#ds1, #ds2{
color: red;
}
</style>
</head>
<body>
<!-- emmet: p#ds${ds$}*2 -->
<p id="ds1">ds1</p>
<p id="ds2">ds2</p>
</body>
HTML
복사
→ 적용시 아래와 같이 나타남
ds1
ds2
2.3 Class Selector
•
html 태그의 속성으로 class를 지정
•
하나의 class는 문서 내 여러개 지정 가능
•
. 기호 사용: .class명
•
사용 예
<head>
<style>
.ds{
font-size: 15px;
}
.ds3, .ds4{
font-weight: bold;
}
.science{
color: blue;
}
</style>
</head>
<body>
<!-- span.ds.ds${a$}*5 -->
<span class="ds ds1">a1</span>
<span class="ds ds2">a2</span>
<span class="ds ds3">a3</span>
<span class="ds ds4">a4</span>
<span class="ds ds5">a5</span><br>
<span class="ds ds1 data">b1</span>
<span class="ds ds2 data">b2</span>
<span class="ds ds3 science">b3</span>
<span class="ds ds4 science">b4</span>
<span class="ds ds5 science">b5</span>
</body>
HTML
복사
→ 적용시 아래와 같이 나타남
a1
a2
a3
a4
a5
b1 b2 b3 b4 b5
b1 b2 b3 b4 b5
3. 기타 Selector
4.1 조합 선택자
•
여러 개의 선택자를 합치는 방법. 특정 요소 하위에 있는 요소를 선택 (element의 level, 깊이를 선택)
•
종류
◦
자식 조합 선택자: > 사용 (1단계 하위 depth의 element만 선택)
◦
자손 조합 선택자: (띄어쓰기, 공백문자) 사용 (하위 element 모두 선택)
•
사용 예
<head>
<style>
.contents h1{
color: red;
}
.contents > h1{
font-size: 16px;
}
/*body > div > h1{
color: yellow;
}*/
</style>
</head>
<body>
<div class="contents">
<h1>inner1</h1>
<div class="txt">
<h1>inner2</h1>
</div>
</div>
</body>
HTML
복사
→ 아래와 같이 나타남
inner1
inner2
4.2 상태 선택자
•
하나의 선택자에 대해 부연 설명.
•
문법: :(콜론) 기호 사용. 요소가 특정 상태가 되었을 때만 선택
•
종류
◦
반응 선택자: hover(마우스 커서가 위에), active, visited 등
◦
상태 선택자: focus(입력, 버튼에 포커스), enabled, disabled 등
•
사용 예
<!-- html 문서 -->
<a>link text</a>
<!-- css 시트 -->
a:hover{
color: blue;
}
HTML
복사
4.3 특성 선택자
•
하나의 선택자에 대해 부연 설명
•
요소에 부여된 특성의 존재 여부나 그 값에 따라 선택
•
문법: [, ](대괄호)를 사용해서 특성을 지정
•
사용 예
◦
a[href]: href 속성이 지정된 요소
◦
<!-- html 문서 -->
<a href="https://www.naver.com">link text</a>
<!-- css 시트 -->
a[href=https://www.inflean.com]{
color: blue;
}
HTML
복사
4.4 not
•
특정 element를 빼고 싶을 때 사용
•
사용 예
<head>
<style>
.d:not(.ds2){
background-color: yellow;
}
</style>
</head>
<body>
<!-- span.ds.ds${a$}*5 -->
<span class="d ds1">a1</span>
<span class="d ds2">a2</span>
<span class="d ds3">a3</span>
<span class="d ds4">a4</span>
<span class="d ds5">a5</span><br>
<span class="d ds1 data">b1</span>
<span class="d ds2 data">b2</span>
<span class="d ds3 science">b3</span>
<span class="d ds4 science">b4</span>
<span class="d ds5 science">b5</span>
</body>
HTML
복사
→ 아래와 같이 나타남
a1
a2
a3
a4
a5
b1 b2 b3 b4 b5
b1 b2 b3 b4 b5
4.5. first-child, last-child, nth-child
•
body, div, p 등의 element로 감싸진 element 내에서 n번째 element가
설정한 css selector와 맞으면 css가 적용
•
문법
1.
:first-child: 가장 앞에 있는 element를 선택할 때 사용
2.
:last-child: 가장 마지막에 있는 element를 선택할 때 사용
3.
:nth-child(n): n번째에 있는 element를 선택할 때 사용
•
사용 예
◦
예시 설명
first-child 부분
last-child 부분
nth-child 부분
<head>
<style>
<!-- first-child -->
.ds:first-child {
color: blue;
}
.sc:first-child {
color: green;
}
h1:first-child {
color: brown;
}
span:first-child{
color: purple;font-weight: bold;
}
<!-- last-child -->
.ds:last-child {
color: red;
}
<!-- nth-child -->
.ds:nth-child(3), .ds:nth-child(4){
color: red;
}
</style>
<body>
<p class="sc" id="ds1">class: sc | id: ds1</p>
<p class="sc" id="ds2">class: sc | id: ds2</p>
<div class="dsc">
<p class="ds ds1">ds1</p>
<p class="ds ds2">ds2</p>
<p class="ds ds3">ds3</p>
<p class="ds ds4">ds4</p>
<p class="ds ds5">ds5</p>
</div>
<div class="contents">
<h1>inner1</h1>
<div class="txt">
<h1>inner2</h1>
<h1>inner3</h1>
</div>
</div>
<div>
<h1>inner4</h1>
</div>
<p class="ts">
<span>Span1</span>
<span>Span2</span>
</p>
</body>
HTML
복사
→ 아래와 같이 나타남
참고자료
•
패스트캠퍼스, ⟪데이터사이언스스쿨 8기⟫ 수업자료
•
인프런, ⟪프로그래밍 시작하기: 웹 입문⟫ 수업자료