✓ 2023.02.22 TIL
1. CSS selector
1️⃣ CSS selector
: CSS의 기본은 어떤 요소에 어떤 스타일을 적용할지, 그 요소를 선택하여 지정하는 것이다.
제목이라면 제목, 하단이라면 하단 등 내가 스타일을 적용하고자 하는 대상을 직접 선택하여 가리켜야 한다.
CSS에서 스타일을 적용하기 위해 특정 대상을 가리켜 선택하는 것을 CSS selector라고 한다.
여러 다양한 selector가 있지만, 그중 가장 많이 사용되는 selector을 정리해 보려고 한다.
(1) tag name
: tage name은 태그 자체를 선택하는 것이다.
만약 p 태그라면 p, input 태그라면 input을 사용하여 태그를 선택해 스타일을 입히면 된다.
p {
width: 200px;
height: 500px;
color: white;
background-color: black;
}
input {
border: none;
color: red;
}
-> 각각 p태그와 input태그에 스타일 적용(2) class name
: class name은 class로 이름을 준 다음에 그 class name으로 대상을 선택하는 것이다.
이때, class name 앞에 .(점)을 붙여 해당 선택자가 class name으로 선택된 대상이라는 것을 알려야 한다.
.myBtn {
width: 200px;
height: 100px;
background-color: green;
}
-> class name이 myBtn인 요소에 스타일 적용(3) id name
: id name 역시 class name과 동일하게 id로 태그에 이름을 준 다음에 그 id name으로 대상을 선택하는 것이다.
class name 과의 차이점은 class name은 중복 및 재사용이 가능하지만, id name의 경우 중복 및 재사용이 불가능한 유일한 값으로 1번만 사용 가능하다는 점이다.
또한, class name이 .(점)으로서 대상을 가리켰다면 id는 #으로 스타일을 줄 대상을 가리켜 선택한다.
#myBtn {
width: 200px;
height: 100px;
background-color: green;
}
-> id name이 myBtn인 요소에 스타일 적용(4) 선택자 (공백) 선택자
: 앞 선택자와 뒤 선택자 사이에 공백을 두는 표현으로, 앞 선택자의 자식 태그들을 선택하는 방법이다.
.header p {
color: blue;
font-size: 15px;
}
-> class name이 header인 대상의 자식들 중에서 모든 p태그에 스타일을 적용(5) 선택자 > 선택자
: 앞 선택자의 자식들 중 가장 첫 번째에 위치한 자식만 선택하는 방법으로, 앞 선택자의 직계 자손을 선택하는 방법이다.
.header > p {
color: blue;
font-size: 15px;
}
-> class name이 header인 대상의 자식들 중에서 첫 번째에 위치한 p태그에만 스타일을 적용(6) 전체 선택자
: 전체 선택자 * 은 모든 요소들을 선택하는 것으로 전체 선택이라고 생각하면 된다.
실질적으로, 특정 스타일을 주기 위해서 사용하기보다는 처음 CSS을 작성할 때 전체 reset을 해주기 위해서 많이 사용한다.
* {
margin: 0px;
padding: 0px;
}
-> html문서의 모든 margin과 padding를 0으로 세팅(7) [ ] 속성 선택자
: a tag나 input tag에서 많이 사용되는 선택자로 한 태그에서 특정 속성값을 지닌 요소만을 선택하고 싶을 때 사용한다.
a[속성=”값”] 으로 표현한다.
[class = "cssSelector"] {
background-color: blue;
}
-> class name이 cssSelector인 요소들에 스타일을 적용
-> 태그의 요소와는 무관하게 속석명과 속성값이 일치하는 요소는 모두 선택자로 지정된다.
p[class = "cssSelector"] {
background-color: blue;
}
-> 속성 선택자 앞에 특정 태그를 추가할 수도 있다.✅ 참고
CSS 속성 선택자 의미 및 7가지 종류 예제 - dasima
CSS 선택자 - CSS: Cascading Style Sheets | MDN
👉🏻 느낀 점 / 다짐
아직까지는 복잡한 선택자를 사용해 본 적이 없어서 사실, 크게 와닿는 부분은 아니었다.
하지만, 코드가 복잡해질수록 어떤 요소를 어떻게 선택할지 지정하는 방법이 굉장히 중요하기 때문에 각종 문서들이나 선택자 게임을 통해서 틈틈이 공부할 것이다.
