<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
border : 3px solid green;
margin : 10px;
}
p{
font-size : 1.5 em;
}
p:first-child{
background-color : yellow;
}
p:last-child{
background-color : red;
}
p:nth-child(2n){
color : blue;
}
table{
border : 2px solid blue;
margin : 20px;
}
td{
width : 200px;
height : 50px;
text-align : center;
}
table#tab1 tr:nth-child(2n){
background-color : #f1a6dd;
}
#tab1 tr:nth-child(1){
background-color : yellow;
}
#tab2 td:nth-child(2n){
background-color : #dda7f3;
}
#tab2 td:nth-child(odd){ /*odd : 홀수 */
background-color : #aff7d3;
}
#tab2 tr:nth-child(1) td{
background-color : yellow;
}
</style>
</head>
<body>
<div>
<p>무궁화 꽃이 피었습니다.1</p>
<p>무궁화 꽃이 피었습니다.2</p>
<p>무궁화 꽃이 피었습니다.3</p>
<p>무궁화 꽃이 피었습니다.4</p>
<p>무궁화 꽃이 피었습니다.5</p>
<p>무궁화 꽃이 피었습니다.6</p>
</div>
<div>
<p>무궁화 꽃이 피었습니다.1</p>
<p>무궁화 꽃이 피었습니다.2</p>
<p>무궁화 꽃이 피었습니다.3</p>
<p>무궁화 꽃이 피었습니다.4</p>
<p>무궁화 꽃이 피었습니다.5</p>
<p>무궁화 꽃이 피었습니다.6</p>
</div>
<table id= "tab1" border = "1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
<table id= "tab2" border = "1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
</body>
</html>
😀 실행
