Cascading Style Sheet
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
h1,h2 {
color:red;
font-size:10px
}
h2 {
text-decoration:underline;
border:1px solid red;
}
#selected {
border:red 1px dotted;
padding:30px;
margin:10px;
}
img {
float:left;
}
</style>
</head>
<body>
<h1> 대제목 </h1>
<h2> 중제목 </h2>
<h3> 소제목 </h3>
<ul>
<li> ~ </li>
<li id="selected"> ~ </li>
<li> ~ </li>
</ul>
<img src=" ~ " />
~ 내용 ~
</body>
</html>
Box model
- border / padding / margin / height / width
Designing HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title> 타이틀 </title>
<style>
header {
border-bottom:1px solid gray;
padding:20px;
}
nav {
border-right:1px solid gray;
width:200px;
height:600px;
float:left;
}
nav ol {
list-style:none;
}
article {
float:left;
padding:20px;
}
</style>
</head>
<body>
<header>
<h1> 대제목 </h1>
</header>
<nav>
<ol>
<li><a href=" ~ link ~ "> ~ </a></li>
<li> ~ </li>
<li> ~ </li>
</ol>
</nav>
<article>
<h2> 소제목 </h2>
<ul>
<li> ~ </li>
<li> ~ </li>
<li> ~ </li>
</ul>
</article>
</body>
</html>
