CSS 선택자

📌 CSS 선택자 정리

오늘은 CSS의 선택자에 대해 학습했다. CSS 선택자는 HTML 요소를 스타링할 때 필수적인 개념이며, 여러 가지 방법으로 특정 요소를 선택해서 원하는 디자인을 적용할 수 있다. 이번 학습을 통해 태그 선택자, 클래스 선택자, 아이디 선택자, 속성 선택자뿐만 아니라 가상 클래스 및 가상 요소 선택자까지 학습했다.

---

태그 선택자 (Tag Selector)

특정 HTML 태그에 스테일을 적용할 때 사용한다.

p {
  color: red;
}

p:hover {
  background-color: skyblue;
}

p:focus {
  border: 10px solid red;
}

✅ p 태그의 글자 색을 빨간색으로 지정하고, 마우스를 올리면 배경이 하늘색으로 변경되도록 설정했다.
✅ tabindex="0"이 설정된 <p> 태그를 tab 키로 포커스하면 테두리가 빨간색으로 바뀜다.

---

클래스 선택자 (Class Selector)

class 속성을 갖는 요소를 선택해서 스테일을 적용할 때 사용한다.

.like {
  color: green;
}

✅ .like 클래스를 갖는 <p> 태그의 텍스트 색을 청록색으로 변경했다.

---

아이디 선택자 (ID Selector)

고유한 id 속성을 갖는 요소를 선택할 때 사용한다.

#lion {
  color: blue;
}

✅ id="lion"을 갖는 <p> 태그의 글자 색을 파란색으로 설정했다.

---

속성 선택자 (Attribute Selector)

특정 속성을 갖는 요소를 선택해서 스테일을 적용할 수 있다.

[title] {
  color: purple;
}

a[href^="https://"] {
  text-decoration: none;
}

a[href$="pdf"] {
  background-color: violet;
}

✅ title 속성을 갖는 요소의 글자 색을 보라색으로 설정했다.
✅ href 속성이 https://로 시작하는 링크의 보유선을 제거했다.
✅ href 속성이 .pdf로 끝날 경우 배경색을 보라색으로 변경했다.

---

📈 배운점 & 느낀점

• CSS 선택자는 웹 디자인에서 필수적인 개념이며, 다양한 방식으로 요소를 스타링할 수 있다.
• 가상 클래스하고 가상 요소 선택자를 활용하면 더 정교한 디자인을 적용할 수 있다.