CSS : 구조적 선택자
부트캠프(END)/Web2022. 7. 8. 17:11
구조적 선택자는 특정한 위치에 있는 태그를 선택할 때 사용한다.
크게 아래 세가지가 사용된다.
:first-child : 형제 관계에서 첫 번째로 나오는 태그 선택
:last-child : 형제 관계에서 마지막으로 나오는 태그 선택
:nth-child(점화식) : 형제 관계에서 앞에서 점화식에 맞는 순서대로 나오는 태그 선택
*형제 관계 : 하나의 태그 아래에 같은 위치에 있는 관계(=동위 관계)
꼭 2n만 들어가지는 않고, 자유롭게 점화식을 지정할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table tr:nth-child(2n){
/*nth-child : 1부터 시작, 2n, even -> 짝수*/
background-color:yellow;
}
table tr:nth-child(2n+1){
/*2n+1, odd -> 홀수*/
background-color:green;
}
table tr:first-child{
color:cyan;
}
table tr:last-child{
color:magenta;
}
</style>
</head>
<body>
<center>
<h1>과일명</h1>
<table border=1>
<tr><td>체리1</td></tr>
<tr><td>자두2</td></tr>
<tr><td>딸기3</td></tr>
<tr><td>오렌지4</td></tr>
<tr><td>사과5</td></tr>
<tr><td>키위6</td></tr>
<tr><td>메론7</td></tr>
<tr><td>포도8</td></tr>
<tr><td>버찌9</td></tr>
<tr><td>야자10</td></tr>
<tr><td>복숭아11</td></tr>
<tr><td>레몬12</td></tr>
<tr><td>수박13</td></tr>
<tr><td>홍시14</td></tr>
</table>
</body>
</center>
</html>
'부트캠프(END) > Web' 카테고리의 다른 글
| 웹의 동작 방식 : Servlet과 JSP (0) | 2022.07.13 |
|---|---|
| CSS : 속성, 선택자 (0) | 2022.07.07 |
| HTML : img, input 태그 (0) | 2022.07.06 |
댓글()
