728x90
[ex01]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>text</title><!-- 다수가 블럭영역 일부가 인라인영역 css를 이용하면 블럭을 인라인으로 서로 수정가능하다. -->
</head>
<body>
<section><!-- 블럭. -->
<h2>이용안내</h2><!-- 글자색깔 크기는 css로 변경. -->
<article><!-- 블럭 -->
<h3>이곳에서는</h3><!-- 블럭영역 -->
<p>도로변에 있어서 접근이 용이하고<br>
저녁에는 조용합니다.
</p><!-- 모든영역은 블럭영엉 or 인라인영억 -->
<div>block</div>블럭<br><!-- div - 블럭영역표시 -->
<span>inline</span>인라인 <!-- span - Java에서의 print 느낌. 데이터보여줄만큼만 차지 -->
</article>
</section>
<blockquote cite="http://www.w3.org/">HTML이란</blockquote> 무엇인가<br><!-- blockquote 블럭 타입까지 생각한 것 -->
<q cite="https://www.w3.org/">HTML이란</q>무엇인가<!-- cite타입: 부과데이터. 화면에는 출력하지않지만 알았으면 하는 데이터 -->
<pre>프로그램 소스 적당</pre><!-- 블럭영역 pre: 안에다가 프로그램 소스들을 많이 씀. 빈칸 값대로 모두 출력되는 태그 -->
</body>
</html>
[ex02]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>text</title>
</head>
<body>
<mark>형광펜</mark><!-- mark: 형광펜 표시 -->
<p><time>2016.7.7</time></p><!-- time: 시간데이터 -->
<p>
<time datetime="2016-07-07"></time><!-- 속성들은 출력되지 않음. 객체 안에 데이터를 담을 수 있음.-->
<time datetime="09:00:00"></time>
<time datetime="2016-07-07T09:00:00"></time>
</p>
<p>
<strong>strong:강조O, 진하게</strong><br>
<b>b:강조X, 진하게</b><br>
<em>em: 강조O, 이탤릭(기울기)</em><br>
<i>i: 강조X, 이탤릭(기울기)</i>
</p>
</body>
</html>
[ex03]
<!DOCTYPE html> <!-- 데이터를 바꾸기 위해(동적스타일) JSP를 이용 -->
<html>
<head>
<meta charset="UTF-8">
<title>list</title> <!-- 목록을 만드는 태그는 ul, ol, dl 3가지 -->
</head>
<body>
<ul><!-- 순서 상관X -->
<li>항복1</li>
<li>항복2</li>
</ul>
<ol> <!-- ol: ordered list 순서를 정해주는 것-->
<li>항복1</li>
<li>항복2</li>
</ol>
<ol type="a" start="2"> <!-- a, A, i, I-->
<li>항복1</li>
<li>항복2</li>
<li>항복3</li>
<li>항복4</li>
</ol>
<dl> <!-- 정의리스트 생성 (사전)-->
<dt>젊음</dt><!-- 제목을 지정 -->
<dd>젊음이 파생되어 젊다가 된다. 순간</dd><!-- 설명 -->
<dt>늙음</dt>
<dd>늙다에서 파생되었다. 진행</dd>
</dl>
</body>
</html>
[ex04]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>table</title>
</head><!--테이블 구성: row(행)-tr 데이터1개, column(열,셀)-td -->
<body>
<table>
<tr>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
</tr>
</table>
<table>
<caption>표제목</caption>
<tr>
<th>방이름</th><!-- column(셀)의 제목-th -->
<td>인원수</td>
</tr>
<tr>
<th>유채방</th>
<td>4인실</td>
</tr>
<tr>
<th>동백실</th>
<td>2인실</td>
</tr>
<tr>
<th>천혜향방</th>
<td>4인실</td>
</tr>
</table>
<table border="1">
<caption>객실</caption>
<thead> <!-- 테이블의 맨위(테이블 머릿글) -->
<tr>
<th>방 이름</th>
<th>대상</th>
<th>크기</th>
<th>가격</th>
</tr>
</thead>
<tfoot><!-- 테이블의 맨 아래로(테이블 바닥글)-->
<tr>
<td colspan="4">바깥채 전체를 렌트합니다.</td>
</tr>
</tfoot>
<tbody>
<tr>
<th>유채방</th>
<td>여성 도미토리</td>
<td rowspan="2">4인실</td>
<td rowspan="3">1인 20,000원</td>
</tr>
<tr>
<th >동백방</th>
<td rowspan="2">동성 도미토리</td>
</tr>
<tr>
<th>천혜향방</th>
<td>2인실</td>
</tr>
</tbody>
</table>
</body>
</html>
[ex05]
<!DOCTYPE html>
<html>
<head><!-- 현장에서는 상대경로 위주 http통신은 항상 연결이 끊어져있다.
connectionless 물리적, sessionless 논리적
로고, 화면구성은 소스로, 데이터들만 이미지로-->
<meta charset="UTF-8">
<title>link</title>
</head>
<body>
<a href="ex052.html"><p>이동하기</p></a>
<p><a href="ex052.html"><img src="img/house.jpg"></a></p><!-- URL은 상대경로//포토샵작업을 했던 로고들을
css에서 가능해짐-->
<p>
<a href="ex052.html" target="_blank">새 탭에서 열기</a>
<a href="ex052.html" target="content">프레임에서 열기</a>
<a href="ex052.html" target="_self">현재탭에서 열기</a>
</p>
<iframe name = "content"></iframe>
</body>
</html>
728x90
'WEB > HTML' 카테고리의 다른 글
| HTML 태그 먹히지 않게 하기. (0) | 2018.05.04 |
|---|---|
| [HTML] SVG를 이용하여 색깔 그라데이션 넣기. (0) | 2017.08.28 |
| [HTML] HTML강의 - ch04 (0) | 2017.08.22 |
| [HTML] HTML강의 - ch03 (0) | 2017.08.22 |
| [HTML] HTML강의 - ch01 (0) | 2017.08.22 |
댓글