CSS 강의 Ep02_1 - 선택자(Selector) | 기본선택자 | 웹 개발 입문 | 함께 웹 개발에 입문해 보는건 어떨까요?

📚 선택자란 무엇인가

선택자는 HTML 문서에서 특정 요소를 선택하여 스타일을 적용하거나 조작할 수 있는 CSS의 기본 개념입니다. 선택자는 페이지의 특정 부분을 선택하여 그 부분에 스타일을 지정할 수 있게 해주며, 이를 통해 보다 정교한 디자인을 구현할 수 있습니다. 선택자는 크게 세 가지 기본 유형으로 나뉘는데, 바로 타입 선택자, 클래스 선택자, ID 선택자입니다. 각각의 선택자는 특정한 규칙에 따라 요소를 선택하며, 각 요소에 맞는 스타일을 적용합니다. 선택자를 사용하는 방법을 이해하는 것은 웹 디자인과 개발의 핵심적인 기술 중 하나입니다.

🎨 HTML 태그 선택하는 방법

HTML 태그를 선택하는 방법은 다양합니다. 가장 기본적인 방법은 태그의 이름을 직접 선택하는 타입 선택자입니다. 또 다른 방법으로는 클래스나 ID를 활용하여 특정 요소를 선택하는 방법이 있습니다. 각 방법은 특정한 상황에 따라 유용하게 사용될 수 있습니다. 예를 들어, 특정 태그를 전체적으로 스타일링하고 싶다면 타입 선택자를 사용하고, 특정한 그룹의 요소에만 스타일을 적용하고 싶다면 클래스 선택자를 사용하면 됩니다. 또한, 페이지 내에서 유일한 요소에 스타일을 적용하고 싶다면 ID 선택자가 적합합니다.

🏷️ 타입 선택자

타입 선택자는 HTML 문서 내의 특정 태그에 스타일을 적용합니다. 예를 들어, 모든 <p> 태그에 같은 스타일을 적용하고 싶다면 타입 선택자를 사용하면 됩니다. 타입 선택자는 스타일시트에서 태그 이름을 직접 작성하여 적용합니다. 이러한 선택자는 페이지에 있는 모든 특정 태그를 한 번에 스타일링할 수 있어 편리합니다. 그러나 너무 많은 스타일을 한꺼번에 적용하면 페이지의 일관성을 해칠 수 있으므로 주의가 필요합니다. 타입 선택자는 주로 기본적인 스타일 설정에 사용됩니다.

🧩 클래스 선택자

클래스 선택자는 특정 그룹의 요소를 선택하여 스타일을 적용할 때 사용됩니다. 클래스 선택자는 CSS에서 점(.)과 클래스 이름을 조합하여 작성합니다. 이 선택자는 여러 요소에 동일한 스타일을 적용할 수 있어, 반복적인 스타일링 작업을 줄일 수 있습니다. 클래스 선택자는 특히 여러 요소에 동일한 스타일을 적용해야 할 때 유용합니다. 예를 들어, 강조해야 하는 텍스트나 특정 레이아웃을 가진 여러 요소에 동일한 스타일을 적용할 때 클래스 선택자를 사용할 수 있습니다.

🔍 ID 선택자

ID 선택자는 페이지 내에서 유일한 요소를 선택하여 스타일을 적용합니다. ID 선택자는 해시(#)와 ID 이름을 조합하여 작성합니다. 이 선택자는 특정한 단일 요소에 스타일을 적용할 때 유용합니다. ID 선택자는 특히 페이지 내에서 고유한 스타일을 적용해야 할 때 사용됩니다. 예를 들어, 헤더나 푸터와 같은 특정 영역에만 스타일을 적용하고자 할 때 ID 선택자를 사용할 수 있습니다. ID 선택자는 한 페이지 내에서 중복되지 않아야 하므로, 스타일 적용 시 주의가 필요합니다.

🌐 공식사이트

공식사이트 링크