카테고리 없음
HTML - 10/28(수)
장꾸꾸
2020. 10. 28. 14:13
ex1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My HomePage</title>
</head>
<body>
<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>
<h4>Hello World</h4>
<h5>Hello World</h5>
<h6>Hello World</h6>
</body>
</html>
ex2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
가나다라<br>
12345<br>
ABCD<br>
</body>
</html>
ex3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<pre>
가나다라
12345
ABCD
</pre>
& ©
</body>
</html>
ex4
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p><b> b 태그는 굵은 글꼴입니다.</b></p>
<p><i> i 태그는 기울임 꼴입니다.</i> </p>
<p><em> em 태그는 강조로 표시합니다.</em> </p>
<p><small> small 태그는 작은 글자를 표시합니다.</small> </p>
<p><mark> mark 태그는 음영 </mark>으로 표시합니다.</p>
<p><strong> strong 태그는 문자를 강력하게 강조합니다.</strong> </p>
<p>X<sub>2</sub>(아래 첨자) 와 Y<sup>2</sup>(위 첨자)입니다. </p>
<p>ins 태그는 <ins>추가한 내용을 밑줄</ins>로 표시합니다.</p>
<p><del>del 태그는 취소선을 표시합니다.</del> </p>
X<sup>2</sup> + Y<sup>2</sup> = Z<sup>2</sup>
</body>
</html>
ex5
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p>space: (공백)</p>
<p>less than: <</p>
<p>greater than: > </p>
<p>ampersand: &</p>
<p>cent: ¢ </p>
<p>pound: £ </p>
<p>yen: ¥</p>
<p>euro: € </p>
<p>section: § </p>
<p>copyright: © </p>
<p>registered trademark: ® </p>
</body>
</html>
ex6
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div style="background-color: orange;">12345</div>
<div style="background-color: yellow;">가나다라</div>
<div style="background-color: green;">ABCD</div>
<p>12345</p>
<p>가나다라</p>
<p>ABCD</p>
<span style="background-color: orange;">12345</span>
<span style="background-color: yellow;">가나다라</span>
<span style="background-color: green;">ABCD</span>
</body>
</html>
ex7
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>사자</h1>
<br>
사자는 아프리카에서 살며 강한 다리와 턱
<span style="color:red; font-weight: bold; font-family:궁서체">긴 송곳니</span>를 지니고 있다
</body>
</html>
ex8
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<img src="image/mouse.png">
<img src="image/mouse.png" width="80px" height="80px">
<img src="image/mouse2.png" alt="미키마우스">
</body>
</html>
<!--
./ : 현재위치(생략가능)
../ : 상위폴더(한단계 위로)
/ : 최상위(root)
-->
ex9
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<figure>
<img src="image/w3c.png" alt="w3c.png" width="75">
<figcaption>[그림 1-1]w3c 공식 사이트</figcaption>
</figure>
</body>
</html>
<!--
<figure></figure> : 이미지 그룹
<figcaption></figcaption> : 그림제목
-->
ex10
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<ul type="none"> <!-- circle, square, disc , none-->
<li>카페라테</li>
<li>아메리카노</li>
<li>콜드블루</li>
</ul>
</body>
</html>
ex11
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<ol type="1" start="50" reversed>
<li>Caffelatte</li>
<li>Americano</li>
<li>Espresso</li>
</ol>
<ol type="A">
<li>Caffelatte</li>
<li>Americano</li>
<li>Espresso</li>
</ol>
</body>
</html>
ex12
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd>Hyper Text Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheet</dd>
</dl>
</body>
</html>
ex13
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<a href="http://www.w3c.org" target="_top">W3C</a>
<a href="ex01_01.html" target="_blank">1페이지로 이동</a>
<a href="ex01_01.html" target="_blank" title="ex01_01페이지로 이동">
<img src="image/mouse.png"></a>
</body>
</html>
ex14
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table border="1">
<caption>주소록</caption>
<tr>
<th>이름</th>
<th>연락처</th>
<th>주소록</th>
</tr>
<tr>
<td>이순신</td>
<td>010-1234-4567</td>
<td>서울</td>
</tr>
<tr>
<td>홍길동</td>
<td>010-7894-7894</td>
<td>제주</td>
</tr>
</table>
</body>
</html>
ex15
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table border="1">
<caption align="bottom">[표 1]방송국 채널</caption>
<tr>
<td colspan="4">지상파 방송국</td>
</tr>
<tr>
<td rowspan="2">채널</td>
<td>KBS</td>
<td>MBC</td>
<td>SBS</td>
</tr>
<tr>
<td>11</td>
<td>9</td>
<td>5</td>
</tr>
</table>
</body>
</html>
ex16
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table border="1">
<caption>교재 가격표</caption>
<thead>
<tr>
<th>서적명</th>
<th>출판사</th>
<th>가격</th>
<th>기타</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2">합계</td>
<td>75,000원</td>
<td> </td>
</tr>
</tfoot>
<tbody>
<tr>
<td>HTML5</td>
<td>공갈닷컴</td>
<td>55,000</td>
<td rowspan="2"></td>
</tr>
<tr>
<td>JavaScript</td>
<td>야메루출판사</td>
<td>20,000</td>
</tr>
</tbody>
</table>
</body>
</html>
ex17
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<iframe src="ex01_01.html" width="200px" height="200px">
<p>이 브라우저는 iframe을 지원하지 않습니다</p>
</iframe>
</body>
</html>
<!--
iframe : html에서 일정한 영역을 할당해서 삽입하는 프레임
-->
ex18 : form 태그
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="ex01_01.html" method="post">
<table border="1">
<tr>
<td>아이디</td>
<td><input type="text" name="id" size="20"></td>
</tr>
<tr>
<td>비밀번호</td>
<td><input type="password" name="pwd" size="20"></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="목록">
<input type="submit" value="전송">
<input type="reset" value="취소">
</td>
</tr>
</table>
</form>
</body>
</html>
ex19
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="ex01_01.html" method="get">
<table border="0">
<tr>
<td>성별<br>
<td><input type="radio" name="gender" value="man" checked>남자
<input type="radio" name="gender" value="woman">여자</td>
</tr>
<tr>
<td>취미</td>
<td><input type="checkbox" name="hobby" value="climbing">등산
<input type="checkbox" name="hobby" value="traveling">여행
<input type="checkbox" name="hobby" value="fishing">낚시</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="전송">
<input type="reset" value="취소">
</td>
</tr>
</table>
</form>
</body>
</html>
ex20
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form>
<table border="0">
<tr>
<td>컴퓨터 운영체제</td>
<td>
<select name="OS" size="3" multiple>
<option value="windows">윈도우7</option>
<option value="linux">리눅스</option>
<option value="solrais">솔라리스</option>
<option value="mac">맥</option>
</select>
</td>
<tr>
<tr>
<td>기타사항</td>
<td><textarea rows="7" cols="30" name="exam"></textarea></td>
</tr>
</table>
</form>
</body>
</html>
ex21
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<select>
<option>JAVA</option>
<option>JSP</option>
<option>HTML5</option>
<option>jQuery</option>
</select>
</body>
</html>
ex22
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<select>
<optgroup label="html5">
<option>html</option>
<option>css</option>
<option>javascipt</option>
</optgroup>
<optgroup label="웹표준">
<option>구조</option>
<option>표현</option>
<option>동작</option>
</optgroup>
</select>
</body>
</html>
<!--
optgroup : select에서 옵션 그룹화
-->