CSS에서 엄청 중요한 부분인 셀렉터에 대해 알아보자!
① CSS 셀렉터 (Selector) = 선택자 : 내부/외부 스타일 시트에서 문서의 html 요소를 선택할 수 있게 하는 문법
| 기본 셀렉터 | ||
| 이름 | 설명 | 예시 |
| 전체 셀렉터 (universal selector) |
html 문서 내의 모든 요소를 선택 | * {font-size: 12px} |
| 태그 셀렉터 (tag selector) |
태그를 선택하는 셀렉터 | p {font-size: 12px} |
| 아이디 셀렉터 (id selector) |
id 값을 선택하는 셀렉터 * 유일해야하며 하나여야 한다. |
#last {font-size: 12px} |
| 클래스 셀렉터 (class selector) |
class값을 선택하는 셀렉터 * 중복, 다수 선언 가능 |
.wrap {font-size: 12px} |
| tag/id/class 복합 셀렉터 (complex selector) |
tag와 id, class를 혼합해서 선택하는 셀렉터 | div#ltest, div.wrap |
| 어트리뷰트 셀렉터 (attribute selector) |
지정된 어트리뷰트(속성값)을 가지는 모든 요소를 선택 | a[href] {color: red;} a[href="http://www.naver.com"} |
ex)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>selector -css</title>
<style>
/* 전체 선택자, univeral selector */
* {
color: purple;
}
/* tag selector */
/* #id selector
유일해야하며 하나여야 한다.
*/
#sample1 {
color: red;
}
/* class selector
중복, 다수 선언 가능
*/
.sample2 {
color: cyan;
}
/* 복합 셀렉터 */
p.test1, h1.test1 {
color: coral;
}
/* 속성을 선택할 수 있는, attribute selecoter */
/* [속성] */
a[href="http://www.facebook.com"] {
color: deeppink;
}
</style>
</hea3>
<body>
<a href="http://www.facebook.com">facebook</a>
<a href="http://www.facebook.com" title="test">facebook</a>
<h1 class="test1">Lorem ipsum dolor sit amet.</h1>
<h2 class="sample2">Lorem ipsum dolor sit amet.</h2>
<h3>Lorem ipsum dolor sit amet.</h3>
<h4>Lorem ipsum dolor sit amet.</h4>
<h5>Lorem ipsum dolor sit amet.</h5>
<h6>Lorem ipsum dolor sit amet.</h6>
<p class="test1">
p 셀렉터 부문
</p>
</body>
</html>
↓결과화면
'웹 > CSS' 카테고리의 다른 글
| [코딩 공부_20] CSS, 절대단위와 상대단위 (0) | 2021.03.07 |
|---|---|
| [코딩 공부_19] CSS, 글자에 적용하는 스타일들 (0) | 2021.03.05 |
| [코딩 공부_18] CSS 셀렉터 우선순위 (0) | 2021.03.04 |
| [코딩 공부_14] CSS로 색상을 표현하는 방법 (0) | 2021.03.03 |
| [코딩 공부_12] CSS 선언하는 방식 3가지 (0) | 2021.02.25 |
댓글