01
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>HTML5 λ μ΄μμ</title>
<style>
body{
font-family:"λ§μ κ³ λ", "κ³ λ", "κ΅΄λ¦Ό";
}
a:link {
text-decoration:none;
}
nav ul{
list-style-type:none;
margin:0px;
padding:0px;
}
nav ul li{
font-size:1.5em;
padding-left:7px;
margin-bottom:20px;
border-left-width:5px;
border-left-color:#990066;
border-left-style:solid;
float: left;
margin-right: 15px;
}
section article {
padding-left:10px;
margin-bottom:10px;
border-top:1px #a6a6a6 dashed;
border-bottom: 1px #a6a6a6 dashed;
}
section {clear: both;}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">μ μ견 μ’
λ₯</a></li>
<li><a href="#">μ
μνκΈ°</a></li>
<li><a href="#">건κ°λ보기</a></li>
<li><a href="#">λλΆμ΄μ΄κΈ°</a></li>
</ul>
</nav>
<section id="content">
<h2>κ°μμ§ μ©ν μ€λΉνκΈ°</h2>
<article>
<h3>κ°μμ§ μ§ </h3>
<p>κ°μμ§κ° νΈν μ΄ μ μλ ν¬κ·Όν μ§μ΄ νμν©λλ€. κ°μμ§μ μ§μ κ°μμ§κ° λ€ ν° νμλ κ³μ μΈ μ μλ μ§μΌλ‘ ꡬμ
νμΈμ.μ§μ ꡬμ
νμ€ λλ λ°μμ§μ΄ μ λμ΄ μλμ§, μΈνμ΄ κ°νΈν μ νμΈμ§ κΌ νμΈνμκ³ κ³ λ₯΄μλ κ²μ΄ μ’μ΅λλ€.</p>
</article>
<article>
<h3>κ°μμ§ λ¨Ήμ΄ </h3>
<p>κ°μμ§μ λ¨Ήμ΄λ κΌ μ΄λ¦° κ°μμ§μ©μΌλ‘ λμμλ μ¬λ£λ₯Ό μ ννμΈμ. κ°μμ§λ€μ μ¬λμ λΉν΄ μ±μ₯μλκ° 8λ°°μ λ λΉ λ₯΄λ΅λλ€. λ°λΌμ κ°μμ§μκ²λ μ±μ₯μλμ λ§λ μ¬λ£λ₯Ό κΈμ¬νμ
μΌ ν©λλ€. μ¬λμ΄ λ¨Ήλ μμμ λ¨Ήκ² λλ©΄ μλ
κ³Ό ν₯μ λ£μ μ
λ§μ΄ μ΅μν΄μ§κ³ , λΉλ§μ΄ λ κ°λ₯μ±μ΄ λ§€μ° λμμ§λλ€. κ°μμ§μ© μ¬λ£λ μν 12κ°μκΉμ§ κΈμ¬νμ
μΌ ν©λλ€.</p>
</article>
</section>
<footer>
<p>Copyright 2012 funnycom</p>
</footer>
</body>
</html>
02
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>ν μ€νμΌ</title>
<style>
table {
border: 1px solid black;
border-collapse: collapse;
caption-side: bottom;
}
td, th {
border: 1px solid black;
padding: 10px;
}
.heading th {
background-color: #eee;
}
</style>
</head>
<body>
<table class="table1 heading">
<caption>2015 κ΅λ―Ό λ
μμ€ν</caption>
<thead>
<tr>
<th>ꡬλΆ</th>
<th>μ±μΈ</th>
<th>νμ</th>
</tr>
</thead>
<tbody>
<tr>
<th>λ
μμ¨</th>
<td>65.3%</td>
<td>94.9%</td>
</tr>
<tr>
<th>μ°νκ· λ
μλ</th>
<td>9.1κΆ</td>
<td>29.8κΆ</td>
</tr>
<tr>
<th>곡곡λμκ΄ μ΄μ©λ₯ </th>
<td>28.2%</td>
<td>64.9%</td>
</tr>
</tbody>
</table>
</body>
</html>
< μ°Έκ³ >
Do it! HTML5+CSS3 μΉ νμ€μ μ μ
β» ν΄λΉ κΈμ μ΅λ λͺ©μ μΌλ‘ μμ±λ κΈμ λλ€ β»
λ°μν
'κ°μΈκ³΅λΆ > HTML5 + CSS3' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
| [HTML+CSS][HTML5μ μ맨ν±νκ·Έ] 02 - μλ§¨ν± νκ·Έμ μ’ λ₯ (0) | 2020.07.13 |
|---|---|
| [HTML+CSS][HTML5μ μ맨ν±νκ·Έ] 01 - HTML5 λ¬Έμ (0) | 2020.07.12 |
| [HTML+CSS][CSS λ μ΄μμ] 03 - ν μ€νμΌ (0) | 2020.07.10 |
| [HTML+CSS][CSS λ μ΄μμ] 02 - λ€λ¨μΌλ‘ νΈμ§νκΈ° (0) | 2020.07.09 |
| [HTML+CSS][CSS λ μ΄μμ] 01 - CSS ν¬μ§μ λκ³Ό μ£Όμ μμ±λ€ (0) | 2020.07.08 |
λκΈ