<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>버튼</title>
</head>
<body>
<h3>버튼을 만들자</h3>
<hr>
<table>
<tr>
<td><button type="button">1</button></td>
<td><button type="button">2</button></td>
<td><button type="button">3</button></td>
</tr>
<tr>
<td><button type="button">4</button></td>
<td><button type="button">5</button></td>
<td><button type="button">6</button></td>
</tr>
<tr>
<td><button type="button">7</button></td>
<td><button type="button">8</button></td>
<td><button type="button">9</button></td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>웹 브라우저</title>
</head>
<body>
<h3>웹 브라우저 소개</h3>
<hr>
<table>
<tr>
<td>
<div>
브라우저라고 불리기도 하는 <strong>웹 브라우저</strong>는,
사용자에게 웹 서버 컴퓨터에 접속하고 웹 페이지, 이미지, 동영상, 음악 등 다양한...
</div>
</td>
<td>
<figure>
<img src="media/chrome.png" alt="구글 캡쳐 이미지" width="200">
<figcaption>그림 1-2 구글 Chrome</figcaption>
</figure>
</td>
</tr>
<tr>
<td>웹 페이지는 브라우저에 HTML5 문서임을 알리기 위해</td>
<td>
<figure>
<pre>
<code>
<!doctype html>
<html>
...
</html>
</code>
</pre>
<figcaption>그림 1-3 HTML5 문서 구성</figcaption>
</figure>
</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인 폼 만들기</title>
</head>
<body>
<h3>로그인 폼</h3>
<hr>
<fieldset>
<legend>Login</legend>
<label for="username">Username</label>
<input type="text" id="username">
<label for="passwd">Password</label>
<input type="password" id="passwd">
</fieldset>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>웹 프로그래밍 개요</title>
</head>
<body>
<h3>웹 프로그래밍 개요</h3>
<hr>
<details>
<summary>
웹의 기본 목적
</summary>
<p>
웹의 기본 목적은 한 컴퓨터에서 만든 문서를 다른 컴퓨터에서 쉽게 볼 수 있도록 하는 것이다.
</p>
</details>
<details>
<summary>
왜 Web인가?
</summary>
<p>
전 세계의컴퓨터들을 인터넷으로 거미줄처럼 연결하고 웹 문서를 쉽게 주고 받을 수 있도록 시스템을 만들고
</p>
</details>
<details>
<summary>
웹 페이지를 구성하는 3요소
</summary>
<ul>
<li>HTML - 문서의 구조와 내용</li>
<li>CSS(Cascading Style Sheet) - 문서의 모양</li>
<li>Javascript - 행동 및 응용프로그램</li>
</ul>
</details>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>도형 서식 폼 만들기</title>
</head>
<body>
<h3>도형 서식 폼 만들기</h3>
<hr>
<fieldset>
<legend>도형 서식 입력</legend>
선종류
<select name="line" size="3" multiple>
<option value="0">선 없음</option>
<option value="1">실선</option>
<option value="2">점선</option>
</select>
<br />
선두께 <input type="number" step="1" value="6" max="50">
선색 <input type="color" value="#00bFFF">
<br />
투명도(0~100): <input type="range" min="0" min="100" list="opacity">
<datalist id="opacity">
<option value="5" label="low">
<option value="50" label="medium">
<option value="95" label="high">
</datalist>
</fieldset>
</body>
</html>
'IT > Html' 카테고리의 다른 글
| html5 기본태그 - h3, hr, p, pre, dl, dt, dd, ul, li, table, caption, th, tr, td, thead, tfoot, tbody, img, audio (0) | 2018.08.13 |
|---|