HTML 선택자(Selector)의 종류와 사용 방법 알아보기

1. HTML 선택자란?

HTML 선택자는 CSS에서 사용되는 요소들을 선택하는 방법을 정의하는 표현식입니다. 웹 개발에서 CSS를 적용할 때, 특정 요소를 선택해 스타일을 적용해야 할 때 선택자를 사용합니다. 선택자는 HTML 문서의 요소를 찾는데 사용되며, 이를 통해 디자인적인 수정이 가능합니다.

다양한 종류의 선택자가 있으며, 각 선택자는 특정 요소를 선택하기 위해 사용되는 다양한 속성에 기반을 둡니다. 예를 들어, 클래스 선택자는 HTML 요소의 class 속성을 기반으로 요소를 선택하고, 아이디 선택자는 HTML 요소의 id 속성을 기반으로 요소를 선택합니다.

CSS 선택자는 웹 페이지를 구성하는 여러 요소들을 세밀하게 제어할 수 있어 웹 개발에서 핵심적인 역할을 합니다. HTML 선택자에 대한 이해는 CSS를 사용해 웹 페이지를 디자인하고 스타일을 적용하는데 필수적입니다.

---

2. 클래스 선택자의 사용 방법

클래스 선택자는 HTML 요소 중에서 특정한 class 속성을 가진 요소를 선택합니다. 클래스는 여러 요소에 동시에 적용할 수 있는 공통적인 스타일을 적용하기 위해 사용됩니다. 클래스 선택자는 점(.)으로 시작하며 해당 클래스 이름을 참조하여 사용합니다.

<style>
  .myClass {
    color: red;
    font-size: 16px;
  }
</style>

<p class="myClass">이 텍스트는 클래스 선택자에 의해 스타일이 적용됩니다.</p>

위의 예시에서는 <p> 요소에 myClass라는 클래스를 지정하고, 그에 해당하는 스타일을 정의했습니다. 이렇게 클래스 선택자를 사용하면 동일한 클래스를 가진 다른 요소들에도 동일한 스타일이 적용됩니다.

---

3. 아이디 선택자의 사용 방법

아이디 선택자는 HTML 요소 중에서 특정한 id 속성을 가진 요소를 선택합니다. 아이디는 페이지 내에서 유일한 식별자로 사용되며, 각 요소에는 하나의 아이디만 지정할 수 있습니다. 아이디 선택자는 #으로 시작하며 해당 아이디를 참조하여 사용합니다.

<style>
  #myId {
    background-color: yellow;
    padding: 10px;
  }
</style>

<div id="myId">이 요소는 아이디 선택자에 의해 스타일이 적용됩니다.</div>

위의 예시에서는 <div> 요소에 myId라는 아이디를 지정하고, 그에 해당하는 스타일을 정의했습니다. 이렇게 아이디 선택자를 사용하면 해당 아이디를 가진 요소에만 스타일이 적용됩니다. 아이디는 고유한 식별자이기 때문에 한 페이지 내에서 한 번만 사용할 수 있습니다.

2. 클래스 선택자의 사용 방법

클래스 선택자는 HTML 요소 중에서 특정한 class 속성을 가진 요소를 선택합니다. 클래스는 여러 요소에 동시에 적용할 수 있는 공통적인 스타일을 적용하기 위해 사용됩니다. 클래스 선택자는 점(.)으로 시작하며 해당 클래스 이름을 참조하여 사용합니다.

.myClass {
  color: red;
  font-size: 16px;
}

위의 예시에서는 .myClass라는 클래스 선택자를 사용하여 스타일을 정의했습니다. 이 클래스 선택자는 HTML 문서 내에서 class="myClass"라는 속성을 가진 모든 요소를 선택합니다. 선택자 다음에 중괄호({})로 스타일을 정의하고, 각 스타일 속성과 값은 콜론(:)으로 구분하여 지정합니다.

<p class="myClass">이 텍스트는 클래스 선택자에 의해 스타일이 적용됩니다.</p>

위의 HTML 코드에서 <p> 요소에 myClass라는 클래스를 지정하고 있습니다. 이렇게 클래스 선택자를 사용하면 동일한 클래스를 가진 다른 요소들에도 동일한 스타일이 적용됩니다. 따라서 해당 클래스를 가진 모든 요소에는 클래스 선택자에 지정된 스타일이 적용됩니다.

3. 아이디 선택자의 사용 방법

아이디 선택자는 HTML 요소 중에서 특정한 id 속성을 가진 요소를 선택합니다. 아이디는 페이지 내에서 유일한 식별자로 사용되며, 각 요소에는 하나의 아이디만 지정할 수 있습니다. 아이디 선택자는 #으로 시작하며 해당 아이디를 참조하여 사용합니다.

#myId {
  background-color: yellow;
  padding: 10px;
}

위의 예시에서는 #myId라는 아이디 선택자를 사용하여 스타일을 정의했습니다. 이 아이디 선택자는 HTML 문서 내에서 id="myId"라는 속성을 가진 요소를 선택합니다. 선택자 다음에 중괄호({})로 스타일을 정의하고, 각 스타일 속성과 값은 콜론(:)으로 구분하여 지정합니다.

<div id="myId">이 요소는 아이디 선택자에 의해 스타일이 적용됩니다.</div>

위의 HTML 코드에서 <div> 요소에 myId라는 아이디를 지정하고 있습니다. 이렇게 아이디 선택자를 사용하면 해당 아이디를 가진 요소에만 스타일이 적용됩니다. 아이디는 고유한 식별자이기 때문에 한 페이지 내에서 한 번만 사용할 수 있습니다. 따라서 해당 아이디를 가진 요소에는 아이디 선택자에 지정된 스타일이 적용됩니다.