CSS의 요소 유형 선택기(element type selector)는 문서 내에서 특정 태그 이름을 가진 모든 요소를 한 번에 선택하는 기본적인 선택기입니다. 예를 들어 li 선택기를 사용하면 페이지 안의 모든 <li> 요소에 동일한 스타일이 적용됩니다.
문법(Syntax)
element {
/* 선언부 */
}선택자 자리에 HTML 태그 이름을 그대로 작성하면 되며, 별도의 점(.)이나 해시(#) 같은 기호가 필요하지 않습니다.
예제 1
아래 예제는 요소 유형 선택기를 활용해 li와 div 요소에 스타일을 적용하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
li {
list-style: none;
margin: 5px;
border-bottom-style: dotted;
}
div {
box-shadow: inset 0 0 8px plum;
padding: 36px;
}
</style>
</head>
<body>
<div>
<pre> \(╪)(╪) /</pre>
<ul>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다 −
예제 2
다음 예제에서는 목록 항목에 텍스트 정렬과 그림자 효과를 추가하고, 컨테이너인 div 요소를 원형으로 만들어 시각적 효과를 강화했습니다.
<!DOCTYPE html>
<html>
<head>
<style>
li {
text-align: center;
list-style: none;
margin: 5px;
padding: 5px;
box-shadow: inset 0 0 15px yellowgreen;
}
div {
box-shadow: inset 0 0 8px orange;
padding: 36px;
width: 30%;
border-radius: 50%;
}
</style>
</head>
<body>
<div>
<ul>
<li>Hello</li>
<li>Guys</li>
</ul>
</div>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다 −
정리
요소 유형 선택기는 CSS에서 가장 단순하면서도 널리 쓰이는 선택기입니다. 문서 전체의 기본 스타일을 설정할 때 유용하지만, 특정 요소만 골라 스타일링해야 하는 경우에는 클래스 선택기(.class)나 아이디 선택기(#id)와 함께 사용하는 것이 좋습니다.