태그의 속성을 찾아보며 예제를 따라해봅시다.<aside> ⚓ 제목과 문단 태그
</aside>
<h> 태그 / 문단을 나타내는 <p> 태그<pre>태그 내에 다른 태그가 동작하는지 확인해보세요.<!doctype html>
<html>
<head>
<title>Example: 2-1</title>
</head>
<body>
<h1>example 2-1</h1>
<h2>html example</h2>
<p>hello world</p>
<p>hello
world
</p>
<p>hello<br>world</p>
<pre>
hello world
hello
world
</pre>
<pre>
<h2>hello
world
</h2>
</pre>
</body>
</html>
<aside> ⚓ 텍스트 관련 태그
</aside>
텍스트와 관련된 <b>, <strong>, <i>, <em> 등을 예제로 확인해봅시다.
실행 결과
<b>, <strong> 결과 확인 및 두 태그의 차이점을 찾아봅시다.<i>, <em> 결과 확인 및 두 태그의 차이점을 찾아봅시다.<!doctype html>
<html>
<head>
<title>Example: 2-2</title>
</head>
<body>
<b>bold text</b><br>
<strong>strong text</strong><br>
<i>italic text</i><br>
<em>emphasized text</em><br>
<mark>mark text</mark><br>
<small>small text</small><br>
<del>deleted text</del><br>
<ins>inserted text</ins><br>
This is <sup>superscript text</sup><br>
This is <sub>subscript text</sub>
</body>
</html>
<aside> ⚓ 목록 만들기
</aside>
type 속성을 통해 목록 앞의 불릿이 어떻게 바뀌는지도 확인해봅시다.
목록 속 목록, 중첩 목록을 시도해봅시다.
<!doctype html>
<html>
<head>
<title>Example: 2-3</title>
</head>
<body>
<h2>Unordered List</h2>
<ul type="square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h2>Ordered List</h2>
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
<aside> ⚓ input 검색창 만들기
</aside>
form 태그를 이용하여 text 입력창과 제출 버튼으로 이루어진 검색창을 만들어봅시다.form 태그 안에 <input type="text"> 로 입력란을, <input type="submit" value="search"> 로 전송 버튼을 만들어 봅시다.<!doctype html>
<html>
<head>
<title>Example: 4-1</title>
</head>
<body>
<h2>html-11.html : Naver search</h2>
<form action="">
search: <input type="text">
<input type="submit" value="search">
</form>
</body>
</html>