CSS 셀렉터의 기본 이해 - ID, 클래스, 요소 셀렉터의 차이점과 사용법

CSS는 웹 페이지의 스타일을 정의하는 강력한 도구입니다. CSS를 효과적으로 사용하려면 HTML 요소를 선택하고 스타일을 적용하는 방법을 이해해야 합니다. 이를 위해 CSS는 '셀렉터'라는 개념을 사용합니다. 이 글에서는 CSS에서 가장 기본적이고 중요한 셀렉터인 요소 셀렉터, 클래스 셀렉터, ID 셀렉터의 차이점과 사용법을 설명하겠습니다.

요소 셀렉터(Element Selector)

요소 셀렉터는 가장 기본적인 CSS 셀렉터로, HTML 문서 내의 특정 HTML 태그(요소)에 스타일을 적용하는 데 사용됩니다. 요소 셀렉터는 태그 이름을 직접 사용하여 해당 태그의 모든 요소에 동일한 스타일을 적용합니다.

사용법 예시:

p {
    color: blue;
    font-size: 16px;
}

위의 코드에서는 모든 <p>(문단) 태그에 대해 텍스트 색상을 파란색으로 설정하고, 글꼴 크기를 16px로 설정합니다. 이 스타일은 문서 내의 모든 <p> 요소에 적용됩니다.

클래스 셀렉터(Class Selector)

클래스 셀렉터는 HTML 요소에 스타일을 적용할 때 자주 사용되는 강력한 도구입니다. 특정 클래스 이름이 할당된 모든 요소에 스타일을 적용할 수 있습니다. 클래스 셀렉터는 점(.) 기호를 사용하여 정의하며, 여러 요소에 동일한 스타일을 적용하고자 할 때 유용합니다.

사용법 예시:

.highlight {
    background-color: yellow;
    font-weight: bold;
}

<p class="highlight">이 문장은 강조되어 있습니다.</p>
<p>이 문장은 일반적인 문장입니다.</p>

위의 예에서 .highlight 클래스 셀렉터는 해당 클래스가 적용된 모든 요소에 배경색을 노란색으로, 글자를 굵게 만드는 스타일을 적용합니다. 따라서 첫 번째 문단만 강조 표시됩니다.

ID 셀렉터(ID Selector)

ID 셀렉터는 특정 HTML 요소에 고유한 스타일을 적용할 때 사용됩니다. HTML 문서 내에서 ID는 고유해야 하며, 한 번만 사용됩니다. ID 셀렉터는 해시(#) 기호를 사용하여 정의하며, 특정 요소 하나에만 스타일을 적용할 때 유용합니다.

사용법 예시:

#header {
    background-color: lightblue;
    padding: 20px;
    text-align: center;
}

<div id="header">이것은 헤더입니다.</div>

위의 코드에서 #header ID 셀렉터는 id="header" 속성을 가진 요소에만 스타일을 적용합니다. 이 경우, 배경색은 연한 파란색으로 설정되고, 요소의 내용은 중앙에 정렬됩니다.

요소 셀렉터 vs. 클래스 셀렉터 vs. ID 셀렉터

1. 범위:
   • 요소 셀렉터는 문서 내의 모든 특정 태그에 스타일을 적용합니다.
   • 클래스 셀렉터는 문서 내에서 여러 요소에 동일한 스타일을 적용할 수 있습니다.
   • ID 셀렉터는 문서 내에서 오직 하나의 특정 요소에만 스타일을 적용합니다.
2. 사용 빈도:
   • 요소 셀렉터는 간단한 스타일링에 자주 사용되지만, 다른 셀렉터와 조합하여 더 구체적인 스타일링을 적용할 수 있습니다.
   • 클래스 셀렉터는 공통된 스타일을 여러 요소에 적용할 때 가장 자주 사용됩니다.
   • ID 셀렉터는 특정 요소 하나에만 스타일을 적용할 때 사용되지만, 너무 자주 사용하면 유지보수가 어려워질 수 있습니다.
3. 우선순위:
   • ID 셀렉터는 클래스 셀렉터보다, 클래스 셀렉터는 요소 셀렉터보다 우선순위가 높습니다. 동일한 요소에 여러 스타일이 적용될 때, 우선순위에 따라 최종 스타일이 결정됩니다.

결론

CSS 셀렉터는 웹 페이지의 스타일을 정의하는 데 있어 핵심적인 역할을 합니다. 요소 셀렉터, 클래스 셀렉터, ID 셀렉터는 각각 다른 목적과 용도로 사용되며, 이를 올바르게 활용하면 보다 효율적이고 유지보수하기 쉬운 스타일시트를 작성할 수 있습니다. 웹 개발자라면 이 세 가지 셀렉터의 차이점과 사용법을 확실히 이해하고, 적절히 활용할 수 있어야 합니다. 이를 통해 웹 페이지를 더욱 세련되고 일관성 있게 디자인할 수 있을 것입니다.