[TIL] CSS: 조합 선택자와 속성 선택자를 활용한 정교한 스타일링

• CSS 가상 클래스 선택자 요약 - 요소의 특정 상태(링크, 포커스 등)를 제어하는 선택자 리마인드
• Combination Selector (연결 선택자) - 자손, 자식, 형제 등 요소 간의 계층 구조를 활용해 스타일을 적용하는 방법
• Attribute Selectors (속성 선택자) - HTML 요소의 특정 속성 유무나 속성값의 문자열 패턴을 매칭하여 스타일을 적용하는 방법

---

 

가상 클래스 선택자 요약 (리마인드)

링크 상태 제어

:link - 방문 전 링크

:visited - 방문 후 링크

:hover - 마우스 오버

:active - 클릭 중

활성화 및 폼 상태 제어

:focus - 포커스 상태

:target - 현재 활성화된 앵커

:enabled - 활성화된 상태

:disabled - 비활성화된 상태

:checked - 체크된 상태

 

---

 

Combination Selector

요소들 사이의 관계를 이용해 스타일을 적용하는 CSS 연결 선택자

단순히 하나의 태그를 선택하는 것을 넘어 계층 구조를 활용해 정교하게 스타일을 입힌다.

 

---

 

 

자손 선택자 (Descendant Selector)

특정 요소 내부에 포함된 모든 해당 요소를 선택한다.

기호 - 공백을 사용하여 구분한다.

특징 - 부모 안에 있기만 하면 하위 계층 깊이에 상관없이 모두 선택한다.

용도 - 특정 구역 안에 있는 모든 지정 태그의 스타일을 일괄로 바꿀 때 유용하다.

 

---

자식 선택자 (Child Selector)

특정 요소의 직계 자식만 선택한다.

기호 - 꺽쇠 기호(>)를 사용한다.

특징 - 바로 아래 계층에 있는 요소만 선택하며 그 아래 손자 계층은 무시한다.

용도 - 구조가 복잡할 때 의도치 않은 하위 요소까지 스타일이 적용되는 것을 방지한다.

 

---

인접 형제 선택자 (Adjacent Sibling Selector)

특정 요소 바로 다음에 오는 첫 번째 형제만 선택한다.

기호 - 더하기 기호(+)를 사용한다.

특징 - 같은 부모를 공유하는 형제들 중 기준 요소 바로 뒤에 인접해 있는 요소 하나만 고른다.

용도 - 제목(h1) 바로 뒤에 오는 첫 번째 문단(p)에만 특별한 여백을 줄 때 자주 쓴다.

 

---

일반 형제 선택자 (General Sibling Selector)

특정 요소 뒤에 오는 모든 형제를 선택한다.

기호 - 물결 기호(~)를 사용한다.

특징 - 기준 요소보다 뒤에 있기만 하면 바로 옆이 아니더라도 모든 형제 요소를 선택한다.

용도 - 특정 요소 이후에 등장하는 모든 콘텐츠의 스타일을 일괄 변경할 때 쓴다.

 

---

[표] 연결 선택자 한눈에 요약표

선택자	기호	의미	선택 범위
자손	(공백)	A 안의 모든 B	자식부터 증손자까지 하위 요소 전부 포함
자식	>	A 바로 밑의 B	직계 자식만 포함
인접 형제	+	A 바로 뒤의 B	바로 인접한 형제 1개
일반 형제	~	A 뒤에 오는 모든 B	순서상 뒤에 있는 모든 형제

 

---

[예제 코드] 계층 구조 스타일링

CSS

 

/* 1. 자손 선택자: section 안의 모든 span은 노란색 배경 */
section span { background-color: yellow; }

/* 2. 자식 선택자: section 직속 자식인 p만 빨간 글씨 */
section > p { color: red; }

/* 3. 인접 형제 선택자: h2 바로 뒤의 p에 밑줄 */
h2 + p { text-decoration: underline; }

/* 4. 일반 형제 선택자: h2 뒤의 모든 div에 테두리 */
h2 ~ div { border: 1px dashed blue; }

<section>
  <p>나는 자식 p입니다. (빨간색)</p>
  <div>
    <p>나는 손자 p입니다. (검정색)</p>
    <span>나는 손자 span입니다. (노란 배경)</span>
  </div>
  
  <h2>소제목</h2>
  <p>나는 h2 바로 뒤의 p입니다. (밑줄)</p>
  <p>나는 그냥 뒤에 있는 p입니다.</p>
  <div>형제 div 1 (파란 테두리)</div>
  <div>형제 div 2 (파란 테두리)</div>
</section>

 

---

 

학습 정리

• 공백은 깊이 상관없이 '안쪽' 전부, **>**는 딱 '한 단계 밑'만 본다.
• 형제 선택자(+, ~)는 반드시 코드 순서상 뒤에 있는 요소만 선택할 수 있다. (앞의 형제는 선택 불가)
• 선택자를 너무 길게 연결하면(예: div > ul > li > a) 코드가 복잡해지므로 적절한 클래스명과 병행하는 것이 좋다.

 

 

 

---

 

Attribute Selectors

태그나 클래스 이름이 아닌, 요소가 가진 속성 (Attribute) 과 그 값을 조건으로 스타일을 입힌다.

HTML 구조를 변경하지 않고도 특정 속성을 가진 요소들만 핀셋처럼 골라낼 수 있다.

 

---

기본 속성 선택자

특정 속성이 있는지, 혹은 속성값이 정확히 일치하는지 확인한다.

 

[속성] - 해당 속성을 가지고 있는 모든 요소를 선택한다.

[속성="값"] - 속성값이 지정한 값과 정확히 일치하는 요소를 선택한다.

 

CSS

/* title 속성을 가진 모든 요소 */
[title] { border-bottom: 2px dotted orange; }

/* target 속성이 "_blank"인 링크만 선택 */
a[target="_blank"] { color: red; }

 

---

 

 

문자열 매칭 선택자 (패턴 매칭)

속성값의 일부만 일치해도 스타일을 적용할 수 있는 유연한 선택자이다.

 

[속성^="값"] - 값이 특정 문자로 시작하는 요소를 선택한다.

[속성$="값"] - 값이 특정 문자로 끝나는 요소를 선택한다.

[속성*="값"] - 값이 특정 문자를 포함하고 있는 요소를 선택한다.

 

CSS

/* href가 https로 시작하는 링크 (외부 링크) */
a[href^="https"] { font-weight: bold; }

/* href가 .pdf로 끝나는 링크 (파일 다운로드) */
a[href$=".pdf"] { color: green; }

/* class 이름에 'btn'이 포함된 모든 요소 */
[class*="btn"] { padding: 10px; border-radius: 5px; }

 

---

 

단어 및 언어 선택자

띄어쓰기로 구분된 단어나 특정 언어 코드를 찾을 때 사용한다.

 

[속성~="값"] - 띄어쓰기로 구분된 여러 값 중 하나가 일치하는 요소를 선택한다.

[속성|="값"] - 값이 정확히 일치하거나 해당 값 뒤에 하이픈으로 연결된 단어로 시작하는 요소를 선택한다.

 

CSS

/* class 목록 중 'important'라는 단어가 포함된 요소 */
[class~="important"] { background-color: yellow; }

/* lang 속성이 'ko'이거나 'ko-KR'인 요소 */
[lang|="ko"] { font-style: italic; }

 

---

[표] 속성 선택자 기호 요약표

선택자 기호	의미	활용 예시
[attr]	속성 존재 여부	[required]
[attr="val"]	값이 정확히 일치	[type="submit"]
[attr^="val"]	값의 시작 부분 일치	[href^="https"]
[attr$="val"]	값의 끝 부분 일치	[src$=".png"]
[attr*="val"]	값의 일부분 포함	[class*="btn"]

 

---

 

[예제 코드] 입력창 유형별 스타일링

CSS

 

<style>
  /* 모든 input 중 필수 입력(required) 속성이 있는 것 */
  input[required] { border: 2px solid red; }

  /* type이 "text"인 입력창만 선택 */
  input[type="text"] { width: 300px; }

  /* type이 "password"인 입력창만 선택 */
  input[type="password"] { background-color: #f0f0f0; }

  /* name 속성에 'user'가 포함된 모든 요소 */
  input[name*="user"] { color: blue; }
</style>

<form>
  <input type="text" name="user-id" placeholder="아이디" required>
  <input type="password" name="user-pw" placeholder="비밀번호">
  <input type="tel" name="phone" placeholder="전화번호">
</form>

 

학습 정리

• 속성 선택자는 HTML에 클래스를 일일이 추가하지 않고도 기존 속성만으로 스타일을 제어할 수 있게 해준다.
• 특히 input 태그의 각 타입을 구분하거나, 파일 확장자에 따라 아이콘을 붙일 때 매우 유용하다.
• 대소문자를 구분하지 않고 싶다면 닫는 대괄호 앞에 i를 붙일 수 있다 (예: [href$=".jpg" i]).