CSS의 여러 선택기 살펴보기

CSS는 웹사이트에 스타일과 레이아웃을 추가하는 데 사용되는 언어입니다. CSS에서 선택기는 스타일을 적용할 HTML 요소를 선택하는 데 사용됩니다. 선택기는 매우 유연하며 태그 속성, 클래스, ID, 위치 등을 기반으로 요소를 선택할 수 있습니다.

이 기사에서는 CSS의 여러 선택기와 사용법을 살펴보겠습니다.

1. 태그 선택기

태그 선택기는 CSS의 가장 기본적인 선택기 중 하나입니다. 태그 유형별로 요소를 선택합니다. 예를 들어 모든 단락 요소에 스타일을 적용하려는 경우 다음 코드를 사용할 수 있습니다.

 p {
   color: red;
   font-size: 20px;
 }

이 코드는 모든 단락 요소의 텍스트 색상을 빨간색으로 변경하고 글꼴 크기를 20픽셀로 설정합니다.

2. 클래스 선택기

클래스 선택기는 CSS에서 가장 일반적으로 사용되는 선택기 중 하나입니다. 클래스 이름을 기준으로 요소를 선택할 수 있습니다. 예를 들어, 클래스 이름이 'header'인 모든 요소에 스타일을 적용하려는 경우 다음 코드를 사용할 수 있습니다.

 .header {
   background-color: blue;
   color: white;
   padding: 20px;
 }

이 코드는 클래스 이름이 'header'인 요소의 배경색을 파란색으로 변경하고 텍스트를 텍스트로 변경합니다. color 흰색으로 만들고 20px 패딩을 추가합니다.

3. ID 선택기

ID 선택기는 고유한 ID를 가진 요소를 선택하는 데 사용되는 선택기입니다. 고유한 ID를 가진 요소가 있고 여기에 스타일을 적용하려면 다음 코드를 사용하세요.

 #myElement {
   border: 1px solid black;
   padding: 10px;
 }

이 코드는 ID가 'myElement'인 요소의 테두리를 검은색으로 설정하고 10픽셀의 패딩을 추가합니다.

4. 속성 선택기

속성 선택기는 요소의 속성 값을 선택하는 방법입니다. 예를 들어, title 속성이 포함된 모든 요소를 ​​선택하려면 다음 코드를 사용할 수 있습니다.

 [title] {
   border: 1px solid black;
   padding: 10px;
 }

이 코드는 title 속성이 있는 모든 요소의 테두리를 검은색으로 설정하고 10픽셀 패딩을 추가합니다.

5. Descendant Selector

Descendant Selector를 사용하면 요소의 모든 하위 요소를 선택할 수 있습니다. 예를 들어 HTML에 제목 요소와 단락 요소가 포함된 div 요소가 있고 div 요소 내의 모든 단락 요소를 선택하려면 다음 코드를 사용하세요.

 div p {
   color: blue;
 }

이 코드는 모든 단락 요소를 선택합니다. div 요소 내에서 요소 텍스트 색상이 파란색으로 변경됩니다.

6. 하위 선택기

하위 선택기를 사용하면 지정된 요소의 직접 하위 항목을 선택할 수 있습니다. 예를 들어, h1 요소와 ul 요소를 포함하는 div 요소가 있고 div 요소의 직계 하위 요소인 h1 요소를 선택하려는 경우 다음 코드를 사용하세요.

 div > h1 {
   font-size: 24px;
 }

이 코드는 div 요소의 직계 자식인 h1 요소 요소의 글꼴 크기는 24픽셀로 설정됩니다.

요약

위는 CSS의 몇 가지 일반적인 선택자입니다. 선택기는 개발자가 HTML 요소에 스타일을 쉽게 적용할 수 있도록 도와주는 CSS의 매우 강력한 기능입니다. 아름다운 웹사이트를 구축하려면 이러한 선택기에 대한 지식이 중요합니다. 이 글이 도움이 되셨으면 좋겠습니다. 읽어주셔서 감사합니다!

위 내용은 CSS의 여러 선택기 살펴보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!