[CSS] #1 선택자
[목차]
#1 전체 선택자 [universal selector]
#2 타입 선택자 [type selector]
#3 클래스 선택자 [class selector]
#4 id 선택자 [id selector]
#5 id 선택자 vs 클래스 선택자
* 개인적인 공부내용 정리용으로 작성한 게시글이기에, 잘못된 내용이 있을 수 있으며 지속적으로 수정해 나갈 예정입니다.
선택자란, 웹문서에 스타일을 적용할 태그(부분)을 알려주는 역할을 하는 것으로 선택자의 종류는 [전체 선택자] [타입 선택자] [클래스 선택자] [ID 선택자] 4가지로 구분합니다.
#1 전체 선택자 [universal selector]
전체 선택자는 문서의 모든 요소에 스타일을 적용할 때 사용하며, *(별표)를 사용합니다.
주로 웹 브라우저의 기본 스타일을 초기화할 시 자주 사용하는데, 예를 들어 전체 선택자를 이용해 웹 문서 전체의 여백을 0으로 지정할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>u_selector</title>
<style>
*{
margin: 0;
}
</style>
</head>
<body>
<p>Universal Selector Example</p>
</body>
</html>다음과 같이 웹문서에는 기본적으로 단락이나 이미지별로 여백이 있는데, 전체 선택자를 사용한 오른쪽 그림은 여백이 사라진 것을 확인할 수 있습니다.
#2 타입 선택자 [type selector]
타입 선택자는, 특정 태그를 사용한 모든 요소에 스타일을 적용할 때 사용하는 선택자입니다.
기본형은 다음과 같습니다.
태그이름 { 스타일 규칙 }다음은 타입 선택자를 사용해, <span>태그가 사용된 모든 글자들의 색상을 파란색으로 바꾸는 에제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>t_selector</title>
<style>
span{
color: blue;
}
</style>
</head>
<body>
<span>Type Selector Example</span>
</body>
</html>
#3 클래스 선택자 [class selector]
클래스 선택자는 특정 부분만 선택해서 스타일을 적용할 때 사용합니다. 클래스 이름 앞에 마침표(.)를 붙여서 사용하며, 클래스 선택자를 적용하고자 하는 태그 안에 class = "클래스이름" 과 같이, class 속성을 사용해야 합니다.
기본형은 다음과 같습니다.
.클래스이름 { 스타일 규칙 }다음은 "rule1" 이름의 클래스 선택자를 정의하고, 첫 째줄의 <p> 태그에만 스타일 규칙을 적용한 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>c_selector</title>
<style>
.rule1{
color: red;
}
</style>
</head>
<body>
<p class = "rule1">Class Selector Example</p>
<p>Class Selector Example....</p>
</body>
</html>
클래스 선택자는 같은 요소에 2개 이상 적용하는 것도 가능합니다. 클래스 선택자를 2개 이상 사용하는 경우에는, 공백으로 구분해서 스타일 이름을 적으면 됩니다.
다음은, "rule1" "rule2" 클래스 선택자를 첫 번째 줄의 <p>태그에 적용한 예제 입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>c_selector</title>
<style>
.rule1{
color: red;
}
.rule2{
font-style: italic;
}
</style>
</head>
<body>
<p class = "rule1 rule2">Class Selector Example</p>
<p>Class Selector Example....</p>
</body>
</html>
#4 id 선택자 [id selector]
id 선택자는 #3 클래스 선택자와 마찬가지로 특정 부분을 지정해서 스타일을 적용할 때 사용하는데, (#)기호를 사용하며 적용하고자 하는 태그에 id = "선택자이름" 과 같이, id 속성을 사용해야 합니다. 단, 문서에서 여러번 적용 가능한 클래스 선택자와 달리 id 선택자는 단 한 번만 적용 가능합니다.
기본형은 다음과 같습니다.
#아이디명 { 스타일 규칙 }다음은 "rule3" 이름의 아이디 선택자를 정의하고, 첫 번째 줄의 <div>태그에 적용한 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>id_selector</title>
<style>
#rule3{
color: blue;
}
</style>
</head>
<body>
<div id = "rule3">id Selector Example</div>
</body>
</html>
#5 id 선택자 vs 클래스 선택자
id 선택자는 클래스 선택자보다 우선순위가 높습니다. 따라서, id 선택자와 클래스 선택자가 동시에 적용된 경우에는 id 선택자의 스타일 형식만 태그에 반영됩니다.
다음은 색상을 파란색으로 변경하는 id 선택자 "#id_selector"와, 색상을 붉은색으로 변경하는 클래스 선택자 ".class_selector"를 <p>태그에 적용한 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>id_class_selector</title>
<style>
#id_selector{
color: blue;
}
.class_selector{
color: red;
}
</style>
</head>
<body>
<p id = "id_selector" class = "class_selector">Example</p>
</body>
</html>
'📁 Archive > WEB' 카테고리의 다른 글
| [CSS] #3 텍스트 관련 스타일 vol1 _ color : 글자 색 변경하기 (0) | 2021.05.28 |
|---|---|
| [JS] #1 간단한 입출력 정리 - alert() / confirm() / prompt() / document.write() / console.log() (0) | 2021.05.28 |
| [JS] #0 자바스크립트(*.js) 파일과 웹(*.html) 파일 연결하기 (0) | 2021.05.28 |
| [CSS] #2 글꼴 관련 스타일 font-family/ font-size/ font-weight (0) | 2021.05.27 |
| [CSS] Style - Inline Style & Internal Style & External Style (0) | 2021.05.24 |