CSS 기본 선택자의 종류 (태그, 아이디, 클래스)

이번 포스트에서는 CSS의 기본 선택자의 종류들을 알아보려고 한다.

선택자의 종류에 대해서 제대로 정리하면 내용이 너무 방대해지는데, 여기서는 생활코딩의 CSS 수업 영상에서 언급한 선택자들에 대해서만 정리해보려고 한다.

이전 포스트

CSS의 탄생 배경과 HTML에 CSS를 적용하는 방법

CSS라는 언어는 어떤 목적으로 왜 태어나게 됐을까요? 디자인과 정보의 분리라는 핵심 개념부터 HTML에 CSS를 직접 적용하는 인라인 스타일, 내부 스타일 시트 방법까지 입문자를 위해 정리했습니다.

생활코딩 CSS 수업 영상: 선택자와 선언

CSS에서 선택자^Selector란 한마디로 스타일을 적용할 대상을 지목하는 이름표라고 할 수 있다.

HTML 문서에 있는 수많은 요소(태그) 중에서 "내가 꾸미고 싶은 바로 그 부분"을 지목하는 역할을 하는 것이다.

선택자 {
    속성: 값;
}

/* 실제 예시 */
h1 {
    color: blue;
}

CSS 코드는 보통 이런 구조로 이루어져 있다.

• 선택자^Selector: 누구를 꾸밀 것인가? (h1)
• 선언부^Declaration: 어떤 스타일을 줄 것인가? ({ color: blue; })

이 코드는 브라우저에게 "이 문서에서 '제목(h1)'만 찾아서 '파란색'으로 칠해줘!"라고 명령을 내리는 것과 같다.

기본 선택자의 종류

1. 태그 선택자와 아이디 선택자

2. 클래스 선택자

선택자 종류	CSS 표기법	설명
태그 선택자	h1 { ... }	특정 HTML 태그 전체에 스타일을 적용한다. (가장 넓은 범위)
아이디 선택자	#idName { ... }	HTML의 id 속성값을 찾아 적용한다. (샵(#)으로 시작)
클래스 선택자	.className { ... }	HTML의 class 속성값을 찾아 적용한다. (점(.)으로 시작)

위의 영상에서 소개한 기본 선택자들을 표로 정리하면 이렇다.

기본 선택자들의 규칙들

1. 선택자별 특징과 중요한 규칙

01. 태그 선택자: "기본값 설정"

• 특징: 페이지 내의 모든 해당 태그에 똑같은 스타일을 준다.
• 용도: "우리 사이트의 모든 p 태그 글자 크기는 16px로 하겠다"처럼 전체적인 기본 스타일을 잡을 때 쓴다.

02. 클래스 선택자: "별명 붙이기 (중복 가능)"

• 특징: 이름표를 여러 번 재사용할 수 있다.
• 규칙: 한 페이지 안에 같은 클래스 이름을 가진 요소가 여러 개 있어도 된다. 또한, 하나의 태그가 여러 개의 클래스를 가질 수도 있다. (예: <div class="box red-border">)
• 용도: "강조하고 싶은 문장들", "버튼 디자인" 등 반복되는 디자인에 사용한다.

03. 아이디 선택자: "고유한 이름 (중복 불가)"

• 특징: 가장 구체적이고 힘이 센 선택자다.
• 규칙 (중요!): 한 페이지 내에서 특정 ID는 딱 한 번만 사용해야 한다. 주민등록번호처럼 고유해야 하며, 중복해서 사용하면 브라우저가 혼란을 겪거나 자바스크립트 실행 시 오류가 발생할 수 있다.
• 용도: 로고, 상단 메뉴바(Nav), 푸터(Footer)처럼 페이지에서 단 하나만 존재하는 핵심 요소에 사용한다.

2. 선택자 간의 우선순위 규칙

만약 같은 글자에 태그, 클래스, 아이디 선택자가 서로 다른 색상을 지정하면 어떻게 될까?

CSS에는 명시도^Specificity라는 점수 제도가 있어서 더 구체적인 것이 이긴다.

아이디(#) > 클래스(.) > 태그

우선순위 순서는 이렇다.

예를 들어, <h1 class="title">무슨 색?</h1>이라고 HTML 코드를 작성했다 치자.

CSS로 h1 태그에 빨간색을 주고, 클래스 .title에 파란색을 주면 그 글자는 파란색이 된다.

클래스가 태그보다 더 구체적이기 때문이다.

다음 CSS 포스트도 선택자들에 대해서 정리할 예정이다.

이번 포스트는 여기까지!

다음 포스트

CSS 후손 선택자와 자식 선택자, 그리고 그룹 선택자

후손 선택자와 자식 선택자, 이름 때문에 헷갈리셨나요? "우리 가문 식구 전부"와 "내 직계 자식만"이라는 쉬운 비유로 그 차이점을 완벽히 정리해 드립니다. 효율적인 코드 관리를 위한 그룹 선택자 사용법과 재미있는 선택자 연습 게임 정보까지 확인해 보세요!

이 글이 도움이 됐거나 유익했다면 스크롤을 조금만 더 내려서 댓글을 남겨주세요. (비로그인도 가능합니다!)
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊

지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.