CSS 선택자: HTML 요소를 선택하는 다양한 선택자 학습

CSS 선택자에 대한 상세한 설명을 제공하겠습니다. CSS 선택자는 HTML 요소를 선택하고 스타일을 적용하는 데 사용되는 규칙입니다. 이들은 웹 페

1. 기본 선택자 (Basic Selectors)

• 요소 선택자: 특정 HTML 태그를 직접 지정합니다. 예: p { color: blue; }는 모든 <p> 요소에 스타일을 적용합니다.
• 클래스 선택자: 점(.)과 함께 사용되며, 특정 클래스를 가진 요소를 선택합니다. 예: .className { font-size: 14px; }.
• ID 선택자: 샵(#)으로 시작하며, 고유한 ID를 가진 요소를 지정합니다. 예: #uniqueId { background-color: yellow; }.
• 전체 선택자 (*): 페이지의 모든 요소를 선택합니다. 예: * { margin: 0; padding: 0; }.

2. 결합자 (Combinators)

• 자손 결합자 (Descendant Combinator): 공백( )을 사용하여 특정 요소의 자손을 선택합니다. 예: div p { color: green; }.
• 자식 결합자 (Child Combinator): >를 사용하여 바로 아래의 자식 요소만을 선택합니다. 예: ul > li { list-style-type: none; }.
• 인접 형제 결합자 (Adjacent Sibling Combinator): +를 사용하여 특정 요소 바로 다음에 오는 형제 요소를 선택합니다. 예: h1 + p { font-size: 18px; }.
• 일반 형제 결합자 (General Sibling Combinator): ~를 사용하여 특정 요소 뒤에 오는 모든 형제 요소를 선택합니다. 예: h1 ~ p { color: red; }.

3. 속성 선택자 (Attribute Selectors)

• [attr]: 특정 속성을 가진 모든 요소를 선택합니다. 예: [disabled] { color: grey; }.
• [attr=value]: 속성 값이 정확히 일치하는 요소를 선택합니다. 예: [type="text"] { background-color: blue; }.
• [attr~=value]: 공백으로 구분된 값 중 하나가 일치하는 요소를 선택합니다. 예: [class~="important"] { font-weight: bold; }.
• [attr|=value]: 특정 값이나 그 값으로 시작하는 (하이픈으로 구분된) 요소를 선택합니다. 예: [lang|="en"] { font-style: italic; }.

4. 가상 클래스 (Pseudo-classes)

• :hover: 사용자의 마우스 포인터가 요소 위에 있을 때 선택합니다. 예: a:hover { color: red; }.
• :focus: 요소가 포커스를 받았을 때 선택합니다. 예: input:focus { border-color: green; }.
• :first-child: 부모의 첫 번째 자식 요소를 선택합니다. 예: p:first-child { color: blue; }.
• :last-child: 부모의 마지막 자식 요소를 선택합니다. 예: p:last-child { color: green; }.
• :nth-child(n): 부모의 n번째 자식 요소를 선택합니다. 예: p:nth-child(2) { color: yellow; }.

5. 가상 요소 (Pseudo-elements)

• ::before: 요소의 콘텐츠 시작 부분에 콘텐츠를 삽입합니다. 예: p::before { content: '★'; }.
• ::after: 요소의 콘텐츠 끝 부분에 콘텐츠를 삽입합니다. 예: p::after { content: '★'; }.
• ::first-line: 요소의 첫 번째 줄에 스타일을 적용합니다. 예: p::first-line { font-weight: bold; }.
• ::first-letter: 요소의 첫 글자에 스타일을 적용합니다. 예: p::first-letter { font-size: 200%; }.

6. 가상 클래스와 가상 요소의 조합

• 조합 사용: 가상 클래스와 가상 요소를 결합하여 더욱 특정한 상황에 스타일을 적용할 수 있습니다. 예: a:hover::before { content: '▶'; }.

7. 그룹화 (Grouping)

• , (쉼표): 여러 선택자를 그룹화하여 동일한 스타일을 적용합니다. 예: h1, h2, h3 { font-family: Arial; }.

8. 중요도 (Specificity)

• 중요도 계산: 선택자의 중요도는 ID, 클래스, 요소 선택자의 수에 따라 달라집니다. 가장 중요도가 높은 선택자의 스타일이 적용됩니다.

9. 상속 (Inheritance)

• 상속의 원리: 특정 속성은 부모 요소에서 자식 요소로 자동으로 상속됩니다. 예: 폰트 스타일, 색상 등.

10. 미디어 쿼리 (Media Queries)

• 응답성 추가: 미디어 쿼리를 사용하여 다양한 화면 크기와 해상도에 따라 스타일을 조정합니다. 예: @media (max-width: 600px) { body { background-color: lightblue; } }.

이지의 다양한 요소에 접근하고, 원하는 스타일링을 적용하기 위한 핵심적인 부분입니다.