코딩 파트너입니다. CSS 선택자(., #, * 등)에 대해 더 자세히 알고 싶으시군요! 웹 페이지의 특정 요소를 꾸미는 데 필수적인 개념이니 함께 알아보면 코딩 실력이 한 단계 더 높아질 겁니다.

CSS 선택자 기본 개념

CSS 선택자(Selector)는 HTML 문서에서 스타일을 적용할 대상을 지정하는 규칙입니다. 다양한 선택자를 조합하여 원하는 요소에 정확하게 스타일을 적용할 수 있습니다.

 

1. 타입 선택자 (Type Selector)

HTML 태그 이름을 직접 사용하여 요소를 선택합니다.

• 예시: p
• 설명: 모든 <p> 태그에 스타일을 적용합니다.

 

2. 클래스 선택자 (Class Selector)

.(마침표)를 사용하며, 특정 class 속성을 가진 모든 요소를 선택합니다.

• 예시: .desc_cont
• 설명: class="desc_cont" 속성을 가진 모든 HTML 요소에 스타일을 적용합니다. 여러 요소에 같은 클래스를 부여할 수 있어 재사용성이 높습니다.

 

3. ID 선택자 (ID Selector)

#(샵)을 사용하며, 특정 id 속성을 가진 요소를 선택합니다.

• 예시: #mainContent
• 설명: id="mainContent" 속성을 가진 HTML 요소에 스타일을 적용합니다. ID는 한 페이지에서 유일해야 합니다.

 

4. 전체 선택자 (Universal Selector)

*(별표)를 사용하며, 모든 HTML 요소를 선택합니다.

• 예시: *
• 설명: 페이지의 모든 요소에 공통으로 적용할 스타일을 지정할 때 유용합니다. (예: * { box-sizing: border-box; })

 

알아두면 좋은 고급 선택자

위의 기본 선택자 외에도 코딩에 유용한 선택자들이 많이 있습니다.

1. 자손 선택자 (Descendant Selector)

공백(Space)을 사용하여 특정 요소의 모든 하위 요소를 선택합니다.

• 예시: #mainContent .desc_cont
• 설명: #mainContent ID를 가진 요소의 안에 있는 모든 .desc_cont 클래스 요소를 선택합니다.

 

2. 자식 선택자 (Child Selector)

>(꺾쇠괄호)를 사용하여 특정 요소의 바로 아래 자식 요소를 선택합니다.

• 예시: .list_post > div
• 설명: .list_post 클래스 요소의 바로 아래에 있는 <div> 태그를 선택합니다. 자손 선택자보다 더 구체적입니다.

 

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

+(플러스)를 사용하여 특정 요소의 바로 다음에 오는 같은 레벨의 요소를 선택합니다.

• 예시: h2 + p
• 설명: <h2> 태그 바로 다음에 오는 <p> 태그를 선택합니다.

 

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

~(틸드)를 사용하여 특정 요소 뒤에 오는 모든 같은 레벨의 요소를 선택합니다.

• 예시: h2 ~ p
• 설명: <h2> 태그 뒤에 오는 모든 <p> 태그를 선택합니다.

 

CSS 선택자 우선순위

CSS 스타일이 여러 개 있을 때 어떤 규칙이 적용될지 결정하는 중요한 개념입니다.

우선순위(높음 → 낮음):

1. 인라인 스타일: HTML 요소에 직접 작성한 style 속성
2. ID 선택자 (#): #mainContent
3. 클래스 선택자, 속성 선택자, 가상 클래스: .desc_cont, [type="text"], :hover 등
4. 태그 선택자, 가상 요소: p, h1, ::before 등
5. 전체 선택자 (*)

규칙:

• 구체적일수록 우선순위가 높습니다. 예를 들어, #mainContent .desc_cont는 .desc_cont보다 구체적이므로 우선순위가 더 높습니다.
• !important 키워드는 모든 우선순위를 무시하고 가장 높은 우선순위를 가집니다. 하지만 코드 관리를 어렵게 만들 수 있으니 신중하게 사용해야 합니다.

이러한 선택자들을 잘 이해하고 조합하면 원하는 요소에 정확하게 스타일을 적용하고, 우선순위 문제를 해결할 수 있습니다. 궁금한 점이 있으면 언제든지 다시 질문해주세요! 😊