5-6. CSS ๊ธฐ์ด ์ฐ์ต๋ฌธ์ 1,2,3,4
2021. 10. 10. 21:56ใHTML + CSS + JS
728x90
์ฐ์ต๋ฌธ์ 1
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>์ฐ์ต๋ฌธ์ 1</title>
<style>
.container {
width:500px;
padding:10px;
border:1px solid #ccc;
}
.subject {
font-weight:700;
font-size:larger;
color: #ad3000;
}
ul {
list-style-type: none;
}
li {
line-height: 2.0;
}
</style>
</head>
<body>
<div class="container">
<h1>์ต์ ์น ๋์์ธ ํธ๋ ๋</h1>
<ul>
<li><span class="subject">๋ฐ์ํ ์น ๋์์ธ</span> - ๋ค์ํ ํ๋ฉด ํฌ๊ธฐ์ ์ต์ ํํ๋ค</li>
<li><span class="subject">ํ๋ซ ๋์์ธ </span> - ์
์ฒด์์ ํ๋ฉด์ผ๋ก </li>
<li><span class="subject">ํ์คํฌ๋ฆฐ ๋ฐฐ๊ฒฝ </span> - ์ฝํ
์ธ ์ ์ง์ค</li>
<li><span class="subject">์ ํ์ด์ง ์ฌ์ดํธ </span> - ํ ํ์ด์ง์ ๋ชจ๋ ๋ด์ฉ์ ๋ด๋ค</li>
<li><span class="subject">ํจ๋ด๋์ค ์คํฌ๋กค๋ง </span> - ๋์ ์ธ ํจ๊ณผ๋ก ๊ฐํ ์ธ์์!</li>
<li><span class="subject">์น ํฐํธ </span> - ์น ํ์ดํฌ๊ทธ๋ํผ๋ฅผ ๋ฐ์ณ์ฃผ๋ ๊ธฐ์ </li>
</ul>
</div>
</body>
</html>
์ฐ์ต๋ฌธ์ 2
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>์ฐ์ต๋ฌธ์ 2</title>
<style>
.container {
width:300px;
height:70px;
margin:0 auto;
background-color:#444;
}
h1 {
text-align: center;
line-height: 70px;
color: #fff;
text-shadow: 3px 2px 5px #000;
}
</style>
</head>
<body>
<div class="container">
<h1>์น ๊ฐ๋ฐ ๊ธฐ์ด</h1>
</div>
</body>
</html>
์ฐ์ต๋ฌธ์ 3
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>์ฐ์ต๋ฌธ์ 3</title>
<style>
table {
border: 1px solid black;
border-collapse: collapse;
caption-side: bottom;
}
td, th {
padding: 10px;
}
.heading {
background-color: #eee;
}
</style>
</head>
<body>
<table border="1">
<caption>2019 ๊ตญ๋ฏผ ๋
์์คํ</caption>
<thead class="heading">
<tr>
<th>๊ตฌ๋ถ</th>
<th>์ฑ์ธ</th>
<th>๋
์์</th>
</tr>
</thead>
<tbody>
<tr >
<th class="heading">์ข
์ด์ฑ
</th>
<td>6.1๊ถ</td>
<td>11.8๊ถ</td>
</tr>
<tr>
<th class="heading">์ ์์ฑ
</th>
<td>1.2๊ถ</td>
<td>7.1๊ถ</td>
</tr>
<tr>
<th class="heading">์ค๋์ค๋ถ</th>
<td>0.2๊ถ</td>
<td>5.5๊ถ</td>
</tr>
</tbody>
</table>
</body>
</html>
์ฐ์ต๋ฌธ์ 4
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>์ฐ์ต๋ฌธ์ 4</title>
<style>
#container { /* ์ ์ฒด ์ฝํ
์ธ ๋ฅผ ๊ฐ์ธ๋ div */
width:650px; /* ๋๋น */
margin:0 auto; /* ๊ฐ๋ก๋ก ์ค์์ ๋ฐฐ์น */
padding:5px; /* ํ
๋๋ฆฌ์ ๋ด์ฉ ์ฌ์ด์ ํจ๋ฉ ์ฌ๋ฐฑ */
}
#check { /* ํ
์คํธ ๋ถ๋ถ์ ๊ฐ์ธ๋ div */
width:640px; /* ๋๋น - ๊ทธ๋ฆผ ๋๋น ๊ฐ์ ๋ง์ถค */
border:1px solid #ccc; /* ํ
๋๋ฆฌ */
}
h1 {
color: white; /* ๊ธ์์ */
font-size: 1em; /* ๊ธ์ ํฌ๊ธฐ */
background: #222; /* ๋ฐฐ๊ฒฝ์ */
margin: 0; /* ์ ๋ชฉ๊ณผ ๋ค๋ฅธ ์์ ๊ฐ์ ๋ง์ง ์ฌ๋ฐฑ */
padding: 10px; /* ํ
๋๋ฆฌ์ ์ ๋ชฉ ํ
์คํธ ์ฌ์ด์ ํจ๋ฉ ์ฌ๋ฐฑ */
}
h2 {
color: #ff0000;
size: 1.5em;
text-align: center;
}
p {
size: 1.2em;
line-height: 2em;
font-weight: bold;
text-align: center;
}
.accent {
color: #0000ff;
}
.smalltext {
font-size: 0.7em;
}
</style>
</head>
<body>
<div id="container">
<img src="images/top.jpg" alt="๊ฐ์ ์ฉ ๊ฟ์ฌ๊ณผ - ํ ์ง์ด ์๊ณ ์ฝ๊ฐ์ ๋ชป์๊ฒผ์ง๋ง ๋ง๊ณผ ์์์ ๊ทธ๋๋ก์
๋๋ค. ์ง์ข์ ์ฌ๊ณผ๋ฅผ ์ ๋ ดํ๊ฒ ์ฆ๊ฒจ๋ณด์ธ์">
<div id="check">
<h1>ํ์ธํ์ธ์</h1>
<h2>์ฃผ๋ฌธ ๋ฐ ๋ฐฐ์ก</h2>
<p><span class="accent">์คํ 2์ ์ด์ </span> ์ฃผ๋ฌธ๊ฑด์ ๋น์ผ ๋ฐ์กํฉ๋๋ค<br>
2์ ์ดํ ์ฃผ๋ฌธ๊ฑด์ ๋ค์๋ ๋ฐ์กํฉ๋๋ค(์ฃผ๋ง ์ ์ธ)</p>
<hr>
<h2>๊ตํ ๋ฐ ํ๋ถ</h2>
<p>๋ถ๋ง์กฑ์ <span class="accent">100% ํ๋ถ</span>ํด ๋๋ฆฝ๋๋ค<br>
๊ณ ๊ฐ์ผํฐ๋ก ์ ํ์ฃผ์ธ์</p>
<hr>
<h2>๊ณ ๊ฐ์ผํฐ </h2>
<p>0000-0000<br>
<span class="smalltext" >์๋ด์๊ฐ : ์ค์ 9์ ~ ์คํ 6์ (ํ /์ผ, ๊ณตํด์ผ ํด๋ฌด)</span></p>
</div>
</div>
</body>
</html>728x90
'HTML + CSS + JS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| 6-2. CSS ํ ๋๋ฆฌ ์คํ์ผ box-style, border-width, border-color, border- radius (1) | 2021.10.12 |
|---|---|
| 6-1. CSS ๋ฐ์ค ๋ชจ๋ธ, padding, margin, border (0) | 2021.10.12 |
| 5-5. CSS ๋ชฉ๋ก, ํ ์คํ์ผ (0) | 2021.10.10 |
| 5-4. CSS ํ ์คํธ ๊ด๋ จ ์คํ์ผ (0) | 2021.10.10 |
| 5-3. CSS ๊ธ๊ผด ์คํ์ผ , ๊ทธ๋ฆฌ๊ณ ์น ํฐํธ ์ฌ์ฉํ๋ ๋ฒ (0) | 2021.10.10 |