CSS 선택기 소개

이 강의에서는 CSS(Cascading Style Sheets)를 사용하여 HTML 시각적 요소를 향상시키는 방법을 알아봅니다. 특정 HTML 요소를 타겟팅하는 도구인 CSS 선택기부터 시작하겠습니다.

캐스케이딩 스타일 시트(CSS)

CSS는 색상, 간격, 크기 등 HTML 구성 요소의 모양을 지정합니다. 인라인 style 속성(예: <p style="color:red;"></p>)을 사용하여 개별 요소의 스타일을 지정할 수 있지만 이는 대규모 웹사이트에는 비효율적입니다.

보다 효과적인 접근 방식은 HTML의 <style></style> 섹션 내에서 요소를 사용하거나 style.css:<link>를 사용하여 HTML에 연결된 별도의 CSS 파일(예:

)을 사용하는 것입니다.

  <style>
    p {
      color: red;
      text-decoration: underline;
    }
  </style>

또는

<!-- index.html -->
<link href="style.css" rel="stylesheet">

/* style.css */
p {
  color: red;
  text-decoration: underline;
}

모든 <p></p> 요소에 동일한 스타일을 적용합니다. 브라우저 개발자 도구(예: Chrome에서 마우스 오른쪽 버튼 클릭, "검사")를 사용하면 문제 해결을 위해 적용된 스타일을 검사하고 수정할 수 있습니다.

HTML 요소 선택

p의 p { color: red; }은 모든 <p></p> 요소를 선택합니다. 더 복잡한 구조의 경우 id 및 class 속성을 ​​사용하여 더 세밀하게 제어할 수 있습니다.

클래스 및 ID 선택기

각 요소는 고유한 id을 가질 수 있습니다. ID 선택기(#idName)는 id로 요소를 대상으로 합니다. 그러나 id은 고유해야 하므로 유연성이 제한됩니다.

수업의 다양성이 더욱 향상되었습니다. 여러 요소가 동일한 클래스를 공유할 수 있습니다. 클래스 선택기(.className)는 해당 클래스가 있는 요소를 대상으로 합니다. 요소는 여러 클래스를 가질 수 있습니다(예: <p class="red-text bold"></p>).

.red-text { color: red; } red-text 클래스를 사용하여 모든 요소의 스타일을 지정합니다. p.red-text 특히 <p></p> 요소를 사용하여 red-text 요소에만 스타일을 지정합니다.

콤비네이터 선택기

DOM(문서 개체 모델)은 페이지 구조를 트리로 나타냅니다. 조합기 선택기는 이 계층 구조를 활용합니다.

• div p: <p></p> 요소(하위 항목) 내의 모든 <div> 요소를 선택합니다. <li> <code>div > p: <p></p> 요소의 직계 하위 <div> 요소만 선택합니다. <li> <code>p span: <span></span> 바로 뒤에 있는 <p></p>을 선택합니다.
• p ~ span: <span></span> 다음에 나오는 모든 <p></p> 형제를 선택합니다.


지나치게 복잡한 조합자 조합은 권장되지 않습니다. 클래스 선택기(예: .intro p)와 결합할 수 있습니다.

의사 선택기

유사 클래스 선택자는 상태에 따라 요소 스타일을 지정합니다(예: a:hover, a:active, a:visited). 유사 요소 선택기는 요소의 일부를 대상으로 합니다(예: ::first-letter).

기타 선택자

• *: 모든 요소를 ​​선택하는 범용 선택기
• 그룹 선택기(예: h1, h2, p): 여러 요소 유형을 선택합니다.
• 속성 선택기(예: p[lang], p[lang="en"]): 속성을 기반으로 요소를 선택합니다.

추가 자료:

• 반응형 디자인
• 반응형 이미지
• CSS 애니메이션

이 게시물은 원래 TheDevSpace에 게재되었습니다.