반응형
기존에는 같은 형식의 HTML 태그가 쭉 나열된 경우 특정 태그만 선택하여 CSS로 꾸며주기 위해서는 해당 태그에 일일이 아이디나 클래스명을 부여해야 했습니다. 예를 들어 100개의 <li> 태그가 있고 해당 태그에 총 100개의 클래스명을 일일이 부여해야 하는 번거로움이 있었습니다. 하지만 CSS3에서 제공하는 nth-child 선택자를 이용하면 반복되는 일련의 태그 중 원하는 순서의 태그만 선택할 수 있어 불필요한 클래스를 추가할 필요가 없어졌으며 보다 깔끔한 HTML 문서를 관리할 수 있게 되었습니다. nth-child()의 사용법은 다음과 같습니다.
(1) 태그명 : nth-child(순서 값) { css }
다음의 예제를 통해 nth-child의 사용법을 알아보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>nth-child()</title>
<style>
ul li {
font-size: 20px;
font-weight: bold;
}
ul li:nth-child(1) { color: red;}
ul li:nth-child(2) { color: blueviolet;}
ul li:nth-child(3) { color: green;}
ul li:nth-child(4) { color: pink;}
</style>
</head>
<body>
<ul>
<li>리스트1</li>
<li>리스트2</li>
<li>리스트3</li>
<li>리스트4</li>
</ul>
</body>
</html>
반응형
'💕IT 공부하기 > CSS3' 카테고리의 다른 글
| [CSS3] background-size : 배경 이미지의 크기 조절하기 (0) | 2023.04.24 |
|---|---|
| [CSS3] gradient : 배경에 그라디언트 색상과 모양 지정하기 (0) | 2023.04.19 |
| [CSS3] border-radius : 사각형의 모서리를 둥글게 하기 (0) | 2023.04.19 |
| [CSS3] text-shadow, box-shadow 글자와 박스에 그림자 생성하기 (0) | 2023.04.17 |
| [CSS3] CSS가상 선택자 정리 및 비교 (first-child, last-child, nth-child, nth-of-type, ) (0) | 2023.04.12 |