[CSS] CSS 선택자 종류
이 글은 생활코딩 CSS 수업을 정리하는 목적으로 작성하였다. 강의와 더불어 참고하길 바란다.
선택자 (selector)
css 파일을 열어보면 다음과 같은 문법을 볼 수 있었을 거다. 이 때 이 안의 다음과 같은 명칭의 표현들이 존재함을 알아야 한다.
🎯 selector: style sheet 을 적용시킬 대상을 지칭한다.
🎯 property: style sheet 을 작성할 때 그 목적이 되는 구체적 style 을 의미한다.
🎯 value: property 에 넣을 값을 의미한다.
선택자의 종류
선택자(selector) 는 여러가지 종류가 있다. 즉 style sheet 을 적용시킬 대상을 지칭할 때 그 표현의 방법이 여러가지 있다는 뜻이다. 다음은 그 종류이다.
🎯 태그 선택자 (tag selector, type selector)
/* html 태그를 지칭하여 style sheet 을 적용한다 */
h1 {
}
🎯 클래스 선택자 (class selector)
/* class 를 지칭하여 style sheet 을 적용한다 */
.title {
}
🎯 아이디 선택자 (id selector)
/* id 를 지칭하여 style sheet 을 적용한다 */
#title {
}
이 때 기억해야할 점은 선택자는 분명하게 지칭될 수록 우선순위가 높게 작용한다는 것이다.
예를들어 다음과 같은 코드가 있다 할 때 아이디 선택자가 가장 분명한 선택자 이므로 <h1 class='title' id='title'/> 의 색상은 빨간색이 된다.
/* <h1 class='title' id='title'/> 이라는 html 태그가 존재한다고 가정하자 */
h1 {
color: black;
}
.title {
color: white;
}
#title {
color: red;
}
부모 자손 선택자 (descendant selector)
만약 html 태그 안에 또 다른 html 태그가 있을 때, 우리는 그 관계를 부모자손 관계라고 부른다.
css 에서는 부모자손 관계를 선택자에서 이용할 수 있다. 그 종류는 다음과 같다.
🎯 (띄어쓰기) , 자손
첫 번째는 띄어쓰기를 이용하여 선택자를 구성하는 방법이다.
이 것은 앞에 나온 선택자의 자손 중 뒤에 나온 선택자가 존재할 때 style sheet 이 적용되는 상황이다.
이 때 기억해야할 점은 뒤에 나온 선택자가 앞에 나온 선택자의 몇 번째 자손이든 상관 없이 자손이기만 하면 된다는 것이다.
아래 코드 중 첫 번째 블럭의 의미는 ul 태그의 자손 li 태그를 선택자로 삼아 {} 에 등장하는 style sheet 을 적용시킨다는 의미이다.
🎯 > , 직계자손
두 번째는 > 를 이용하여 선택자를 구성하는 방법이다
이 것은 앞에 나온 선택자의 직계 자손(depth =1) 중 뒤 나온 선택자가 존재할 때 style sheet 이 적용되는 상황이다.
이 때 기억해야할 점은 뒤에 나온 선택자는 앞에 나온 선택자의 첫 번째 , 즉 직계 자손이어야 한다는 것이다.
아래 코드 중 두 번째 블럭의 의미는 #lecture 아이디의 직계 자손 li 태그를 선택자로 삼아 {} 에 등장하는 style sheet 을 적용시킨다는 의미이다.
🎯 , , 병렬
세 번째는 , 를 이용하여 선택자를 구성하는 방법이다.
이 것은 간단하다! 그냥 병렬을 의미한다.
아 래 코드 중 세 번째 블럭의 의미는 ul 태그와 ol 태그 모두에게 {} 에 등장하는 style sheet 을 적용시킨다는 의미이다.
ul li {
color: red;
text-decoration: underline;
}
#lecture > li {
border: 1px solid red;
}
ul,
ol {
background-color: powderblue;
}
가상 클래스 선택자 (psuedo class selector)
다음과 같은 코드가 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
a:link {
color: black;
}
a:visited {
color: red;
}
a:hover {
color: yellow;
}
a:active {
color: green;
}
a:focus {
color: white;
}
</style>
</head>
<body>
<a href="https://www.naver.com">방문함</a>
<a href="https://www.daum.net">방문함</a>
</body>
</html>
위 코드를 보면 a:link , a:visited , a:hover , a:active , a:focus 등이 있다. 이를 가상 클래스 선택자 라고 부른다. 이 의미는 다음과 같다.
✔️ a:link : <a/> 태그의 기본적인 상태를 지칭하는 선택자
✔️ a:visited : <a/> 태그가 방문된 상태를 지칭하는 선택자
✔️ a:hover : <a/> 태그에 마우스를 올려 놓은 상태를 지칭하는 선택자
✔️ a:active : <a/> 태그가 클릭된 상태를 지칭하는 선택자
✔️ a:focusing : <a/> 태그가 focusing 된 상태를 지칭하는 선택자
추가 정보
css cheat sheet
추가적으로 css cheat sheet 를 첨부한다. 필요시 참고하길 바란다.
css 선택자 연습 사이트
다음 사이트 에서 css 선택자를 고르는 연습을 할 수 있다. 참고하자 !
Leave a comment