<!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>
