๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
HTML5 & CSS3

[HTML5 & CSS3] ์‹ค์Šต (๋‹ฌ๋ ฅ ๋งŒ๋“ค๊ธฐ, ์ž๊ธฐ์†Œ๊ฐœ ํŽ˜์ด์ง€ ๋งŒ๋“ค๊ธฐ)

by ์ฝ”๋”ฉํ•˜๋Š” ๋ถ•์–ด 2021. 1. 26.
๋ฐ˜์‘ํ˜•

์‹ค์Šต 1) ๋‹ฌ๋ ฅ ๋งŒ๋“ค๊ธฐ

 

 

<์‚ฌ์šฉํ•œ ํƒœ๊ทธ>

*์นธ ๊ฐ„๊ฒฉ+ํ…์ŠคํŠธ ์œ„์น˜ ๋งž์ถ”๊ธฐ

<tr height="100" weight="30" align="left" valign="top">

โ€‹

*ํฐํŠธ ์ƒ‰๊น” ์ž…ํžˆ๊ธฐ

<td>1<font color="blue"><br>๊ตญ๊ตฐ์˜ ๋‚ </font></td>

โ€‹

*ํฐํŠธ ์ƒ‰๊น” ์ž…ํžˆ๊ธฐ+๋ฐ‘์ค„ํ‘œ์‹œํ•˜๊ธฐ

<td><font color="red">3<br><u>๊ฐœ์ฒœ์ ˆ</u></font></td>

โ€‹

*์…€์— ์ƒ‰ ์ฑ„์šฐ๊ธฐ

<td bgcolor="#FADCA5">4</td>

โ€‹

*ํ…์ŠคํŠธ๋งํฌ+๊ธ€์ž์ƒ‰ ๋ฐ”๊พธ๊ธฐ

<a href="https://terms.naver.com/entry.nhn?docId=1023264&cid=50221&categoryId=50232"><span style="color:red;">ํ•œ๊ธ€๋‚ </span></a>

 

 

์‹ค์Šต 2) ํ”„๋กœํ•„ ๋งŒ๋“ค๊ธฐ

 

<์†Œ์Šค>

<!doctype html>
<html lang="ko">
<head>
<title>์˜จ๋ผ์ธ ํ”„๋กœํ•„</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<style>
table {
	width: 70%; /* ํ‘œ์˜ ๋„ˆ๋น„ */
	border: 1px solid #222; /* 1ํ”ฝ์…€์งœ๋ฆฌ ํ‘œ ํ…Œ๋‘๋ฆฌ */
	border-collapse: collapse; /* ์ค‘๋ณต๋˜๋Š” ํ‘œ์™€ ์…€์˜ ํ…Œ๋‘๋ฆฌ๋ฅผ ํ•œ ์ค„๋กœ ํ‘œ์‹œ */
}

thead {
	background: #eee; /* ์ œ๋ชฉ ํ–‰์˜ ๋ฐฐ๊ฒฝ ์ƒ‰ */
}

th, td {
	border: 1px solid #ccc; /* 1ํ”ฝ์…€์งœ๋ฆฌ ์…€ ํ…Œ๋‘๋ฆฌ */
	padding: 5px; /* ์…€ ํ…Œ๋‘๋ฆฌ์™€ ์…€ ๋‚ด์šฉ ์‚ฌ์ด์˜ ์—ฌ๋ฐฑ(ํŒจ๋”ฉ) */
	font-size: 0.8em; /* ์…€์˜ ๊ธ€์ž ํฌ๊ธฐ */
}
</style>
</head>
<body>
	<div id="container">
		<!-- ์‚ฌ์ด๋“œ๋ฐ” -->
		<aside>
			<div id="namecard">
				<img src="images/pf.jpg" alt="">
				<h1>Kyunghee Ko</h1>
				<p>์˜ค๋Š˜์€ ๋‚จ์€ ์ธ์ƒ์ด ์‹œ์ž‘๋˜๋Š” ์ฒซ์งธ๋‚ </p>
			</div>
			<div id="detail">
				<p>Jeju, Korea</p>
				<p>funcom@gmail.com</p>
			</div>
			<div id="sns">
				<h2>SNS</h2>
			</div>
		</aside>
		<div id="main">


			<!-- ์ž๊ธฐ ์†Œ๊ฐœ -->
			<section>
				<h2 class="subtitle">Who am I?</h2>
				<p>
					<mark>ํ”„๋ŸฐํŠธ์—”๋“œ ์›น ๊ธฐ์ˆ (Front-end Web Tech.)</mark>
					์— ๊ด€์‹ฌ์ด ๋งŽ์Šต๋‹ˆ๋‹ค. <br>ํ˜„์žฌ ์ œ์ฃผ์˜ ํ•œ ์‹œ๊ณจ ๋งˆ์„์—์„œ ์ฝ”๋”ฉ ์ค‘์ž…๋‹ˆ๋‹ค.
				</p>
			</section>

			โ€‹
			<!-- ๊ฒฝ๋ ฅ -->
			<section>
				<h2 class="subtitle">Experience</h2>
				<ul>
					<li>ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ
						<ul>
							<li>์—…๋ฌด ๋‚ด์šฉ ์—…๋ฌด ๋‚ด์šฉ ์—…๋ฌด ๋‚ด์šฉ</li>
							<li>์—…๋ฌด ๋‚ด์šฉ</li>
							<li>์—…๋ฌด ๋‚ด์šฉ ์—…๋ฌด ๋‚ด์šฉ</li>
						</ul>
					</li>
					<li>์›น ๋””์ž์ธ
						<ul>
							<li>์—…๋ฌด ๋‚ด์šฉ</li>
							<li>์—…๋ฌด ๋‚ด์šฉ ์—…๋ฌด ๋‚ด์šฉ</li>
						</ul>
					</li>
				</ul>
			</section>


			<!-- ์ˆ™๋ จ๋„ -->
			<section>
				<h2 class="subtitle">Skills</h2>
			</section>


			<!-- ํ•™๋ ฅ -->
			<section>
				<h2 class="subtitle">Education</h2>
				<table>
					<caption>ํ•™๋ ฅ ์‚ฌํ•ญ</caption>
					<thead>
						<tr>
							<th>์ถœ์‹ ํ•™๊ต</th>
							<th>์ „๊ณต</th>
							<th>๊ธฐ๊ฐ„</th>
							<th>๊ตฌ๋ถ„</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>ใ…ใ…๋Œ€ํ•™๊ต</td>
							<td>์ปดํ“จํ„ฐ๊ณตํ•™</td>
							<td>2004.3 ~ 2008.2</td>
							<td>์กธ์—…</td>
						</tr>
						<tr>
							<td>ใ…‡ใ…‡ใ…‡๊ณ ๋“ฑํ•™๊ต</td>
							<td>-</td>
							<td>2001.3 ~ 2004.2</td>
							<td>์กธ์—…</td>
						</tr>
					</tbody>
				</table>
			</section>
		</div>
	</div>
</body>
</html>

 

๋ฐ˜์‘ํ˜•
์ €์ž‘์žํ‘œ์‹œ

'HTML5 & CSS3' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[HTML5 & CSS3] <input> ํƒœ๊ทธ  (0) 2021.01.29
[HTML5 & CSS3] Form  (0) 2021.01.29
[HTML5 & CSS3] ์ฒซ๋ฒˆ์งธ์ˆ˜์—…  (0) 2021.01.25
HTML ์ˆ™์ œ  (0) 2021.01.25
HTML 6๋ฒˆ์งธ์ˆ˜์—…  (0) 2021.01.25

๊ด€๋ จ๊ธ€

๋Œ“๊ธ€

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”