웹 프로그래밍/CSS

[CSS] 자식태그, 후손태그 설정(#id h1, #id > h1, #id *, li:first-child 등)

산을넘는다 2020. 6. 15. 13:56 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>

	#header h1 { /* id가 header인 것의 자식 중 h1 */
		color : blue;
	}
	
	#header > h1 { /* id가 header인 것의 자식(바로 밑)의 h1 */
		color : green;
	}
	
	#header * { /* id가 header인 것의 모든 자식. 즉, 후손 */
		color : yellow;
	}


</style>


</head>
<body>
	<div id="header">
		<h1>나는 제목이다</h1>
		<div id="sub_header">
			<h1>나는 소제목이다</h1>
			<h3>나는 소제목2이다</h3>
		</div>
		<h2>나는 제목2이다</h2>
		<h1>나는 제목3이다</h1>
	</div>
	<div id="section">
		<h1>나는 본문이다</h1>
		<p>나는 내용이다</p>
	</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
	#numberlist li { /* 자식 중 li인 것 */
		float : left; /* 마진을 안 주면 붙어버린다 */
		margin : 0px 30px 0px 0px; /* top - bottom - left - right */
		/* margin : 10px 10px; 2개를 적으면, left - right */
		font-size : 16pt;
		/* list-style : circle; */
		
	}
	
	li:first-child{
		color : orange;
	}
	
	li:last-child {
		color : blue;
	}
	
	li:nth-child(2n){
		color:green;
	}
	
</style>

</head>
<body>
	<ul id = "numberlist">
		<li>ONE</li>
		<li>TWO</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
		<li>9</li>
		<li>10</li>
	</ul>


</body>
</html>

 

<style>
	footer {
		clear: both;
		height: 100px;
	}

	footer img {
		float : left;
		width : 50px;
	}
</style>


	<footer>
		<div id = "footerDiv"> 
			All contents Coptyright Cakeworld Inc all rights reserve <br>
			Contact mail : CakeWorld@cakeworld.com Tel:+82 2 000 0000  
		</div>
		<img src = "../html/images/facebook.png" width = 50 height = 50>
		<img src = "../html/images/twitter.png" width = 50 height = 50>
	</footer>