HTML+CSS+자바스크립트 웹표준의 정석 13장 - CSS고급 선택자

ttt-1-2·2025년 5월 17일

HTML+CSS+자바스크립트 웹표준의 정석

목록 보기

13/17

13-1 연결 선택자

💡 하위 요소, 자식 요소, 손자 요소

<section>         ← 부모
  <p>             ← 자식
    <span>        ← 손자
    </span>
  </p>
</section>

하위 선택자(descendant selector)

하위 선택자는 부모 안에 있는 모든 하위 요소를 선택할 수 있어서 자손 선택자라고도 부른다.

기본형: 상위요소 하위요소

상위 요소와 하위 요소를 공백으로 구분한다.

	/* Do it! section 요소의 모든 하위 p 요소의 스타일 바꾸기 */
    section p {color: blue;}

자식 선택자(child selector)

자식 선택자는 하위 선택자와 다르게 자식 요소에만 스타일을 적용하다

기본형: 부모요소 > 자식요

    /* Do it! section 요소의 자식 p 요소의 스타일 바꾸기 */
    section > p { color: blue; }

💡 형 요소, 동생 요소

같은 부모를 가진 요소들을 형제 요소라고 한다.
먼저 나오는 요소를 형 요소, 나중에 나오는 요소를 동생 요소라고 표현할 수 있다.

<section>
  <h1>제목</h1>       ← 형 요소
  <p>내용입니다.</p>   ← 동생 요소
</section>

인접 형제 선택자

형제 요소 중에서 첫 번째 동생 요소에만 선택한다.

기본형: 요소1 + 요소2

    /* Do it!  h1 요소의 형제 요소 중 첫번째 p 요소의 스타일 바꾸기 */
    h1 + p { 
      background-color: #222;
      color: #fff;
     }

형제 선택자

형제 선택자는 인접 형제 선택자와 달리 모든 형제 요소에 적용된다.

기본형: 요소1 ~ 요소2

    /* Do it!  h1 요소와 형제인 모든 p 요소의 스타일 바꾸기 */
    h1 ~ p {
      background-color: #222;
      color: #fff;
    }

13-2 속성 선택자

#[속성] 선택자

HTML 요소 중에서 특정 속성이 있는 요소만 선택할 때 사용한다.

	/* Do it! href 속성이 있는 a 요소의 스타일 지정하기 */
	a[href] {   /* a요소 중에서 href속성값이 있는 요소에만 스타일 적용 */
		background: yellow;
		border: 1px solid #ccc;
		font-weight: normal;
	}

#[속성 = 속성값] 선택자

특정 속성값을 정확히 가진 요소만 선택할 때 사용한다.

기본형:

[속성=속성값] {
  스타일;
}

#[속성 ~= 값] 선택자

특정 속성값이 포함된 요소에 스타일 적용하기

/* Do it! class 속성 값에 button이 포함된 요소에 스타일 지정하기 */
		[class~="button"] {
			box-shadow: rgba(0,0,0,0.4, green, blue, alpha) 4px 4px;
			border-radius: 5px;
		}

#[속성 |= 값] 선택자

속성값이 특정 값과 일치하거나, 값 뒤에 -가 붙은 형태일 때 해당 요소를 선택한다.

	/* Do it! 속성 값의 시작 부분이 일치하는 요소에라 스타일 지정하기 */
	a[title |= us] {
		background: url(images/us.png) no-repeat left center;
	}
	a[title |= jap] {
		background: url(images/jp.png) no-repeat left center;
	}
	a[title |= chn] {
		background: url(images/ch.png) no-repeat left center;
	}

#[속성 ^= 값] 선택자

속성값이 특정 값으로 시작하는 요소를 선택할 때 사용된다.

<a href="https://example.com/eng">영어 페이지</a>
<a href="https://example.com/esp">스페인어 페이지</a>
<a href="https://example.com/fra">프랑스어 페이지</a>

[href ^= "https://example.com/eng"] {
  color: blue;
}

href="https://example.com/eng" → 선택됨
href="https://example.com/esp" → 선택되지 않음
href="https://example.com/fra" → 선택되지 않음

#[속성 $= 값] 선택자

속성값이 특정 값으로 끝나는 요소를 선택할 때 사용된다.

#[속성 *=값] 선택자

일부 속성 값이 일치하는 요소를 선택할 때 사용된다

/* Do it! 속성 값의 일부가 일치하는 요소에 스타일 지정하기 */
	a[href *= w3] {
		background: blue;
		color: white;
	}

<ul>
	<li><a href="https://html.spec.whatwg.org/">HTML 표준안 사이트</a></li>
	<li><a href="https://caniuse.com/">HTML 지원 여부 체크</a></li>
	<li><a href="https://www.w3.org/TR/css3-mediaqueries">미디어쿼리</a></li>
	<!--href의 속성값 중에서 "w3"가 일치하므로 스타일을 적용-->	
</ul>

속성 선택 자 7가지

선택자	선택요소	예시
`[속성]`	특정 속성을 가진 모든 요소	`[type]` → `input`, `textarea` 등 모든 type 속성 가진 요소
`[속성="값"]`	특정 속성값을 가진 요소	`[type="text"]` → `input` 요소 중 `type="text"`인 것들
`[속성~=값]`	지정한 속성값이 포함된 요소 (단어별)	`[class~="button"]` → `class`에 "button" 포함된 요소들
`[속성	= 값]`	지정한 속성값으로 포함된요서 (하이픈 포함, 단어별)
`[속성^=값]`	속성값이 특정 값으로 시작하는 요소	`[href^="https"]` → `href` 속성이 `https`로 시작하는 링크
`[속성$=값]`	속성값이 특정 값으로 끝나는 요소	`[href$=".jpg"]` → `href` 속성이 `.jpg`로 끝나는 이미지 링크
`[속성*=값]`	속성값에 특정 값을 포함하는 요소	`[src*="logo"]` → `src` 속성에 "logo"가 포함된 이미지들

13-3 가상 클래스와 가상 요소

가상 클래스

사용자 동작에 반응하는 가상 클캐스

가상 클래스는 요소의 특정 상태(예: 링크를 클릭하거나 마우스를 올렸을 때)에 스타일을 적용하는 CSS 선택자입니다.

:link: 아직 방문하지 않은 링크
:visited: 이미 방문한 링크
:hover: 마우스를 올렸을 때
:active: 사용자가 요소를 클릭할 때 활성화된 상태의 요소.
:focus: 사용자가 요소에 포커스를 맞춘 상태 (예: 입력창에 클릭하거나 탭으로 이동).

요소 상태에 따른 가상 클래스

:target: 현재 URL의 해시(#)와 일치하는 id를 가진 요소에 스타일을 적용한다
- 예시: #section1:target { background-color: yellow; }
:enabled: 사용 가능한(활성화된) 폼 요소에 스타일을 적용한다
- 예시: input:enabled { background-color: lightgray; }
:disabled: 비활성화된 폼 요소에 스타일을 적용한다
- 예시: input:disabled { background-color: gray; }
:checked: 체크된 상태의 폼 요소(체크박스, 라디오 버튼 등)에 스타일을 적용한다
- 예시: input:checked { background-color: green; }

문서 구조를 사용하는 가상 클래스

:first-child: 부모 요소의 첫 번째 자식 요소에 스타일을 적용한다
:last-child: 부모 요소의 마지막 자식 요소에 스타일을 적용한다
:only-child: 부모 요소의 유일한 자식 요소에 스타일을 적용한다
:nth-child: 부모 요소의 특정 순서에 있는 자식 요소에 스타일을 적용한다
:nth-of-type: 부모 요소 내에서 특정 타입의 순서에 있는 자식 요소에 스타일을 적용한다

논리적으로 조합하는 가상 클래스

:not: 특정 선택자에 해당하지 않는 요소를 선택하여 스타일을 적용한다
- 예시: div:not(.active) → class="active"가 아닌 모든 div 요소에 스타일을 적용한다
:is: 여러 선택자 중 하나라도 일치하는 요소에 스타일을 적용한다
- 예시: :is(h1, h2, h3) → h1, h2, h3 중 해당되는 요소에 스타일을 적용한다
:has: 특정 자식 요소나 후손 요소를 포함한 요소에 스타일을 적용한다 (주로 JavaScript나 최신 브라우저에서 지원)
- 예시: div:has(img) → 내부에 img 태그가 있는 div 요소에 스타일을 적용한다

    /* Do it! :has 가상 선택자 사용하기 */
    nav:has(a:hover) a:not(:hover) {
      opacity: 0.3;
    }
    
    /* 1) nav요서에 a:hover 스탈이 있다면 */
    /* 2) :hover 선택자가 적용되지 않는 요소를 선택한다 */

💡 가상 클래스를 더 자세히 공부하고 싶다면 drafts.csswg.ord/selectors 사이트를 참고하세요

가상 요소

::first-line: 요소의 첫 번째 줄에 스타일을 적용
::first-letter: 요소의 첫 글자에 스타일을 적용

		/* Do it! 단락의 첫번째 글자에 스타일 지정하기 */
	   p::first-letter {
      font-size: 2em;
      font-weight: bold;

::before: 요소 앞에 가상의 콘텐츠를 삽입
::after: 요소 뒤에 가상의 콘텐츠를 삽입

    /* Do it! 가상 요소를 사용해 내용/스타일 추가하기 */
    h1::before {
      content: "*";
      color: red;
      margin-right: 5px;
    }
    h1::after {
      content: "🎉";
      margin-left: 10px;
    }

13-4 CSS 함수 살펴보기

:root 가상 클래스와 var() 함수

CSS 변수:
- :root 가상 클래스는 CSS 변수를 선언하기 위해 사용된다.

/*문서의 배경색을 지정하는 --bg-color변수*/
:root {
	--bg-color: #222;
}

var() 함수는 앞서 정의한 CSS 변수를 호출할 때 사용한다.

:root {
	--main-bg-color: #222;
	--main-text-color: #fff;
}
body {
	background-color: var(--main-bg-color);
	color: var(--main-text-color);
}

calc() 함수

calc() 함수는 계산식을 사용해서 속성값을 사용하게 해준다.

기본형: calc(계산식)
주의점: (+) 더하기, (-) 빼기 연산자: 사용할 때 연산자 앞뒤에 공백을 두어야 한다.

/*nav 요소의 너비*/
nav {
	width: calc(100% - 80px);
}

nav {
	width: calc(100% - -80px
}

min(), max() 함수

기본형:

(최솟값): min(값1, 값2,…)

(최댓값): max(값1, 값2,…)

	/* min(값) 중에 가장 작은 값 적용된다 */
    .heading {
      width: min(100%, 700px);
    }
   
   /* max(값) 중에 가장 작은 값 적용된다 */
	   .heading h1 {
      font-size: max(3vw, 2em);
    }

clamp() 함수

기본형: clamp(최솟값, 최적값, 최댓값)

→ 3가지 매개변수: 화면에 따라 바꿀 수 있는데, 최솟값보다 작아질 수 없고 최댓값보다 커질 수 없다.

filter 속성과 함수

기본형: filter: 함수
- blur() 함수: filter: blur(흐림정도)
- brightness() 함수: filter: brightness(밝기 정도)
- constrast() 함수: filter: contrast(대비 정도)
- drop-shadow() 함수: filter: drop-shadow(가로 오프셋, 세로 오프셋, 흐림 정도, 번짐 정도, 그림자색)
- grayscale() 함수: filter: grayscale(회색조 강도)
- ivert() 함수: filter: invert(반점 정도)
- sepia() 함수: filter: sepia(세피아 강도)
- opacity() 함수: filter: opacity(불투명도)
- hue-rotate() 함수: filter: hue-rotate(각도)
- saturate() 함수: filter: saturate(채도)

  /* Do it! filter 함수 사용해서 스타일 지정하기 */
  .blue { filter: blur(5px); } /* 흐리게 */
  .brightness { filter: brightness(2); } /* 밝기 2배로 */
  .contrast { filter: contrast(200%); } /* 대비 2배로 */
  .drop-shadow { filter: drop-shadow(16px 16px 10px black); } /* 그림자 추가 */
  .grayscale { filter: grayscale(100%); } /* 회색조 */
  .invert { filter: invert (invert(100%)); } /* 전체 색상 반점 */
  .sepia { filter: sepia(100%); } /* 세피아 톤으로 변경 */
  .opacity { filter: opacity(50%); } /* 반투명하게 */
  .hue-rotate { filter: hue-rotate(90deg); } /* 모든 hue값을 90도 이동 */
  .saturate { filter: saturate(200%); } /* 채도 2배로 */

ttt-1-2

이전 포스트

HTML+CSS+자바스크립트 웹표준의 정석 12장 - CSS그리드 레이아웃으로 배치하기

다음 포스트

HTML+CSS+자바스크립트 웹표준의 정석 13장 - CSS고급 선택자