1. 선택자 (Selector)
CSS 선택자는 HTML 문서의 요소를 선택하여 스타일을 적용할 수 있도록 하는 방법이다. 선택자는 다양한 유형이 있으며, 각 선택자는 특정 기준에 따라 요소를 선택한다.
1.1 일반 선택자 (Type Selector)
일반 선택자는 HTML 태그를 기반으로 스타일을 적용한다.
- 적용 범위: 특정 태그를 가진 모든 요소
1.2 클래스 선택자 (Class Selector)
클래스 선택자는 클래스 이름을 기반으로 스타일을 적용한다.
- 적용 범위: 특정 클래스를 가진 모든 요소
- 재사용 가능한 스타일을 정의할 때 유용
1.2.1 HTML의 Class 속성
HTML의 Class 속성은 HTML 요소의 분류 및 그룹화에 사용된다.
- 사용 목적: 여러 요소에 동일한 스타일 및 JavaSript 함수 적용
- 특징:
- 하나의 요소에 여러 클래스를 부여 가능
- 하나의 클래스를 여러 요소에 적용 가능
<p class="highlight">이 텍스트는 하이라이트됩니다.</p>1.3 아이디 선택자 (ID Selector)
아이디 선택자는 아이디를 기반으로 스타일을 적용한다.
- 적용 범위: 특정 아이디를 가진 단 하나의 요소
1.3.1 HTML의 ID 속성
HTML의 ID 속성은 특정 HTML 요소에 고유한 식별자를 제공한다.
- 사용 목적: 특정 요소에 접근 및 스타일 적용
- 특정: ID는 문서 내에서 유일해야함 (중복 X)
<p id="introduction">이 텍스트는 서문입니다.</p>2. 콤비네이터 (Combinators)
콤비네이터는 여러 요소를 결합하여 더 복잡한 선택 규칙을 생성한다.
2.1 자식 콤비네이터 (Child Combinator)
자식 콤비네이터는 특정 요소의 직계 자식만 선택한다.
div > p {
color: blue
}2.2 후손 콤비네이터 (Descendant Combinator)
후손 콤비네이터는 특정 요소의 모든 후손을 선택한다.
div p {
color: blue
}<body> <div> <p>직계자식 <section> <p>후손</p> </section> </p> </div> </body>
자식 콤비네이터 후손 콤비네이터 직계자식 직계자식 후손 후손
거북선통통통통