QnAi로깅

CSS selector는 HTML 요소를 선택하는 방법을 지정하는 것으로, 다양한 방식으로 요소를 선택할 수 있습니다. 아래는 대표적인 selector 구분 명칭과 간단한 예시입니다.

1. 태그 선택자 (Type Selector) - 요소의 태그 이름으로 선택하는 방식

   cssCopy code
   p { color: red; }
   

2. 클래스 선택자 (Class Selector) - 요소의 class 이름으로 선택하는 방식

   cssCopy code
   .red { color: red; }
   

3. 아이디 선택자 (ID Selector) - 요소의 id 이름으로 선택하는 방식

   cssCopy code
   #main-title { font-size: 24px; }
   

4. 자식 선택자 (Child Selector) - 특정 요소의 자식 요소를 선택하는 방식

   cssCopy code
   ul > li { list-style: none; }
   

5. 후손 선택자 (Descendant Selector) - 특정 요소의 하위 요소를 선택하는 방식

   cssCopy code
   ul li { font-weight: bold; }
   

6. 인접 형제 선택자 (Adjacent Sibling Selector) - 특정 요소의 다음 형제 요소를 선택하는 방식

   cssCopy code
   h2 + p { font-style: italic; }
   

7. 일반 형제 선택자 (General Sibling Selector) - 특정 요소의 다음 형제 요소들을 선택하는 방식

   cssCopy code
   h2 ~ p { color: blue; }
   

위의 예시는 각각 아래와 같은 기능을 수행합니다.

1. 문서 내의 모든 p 태그의 글자 색을 빨간색으로 지정합니다.
2. 문서 내의 모든 class가 "red"인 요소의 글자 색을 빨간색으로 지정합니다.
3. 문서 내의 id가 "main-title"인 요소의 글자 크기를 24px로 지정합니다.
4. ul 요소의 직계 자식인 li 요소의 리스트 스타일을 없앱니다.
5. ul 요소의 모든 하위 li 요소의 글자 굵기를 bold로 지정합니다.
6. h2 요소 다음에 나오는 p 요소의 글자를 이탤릭체로 지정합니다.
7. h2 요소 다음에 나오는 모든 p 요소의 글자 색을 파란색으로 지정합니다.