코딩 공부
비전공자를 위한 HTML/CSS-선택자1
뉴 데이
2022. 5. 3. 15:49
요소 선택자
선택자 중에 가장 기본이 되는 선택자이며, 태그 선택자라고도 합니다.
h1 { color: yellow; }
h2 { color: yellow; }
h3 { color: yellow; }
h4 { color: yellow; }
h5 { color: yellow; }
h6 { color: yellow; }
요소 선택자는 위 코드처럼 선택자 부분에 태그 이름이 들어갑니다.
문서 내에 선택자에 해당하는 모든 요소에 스타일 규칙이 적용됩니다.
그룹화
선택자는 쉼표를 이용해서 그룹화를 할 수 있습니다.
h1, h2, h3, h4, h5, h6 { color: yellow; }위 코드는 요소 선택자의 예제 코드와 같은 코드입니다.
그리고 전체 선택자 라고 불리는 간단한 선택자도 있습니다.
* { color: yellow; }*(별표, asterisk) 기호로 문서 내에 모든 요소를 선택할 수 있습니다.
이렇게 선언하면, 한 번의 선언만으로 문서 내에 모든 요소에 스타일 규칙이 적용됩니다.
전체 선택자는 매우 편리하지만, 성능에 좋지 않으므로 될 수 있으면 사용을 지양합니다.
선택자뿐만 아니라 선언들도 그룹화가 가능합니다.
h1 { color: yellow; font-size: 2em; background-color: gray; }그리고 마지막으로 선택자와 선언이 동시에 그룹화도 가능합니다.
h1, h2, h3, h4, h5, h6 { color: yellow; font-size: 2em; background-color: gray; }코드실습
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>css</title>
<style>
h1 { color: yellow; font-size: 2em; background-color: gray; }
</style>
</head>
<body>
<h1>Hello, CSS</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa debitis facere fuga laboriosam placeat provident, quibusdam quidem quo sapiente totam?</p>
</body>
</html>
참고자료
Selector (CSS)
A CSS selector is the part of a CSS rule that describes what elements in a document the rule will match. The matching elements will have the rule's specified style applied to them.
CSS Selectors Reference
Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, and XML.