CSS 강좌 / 기본 선택자 - 요소, 클래스, ID, 속성

CSS 강좌

CSS 선택자는 스타일을 적용할 HTML 요소를 고르는 조건입니다. 요소 선택자는 태그 이름, 클래스 선택자는 반복해서 붙일 분류, ID 선택자는 문서 안의 특정 요소, 속성 선택자는 속성의 존재나 값을 기준으로 고릅니다. 먼저 고를 대상을 정한 뒤 그 대상에 맞는 선택자를 쓰면 불필요한 ID나 복잡한 규칙을 줄일 수 있습니다.

같은 HTML에서 선택 대상을 비교하기

다음 네 항목을 기준으로 선택자를 읽어 보겠습니다. A와 B는 p이면서 notice 클래스가 있고, B에는 urgent 클래스도 있습니다. C는 클래스 없는 p, D는 notice 클래스가 붙은 div입니다. 영문 A~D는 설명에서 대상을 구별하기 위한 표시일 뿐 CSS 문법은 아닙니다.

<p id="opening" class="notice" data-tags="garden visit">A: 운영 시간</p>
<p class="notice urgent">B: 우천 안내</p>
<p>C: 준비물</p>
<div class="notice">D: 안내 상자</div>

선택자	선택하는 대상	판단 기준
`p`	A, B, C	태그 이름이 p
`.notice`	A, B, D	notice 클래스 포함
`p.notice`	A, B	p이면서 notice 클래스 포함
`.notice.urgent`	B	notice와 urgent 클래스를 모두 포함
`#opening`	A	ID가 opening
`[data-tags~="visit"]`	A	공백으로 구분한 속성값 중 visit이라는 단어 포함

선택자를 읽을 때 CSS가 적용될 요소 자체에 조건이 있는지 확인하세요. p.notice의 두 조건은 같은 요소를 가리킵니다. 반면 p .notice의 공백은 p 안의 다른 요소를 찾으라는 뜻입니다. 공백에 따라 대상이 달라지는 규칙은 관계 선택자 강의에서 구조와 함께 확인할 수 있습니다.

요소 선택자와 전체 선택자

p { color: #333; }
* { box-sizing: border-box; }

p는 모든 p 요소를 고릅니다. 같은 태그를 공통으로 꾸밀 때 간단하지만, 안내문과 본문 문단을 따로 꾸미려면 클래스 등의 추가 조건이 필요합니다. 전체 선택자 *는 모든 요소를 고르는 표기입니다. 가상 요소까지 자동으로 포함하는 것은 아닙니다.

여기서 box-sizing: border-box는 너비·높이를 지정할 때 안쪽 여백과 테두리를 포함해서 계산하도록 하는 보조 설정입니다. 아직 크기 계산을 자세히 배우지 않아도 실습은 실행할 수 있습니다. 전체 선택자를 쓴다고 모든 글자색과 배경을 한꺼번에 바꿔야 하는 것은 아닙니다. 공통 설정과 특정 요소의 디자인을 나누어 생각하세요.

클래스와 ID를 어떻게 선택할까요?

.notice { background-color: #e9f7ef; }
p.notice { border-left: 4px solid #087f5b; }
.notice.urgent { font-weight: bold; }
#opening { color: #087f5b; }

클래스는 여러 요소에 재사용할 수 있습니다. HTML의 class="notice urgent"는 두 클래스 이름을 공백으로 나열한 것이며 notice urgent라는 이름 하나가 아닙니다. CSS에서는 앞에 점을 붙여 .notice, .urgent로 선택합니다. .notice.urgent는 두 이름을 모두 가진 요소에만 적용됩니다.

ID는 같은 HTML 문서 안에서 유일하게 사용합니다. 안내문이 열 개라고 같은 id="opening"을 열 번 붙이지 않습니다. 반복 디자인에는 클래스를, 특정 구역의 식별이나 페이지 안 이동에는 ID를 사용하는 편이 관리하기 쉽습니다. ID 선택자는 클래스 선택자보다 우선순위가 높으므로, 나중에 디자인을 바꾸기 위해 ID를 계속 추가하면 충돌 해결이 어려워질 수 있습니다. 규칙이 겹치면 ID와 클래스 선택자의 우선순위뿐 아니라 중요도와 레이어 등 캐스케이드 조건도 함께 확인하세요.

예제에서는 대상별 차이를 보여 주기 위해 ID로 색을 지정합니다. 실제 여러 안내문에 같은 초록색이 필요하다면 .notice 규칙에 color를 넣는 방식으로 단순화할 수 있습니다. 목적은 선택자 종류를 모두 사용하는 것이 아니라 필요한 범위만 고르는 것입니다.

속성의 존재와 값으로 선택하기

input[required] { border: 2px solid #087f5b; }
input[type="email"] { background-color: #fff4cc; }
[data-tags~="visit"] { outline: 1px dashed #777; }
a[href^="https://"] { color: #1d4ed8; }

표기	뜻	예제에 적용하면
`[required]`	required 속성이 있는 요소	필수 입력칸을 구별합니다. 값이 빈 문자열이어도 속성이 있으면 일치합니다.
`[type="email"]`	type 값이 정확히 email	이메일 입력칸을 고릅니다.
`[data-tags~="visit"]`	공백으로 구분한 값에 visit 단어 포함	garden visit에는 일치하고 revisit에는 일치하지 않습니다.
`[href^="https://"]`	href 문자열이 https://로 시작	그 문자열을 가진 링크를 고릅니다. 외부 사이트 판별 기능 자체는 아닙니다.

마지막 선택자는 같은 사이트의 절대 주소에도 일치할 수 있습니다. “https로 시작하니 외부 링크다”라고 단정해서는 안 됩니다. 또한 [data-tags="visit"]처럼 등호만 쓰면 전체 값이 정확히 visit인 경우를 찾으므로 garden visit에는 일치하지 않습니다. 값 비교 방식의 차이는 MDN의 속성 선택자 설명에서 확인할 수 있습니다.

전체 예제로 모양과 선택 범위 확인하기

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>작은 정원</title>
  <style>
* { box-sizing: border-box; }
    body { margin: 24px; font-family: sans-serif; line-height: 1.7; }
    p { color: #333; }
    .notice { background-color: #e9f7ef; padding: 12px; }
    p.notice { border-left: 4px solid #087f5b; }
    .notice.urgent { font-weight: bold; }
    #opening { color: #087f5b; }
    [data-tags~="visit"] { outline: 1px dashed #777; }
    a[href^="https://"] { color: #1d4ed8; }
    input[required] { border: 2px solid #087f5b; }
    input[type="email"] { background-color: #fff4cc; }
  </style>
</head>
<body>
<h1>작은 정원</h1>
  <p id="opening" class="notice" data-tags="garden visit">A: 매일 오전 9시에 문을 엽니다.</p>
  <p class="notice urgent">B: 우천 시 야외 프로그램을 쉽니다.</p>
  <p>C: 물병과 편한 신발을 준비하세요.</p>
  <div class="notice">D: 안내 상자입니다.</div>
  <p><a href="https://example.com/">E: 외부 안내 링크</a></p>
  <form>
    <label for="email">이메일 (필수)</label>
    <input id="email" type="email" name="email" required>
    <button type="submit">안내 신청</button>
  </form>
</body>
</html>

index.html로 저장해 열면 A·B·D에는 연한 배경과 12px 안쪽 여백이 생기고, p.notice에 해당하는 A·B에만 왼쪽 테두리가 생깁니다. B는 두 클래스를 모두 가져 굵게 보입니다. A는 ID로 초록색이 되며 visit 속성값 때문에 점선 외곽선도 생깁니다. C는 일반 문단으로 남습니다.

이메일 입력칸은 required 조건으로 테두리가 두꺼워지고 type 조건으로 배경이 노란빛이 됩니다. required의 실제 입력 검사 기능은 HTML 속성이 담당하며 CSS는 그 입력칸의 모양만 바꿉니다. 예제의 외부 링크 주소는 선택 범위 설명용입니다. 실제 서비스의 안내 링크로 사용하지는 마세요. 속성의 존재를 고르는 방식과 검증 결과를 고르는 방식은 다릅니다. 필수 입력과 폼 상태의 차이에서는 required와 오류 상태 선택자를 함께 비교합니다.

선택자를 바꾸고 결과를 예측하는 실습

p.notice를 .notice로 바꿔 왼쪽 테두리의 대상을 넓혀 보세요. 원래 A·B에만 있던 테두리가 D에도 생기는 것이 예상 결과입니다. 확인 후 원래 선택자로 되돌립니다.
B의 class를 class="urgent"로 바꿉니다. B는 여전히 p이지만 notice 조건을 잃으므로 안내 배경과 왼쪽 테두리, .notice.urgent의 굵은 글자가 사라집니다. urgent 클래스만 있다고 복합 선택자가 일치하는 것은 아닙니다.
A의 data-tags 값을 garden revisit로 바꿉니다. visit이라는 독립된 단어가 없으므로 점선 외곽선이 사라져야 합니다. visit과 revisit을 부분 문자열처럼 혼동하지 않는지 확인하세요.

각 실습은 파일을 저장한 뒤 새로고침해서 확인하고 원래 값으로 되돌립니다. 예상한 대상만 바뀌지 않으면 실제 class·id·속성 이름부터 비교하세요. 개발자 도구에서 선택한 요소에 규칙이 일치하는지 보면 선택 오류와 우선순위 충돌을 구분할 수 있습니다.

CSS 강좌

CSS 강좌 / Flexbox로 요소를 한 방향에 배치하기

Flexbox의 직접 자식, 주축과 교차축, row·column·reverse의 차이를 전체 예제로 익힙니다. 초기 크기와 키보드 순서를 비교하면서 배치가 달라지는 이유를 확인합니다.

CSS 강좌 / 색상 값과 px·em·rem·% 단위 이해하기

색상 표기와 px·em·rem·%의 계산 기준을 비교합니다. 중첩된 글자 크기와 여백이 있는 상자 예제로 실제 크기를 계산하고 개발자 도구에서 확인할 수 있습니다.

CSS 강좌 / 작은 학습 사이트를 반응형으로 꾸미는 종합 실습

작은 학습 사이트를 공통 스타일·Flexbox 헤더·유동 제목·Grid 카드 순서로 완성합니다. 전체 파일과 반응형·초점·긴 내용·움직임 감소 점검 방법을 제공합니다.

CSS / Tutorial / 마름모 만드는 방법

CSS로 삼각형을 만들 수 있다면 마름모는 쉽게 만들 수 있습니다. 삼각형을 두 개 붙이면 마름모가 되기 때문입니다. 마름모는 네 변의 길이가 같은 사각형이므로, 이등변삼각형 두 개를 붙이며 됩니다.

CSS 강좌 / 박스 모델과 margin, padding, border 이해하기

콘텐츠·padding·border·margin의 위치와 너비 계산을 도해와 실행 예제로 설명합니다. 여백 축약 규칙과 세로 margin 합치기를 비교하고 개발자 도구에서 실제 크기를 확인합니다.

CSS 강좌 / 모바일·큰 화면·확대 보기에서 레이아웃 점검하기

점검용 페이지에서 화면 폭, 확대, 긴 문자열과 키보드 조작을 확인합니다. 가로 넘침과 글자 잘림을 재현하고 원인 확인부터 수정·재점검까지 실습합니다.

CSS 강좌 / 변수 사용하는 방법: var()·상속·대체값

CSS 변수의 범위와 상속, var()의 대체값과 잘못된 값 처리 방법을 예제로 설명합니다. calc()와 단위 조합, 미디어 쿼리 조건에 변수를 사용할 수 없는 적용 한계도 확인할 수 있습니다.

CSS 강좌 / 폼 상태와 키보드 초점 꾸미기

폼의 필수·유효성·비활성·읽기 전용 상태와 키보드 초점을 구분합니다. 실제 제출 항목을 확인하고 작은 화면·큰 글자에 대응하는 전체 예제를 제공합니다.

CSS 강좌 / 넘치는 콘텐츠와 긴 문자열 처리하기

같은 내용에 visible·hidden·auto·scroll을 적용해 넘침 처리를 비교합니다. 긴 URL 줄바꿈과 실제 말줄임표 예제를 실행하고, 원문 보존과 키보드 스크롤을 함께 확인합니다.

CSS / Tutorial / 삼각형 만드는 방법

CSS의 border 속성으로 삼각형을 만들 수 있습니다. 여러 형태의 삼각형을 만들고, 그 삼각형을 회전하는 방법을 알아봅니다.