Html 선택자에 대해 알아보자

선택자(Selector)는 CSS에서 HTML 요소를 선택하여 스타일을 적용하는 데 사용되는 패턴입니다. 선택자는 HTML 문서의 요소를 식별하기 위해 사용되며, 해당 요소에 스타일 규칙을 적용할 수 있습니다.

CSS 선택자의 종류와 사용 예시를 살펴보겠습니다:

1. 요소 선택자(Element Selector):
   • 요소 이름을 사용하여 선택합니다. 예를 들어, p는 모든 <p> 요소를 선택합니다.
   • 예시: p { color: blue; }
2. 클래스 선택자(Class Selector):
   • 클래스 이름을 사용하여 선택합니다. 클래스 이름은 동일한 스타일을 여러 요소에 적용하기 위해 사용됩니다. 클래스 이름은 .으로 시작합니다. 예를 들어, .highlight는 class="highlight" 속성을 가진 요소를 선택합니다.
   • 예시: .highlight { background-color: yellow; }
3. ID 선택자(ID Selector):
   • ID 값을 사용하여 선택합니다. ID는 문서 내에서 고유한 식별자로 사용되며, #으로 시작합니다. 예를 들어, #header는 id="header" 속성을 가진 요소를 선택합니다.
   • 예시: #header { font-size: 24px; }
4. 속성 선택자(Attribute Selector):
   • 요소의 특정 속성을 선택합니다. 속성 선택자는 속성 이름과 해당 값을 사용하여 선택합니다. 예를 들어, [type="submit"]은 type="submit" 속성을 가진 요소를 선택합니다.
   • 예시: [type="submit"] { background-color: green; }
5. 후손 선택자(Descendant Selector):
   • 특정 요소의 하위 요소를 선택합니다. 후손 선택자는 공백으로 구분하여 사용합니다. 예를 들어, div p는 <div> 요소의 하위에 있는 모든 <p> 요소를 선택합니다.
   • 예시: div p { color: red; }
6. 가상 클래스 선택자(Pseudo-class Selector):
   • 특정 상태나 동작에 따라 요소를 선택합니다. 가상 클래스 선택자는 콜론(:)으로 시작합니다. 예를 들어, :hover는 마우스가 요소 위로 올라갔을 때 선택됩니다.
   • 예시: a:hover { text-decoration: underline; }

이 외에도 여러 다른 선택자들이 있으며, 선택자들을 조합하여 더 복잡한 선택 패턴을 만들 수도 있습니다. 선택자는 CSS의 강력한 기능 중 하나로, 원하는 요소를 정확하게 선택하여 스타일을 적용할 수 있도록 도와줍니다.

 

01. selector를 하나만 사용하는 경우

• 전체 선택자
  전체 선택자를 통해서 모든 html 요소에 접근을 할 수 있습니다. 이를 통해 문서 전체에 공통적으로 기본값을 지정할 수 있ㅅ브니다. 전체 선택자는 *를 사용하여 나타 냅니다.
• 태그 선택자
  태그 선택자는 태그 이름을 하용하여 나태냅니다. 해당 태그의 이름에 해당하는 모든 태그에 속성을 적용합니다.
• 클래스 선택자
  클래스 선택자는 .클래스 이름 을 사용하여 나타냅니다. 태그 선택자와 마찬가지로 클래스가 클래스 이름 과 같은 태그에 속성을 적용합니다.
• ID 선택자
  ID 선택자는 #아이디 이름 을 사용하여 나타 냅니다. 클래스와 동일하게 id가 id 이름과 같은 태크에 속성을 적용합니다.