λ³Έλ¬Έ λ°”λ‘œκ°€κΈ°
κ°œμΈκ³΅λΆ€/HTML5 + CSS3

[HTML+CSS] [ν…μŠ€νŠΈ κ΄€λ ¨ νƒœκ·Έ] 05 - μ—°μŠ΅λ¬Έμ œ

by πŸ‡λ°•λ΄‰λ΄‰πŸ‡ 2020. 6. 11.

01

 

<!doctype html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>μ„œμšΈνŠΉλ³„μ‹œ</title>
</head>
<body>
	<div style="float:left; width:150px; margin-right:25px;">
		<img src="images/symbol.gif" alt="μ„œμšΈνŠΉλ³„μ‹œ 휘μž₯">
	</div>
	<div>
	<h1>μ„œμšΈνŠΉλ³„μ‹œ</h1>
	<p><strong>μ„œμšΈμ˜ 지ν–₯ 이미지 : 역사와 ν™œλ ₯의 μΈκ°„λ„μ‹œ</strong></p>
    <p><i>휘μž₯은 ν•œκΈ€ 'μ„œμšΈ'을 μ„œμšΈμ˜ μ‚°, ν•΄, ν•œκ°•μœΌλ‘œ λ‚˜νƒ€λ‚΄λ©΄μ„œ <br>
    μ „μ²΄μ μœΌλ‘œλŠ” μ‹ λͺ…λ‚˜λŠ” μ‚¬λžŒμ˜ λͺ¨μŠ΅μ„ ν˜•μƒν™”ν•œ κ²ƒμœΌλ‘œ <br>
    인간 μ€‘μ‹¬λ„μ‹œλ₯Ό 지ν–₯ν•˜λŠ” μ„œμšΈμ„ μƒμ§•ν•©λ‹ˆλ‹€.</i></p>
    <p>μžμ—° - 인간 - λ„μ‹œμ˜ λ§₯락 μ†μ—μ„œ<br>
    녹색 산은 ν™˜κ²½μ‚¬λž‘, 청색 ν•œκ°•μ€ 역사와 ν™œλ ₯, <br>
    κ°€μš΄λ° ν•΄λŠ” 미래의 λΉ„μ „κ³Ό 희망을 ν•¨μΆ•ν•˜κ³ , <br>
    이 세가지 μš”μ†Œλ₯Ό λΆ“ν„°μΉ˜λ‘œ μžμ—°μŠ€λŸ½κ²Œ μ—°κ²°ν•˜μ—¬ <br>
    μ„œμšΈμ˜ 이미지와 μ‚¬λžŒμ˜ ν™œλ ₯을 μΉœκ·Όν•˜κ²Œ λŠλ‚„ 수 μžˆλ„λ‘ ν•˜μ˜€μŠ΅λ‹ˆλ‹€.</p>
	</div>
</body>
</html>

 

 

 

 

02

 

<body>
<h1>μ΄μ§€μŠ€νΌλΈ”λ¦¬μ‹± μ‹ μž… 사원 λͺ¨μ§‘ 곡고</h1>

<p>IT 기획, νŽΈμ§‘ λΆ€μ„œμ—μ„œ ν•¨κ»˜ ν•  μ‹ μž… 사원을 λͺ¨μ§‘ν•©λ‹ˆλ‹€.</p>

<ul>
<li>λͺ¨μ§‘ 직ꡰ : νŽΈμ§‘ 기획 λΆ€μ„œ</li>

<li>직무 λ‚΄μš© : λ„μ„œ ν”„λ‘œλ“€μ‹± 업무 (μ‹ μž… 지원 κ°€λŠ₯)
<ul>
    <li>λ„μ„œ 기획, νŽΈμ§‘</li>
<li>λ„μ„œ 홍보, λ…μž μ†Œν†΅</li>
</ul></li>
<li>μ ‘μˆ˜ 마감일 : 2016.3.6.</li>
</ul>

<p>μžμ„Έν•œ λ‚΄μš©μ€ 곡지 κ²Œμ‹œνŒμ„ μ°Έκ³ ν•˜μ„Έμš”.</p>
</body>
</html>

 

 

 

 

03

 

<!doctype html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>컀피 λ“œλ¦½ μˆœμ„œ</title>
</head>
<body>
	<p>컀피 λ“œλ¦½ μˆœμ„œ - 아라비아 숫자</p>
    <ol type="1">
    <li>ν•„ν„°μ ‘κΈ°</li>
	<li>뢄쇄</li>
	<li>뢈림</li>
    <li>μΆ”μΆœ</li>
    </ol>
    <p>컀피 λ“œλ¦½ μˆœμ„œ - μ•ŒνŒŒλ²³ μ†Œλ¬Έμž</p>
    <ol type="a">
	<li>ν•„ν„°μ ‘κΈ°</li>
    <li>뢄쇄</li>
    <li>뢈림</li>
    <li>μΆ”μΆœ</li>
    </ol>
</body>
</html>

 

 

 

 

04

 

<!doctype html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>μ£Όμš” SNS μ„œλΉ„μŠ€λ³„ 이용λ₯ </title>
	<style>
		table, th, td { 
			border:1px solid gray;  /* ν‘œμ˜ ν…Œλ‘λ¦¬ - 1px νšŒμƒ‰ μ‹€μ„  */
			border-collapse:collapse;  /* ν‘œ ν…Œλ‘λ¦¬μ™€ μ…€ ν…Œλ‘λ¦¬ ν•©μΉ˜κΈ° */
		}
		th, td {
			width:100px;  /* μ…€ λ„ˆλΉ„ */
			padding:5px;  /* μ…€ νŒ¨λ”©(ν…Œλ‘λ¦¬μ™€ λ‚΄μš© μ‚¬μ΄μ˜ μ—¬λ°±) */
		}
        caption {
			font-size:20px;  /* ν‘œ μ„€λͺ…κΈ€ κΈ€μž 크기 */
			margin:10px;  /* ν‘œ μ„€λͺ…κΈ€ μ£Όλ³€ μ—¬λ°± */
			font-weight:bold;  /* ν‘œ μ„€λͺ…κΈ€ κΈ€μž ꡡ게 */
		}
	</style>
</head>
<body>
	<table>
        <caption><b>μ£Όμš” SNS μ„œλΉ„μŠ€λ³„ 이용λ₯ (%)</b></caption>
        <tr>
            <th></th>
            <th>페이슀뢁</th>
            <th>μΉ΄μΉ΄μ˜€μŠ€ν† λ¦¬</th>
            <th>λ°΄λ“œ</th>
            <th>μΈμŠ€νƒ€κ·Έλž¨</th>
            <th>νŠΈμœ„ν„°</th>
        </tr>
        <tr>
            <th>2015λ…„</th>
            <td>77.1</td>
            <td>58.3</td>
            <td>32.4</td>
            <td>16.7</td>
            <td>22.1</td>
        </tr>
        <tr>
            <th>2016λ…„</th>
            <td>73.8</td>
            <td>51.0</td>
            <td>40.1</td>
            <td>28.1</td>
            <td>14.7</td>
        </tr>
    </table>
</body>
</html>

 

 

 

 

< μ°Έκ³  >

Do it! HTML5+CSS3 μ›Ή ν‘œμ€€μ˜ 정석

 

 

β€» ν•΄λ‹Ή 글은 μŠ΅λ“ λͺ©μ μœΌλ‘œ μž‘μ„±λœ κΈ€μž…λ‹ˆλ‹€ β€»

 

λ°˜μ‘ν˜•
μ €μž‘μžν‘œμ‹œ

'κ°œμΈκ³΅λΆ€ > HTML5 + CSS3' μΉ΄ν…Œκ³ λ¦¬μ˜ λ‹€λ₯Έ κΈ€

[HTML+CSS] [이미지와 ν•˜μ΄νΌλ§ν¬] 02 - 링크 νƒœκ·Έ  (0) 2020.06.13
[HTML+CSS] [이미지와 ν•˜μ΄νΌλ§ν¬] 01 - 이미지 νƒœκ·Έ  (0) 2020.06.12
[HTML+CSS] [ν…μŠ€νŠΈ κ΄€λ ¨ νƒœκ·Έ] 04 - ν‘œλ₯Ό λ§Œλ“œλŠ” νƒœκ·Έ  (0) 2020.06.10
[HTML+CSS] [ν…μŠ€νŠΈ κ΄€λ ¨ νƒœκ·Έ] 03 - λͺ©λ‘μ„ λ§Œλ“œλŠ” νƒœκ·Έ  (0) 2020.06.09
[HTML+CSS] [ν…μŠ€νŠΈ κ΄€λ ¨ νƒœκ·Έ] 02 - 인라인 레벨 νƒœκ·Έ  (0) 2020.06.08

κ΄€λ ¨κΈ€

λŒ“κΈ€

ν‹°μŠ€ν† λ¦¬νˆ΄λ°”