CSS의 여러 선택기 살펴보기
- PHPz원래의
- 2023-04-13 09:20:08463검색
CSS는 웹사이트에 스타일과 레이아웃을 추가하는 데 사용되는 언어입니다. CSS에서 선택기는 스타일을 적용할 HTML 요소를 선택하는 데 사용됩니다. 선택기는 매우 유연하며 태그 속성, 클래스, ID, 위치 등을 기반으로 요소를 선택할 수 있습니다.
이 기사에서는 CSS의 여러 선택기와 사용법을 살펴보겠습니다.
- 태그 선택기
태그 선택기는 CSS의 가장 기본적인 선택기 중 하나입니다. 태그 유형별로 요소를 선택합니다. 예를 들어 모든 단락 요소에 스타일을 적용하려는 경우 다음 코드를 사용할 수 있습니다.
p {
color: red;
font-size: 20px;
}
이 코드는 모든 단락 요소의 텍스트 색상을 빨간색으로 변경하고 글꼴 크기를 20픽셀로 설정합니다.
- 클래스 선택기
클래스 선택기는 CSS에서 가장 일반적으로 사용되는 선택기 중 하나입니다. 클래스 이름을 기준으로 요소를 선택할 수 있습니다. 예를 들어, 클래스 이름이 'header'인 모든 요소에 스타일을 적용하려는 경우 다음 코드를 사용할 수 있습니다.
.header {
background-color: blue;
color: white;
padding: 20px;
}
이 코드는 클래스 이름이 'header'인 요소의 배경색을 파란색으로 변경하고 텍스트를 텍스트로 변경합니다. color 흰색으로 만들고 20px 패딩을 추가합니다.
- ID 선택기
ID 선택기는 고유한 ID를 가진 요소를 선택하는 데 사용되는 선택기입니다. 고유한 ID를 가진 요소가 있고 여기에 스타일을 적용하려면 다음 코드를 사용하세요.
#myElement {
border: 1px solid black;
padding: 10px;
}
이 코드는 ID가 'myElement'인 요소의 테두리를 검은색으로 설정하고 10픽셀의 패딩을 추가합니다.
- 속성 선택기
속성 선택기는 요소의 속성 값을 선택하는 방법입니다. 예를 들어, title 속성이 포함된 모든 요소를 선택하려면 다음 코드를 사용할 수 있습니다.
[title] {
border: 1px solid black;
padding: 10px;
}
이 코드는 title 속성이 있는 모든 요소의 테두리를 검은색으로 설정하고 10픽셀 패딩을 추가합니다.
- Descendant Selector
Descendant Selector를 사용하면 요소의 모든 하위 요소를 선택할 수 있습니다. 예를 들어 HTML에 제목 요소와 단락 요소가 포함된 div 요소가 있고 div 요소 내의 모든 단락 요소를 선택하려면 다음 코드를 사용하세요.
div p {
color: blue;
}
이 코드는 모든 단락 요소를 선택합니다. div 요소 내에서 요소 텍스트 색상이 파란색으로 변경됩니다.
- 하위 선택기
하위 선택기를 사용하면 지정된 요소의 직접 하위 항목을 선택할 수 있습니다. 예를 들어, h1 요소와 ul 요소를 포함하는 div 요소가 있고 div 요소의 직계 하위 요소인 h1 요소를 선택하려는 경우 다음 코드를 사용하세요.
div > h1 {
font-size: 24px;
}
이 코드는 div 요소의 직계 자식인 h1 요소 요소의 글꼴 크기는 24픽셀로 설정됩니다.
요약
위는 CSS의 몇 가지 일반적인 선택자입니다. 선택기는 개발자가 HTML 요소에 스타일을 쉽게 적용할 수 있도록 도와주는 CSS의 매우 강력한 기능입니다. 아름다운 웹사이트를 구축하려면 이러한 선택기에 대한 지식이 중요합니다. 이 글이 도움이 되셨으면 좋겠습니다. 읽어주셔서 감사합니다!
위 내용은 CSS의 여러 선택기 살펴보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!