01
<!DOCTYPE html>
<html lang="en">
<head> <!-- 브라우저에게 정보를 주는 태그. 여기에 작성하는 것들은 화면 상에 안보임-->
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello html</title>
</head>
<body><!--화면상에 보이는 부분-->
안녕하세요
<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>
testetste
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit.
Maxime explicabo cum minima soluta, <br/>beatae provident
<hr/>
neque eaque esse quam deserunt voluptatem vitae
reprehenderit voluptatibus<span>dolorem tenetur sapiente!</span>
Nihil, fugit distinctio?</p>
<blockquote> <strong>Lorem ipsum</strong> dolor sit amet consectetur adipisicing elit.
<u>Quis aperiam</u> minima saepe corrupti a reiciendis vitae eaque! </blockquote>
<pre>hello
안녕하세요
eheh
</pre>
</body>
</html>
02
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>웹개발 커리큘럼</h2>
<ul>
<li>java</li>
<li>html</li>
<li>javascript</li>
<li>css</li>
</ul>
<ol type="A">
<li>sql</li>
<li>jsp</li>
<li>framework</li>
<li>blockchain</li>
</ol>
</body>
</html>
03
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1">
<tr>
<th rowspan="2">제목 셀</th>
<td>1행 1열</td>
<td>1행 2열</td>
</tr>
<tr>
<td>2행 1열</td>
<td>2행 2열</td>
</tr>
</table>
</body>
</html>
04
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body bgcolor="green">
<h3>image tag</h3>
<img src="images/test.jpg" width = "50%"/>
<img src="images/tt.jpg" width = "50%"/>
<img src="images/miki.png" width = "50%"/>
</body>
</html>
05
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>html05 page</h3>
<a href="html06.html">html 06으로 이동</a><br/>
<a href="http://www.naver.com">네이버로 이동</a>
</body>
</html>
06
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3> html06 page </h3>
<h4>앵커 만들기</h4>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을
붙여 놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데
이 기능을 anchor 앵커라고 한다.
</p>
<ul id = "menu">
<li><a href="#content1">메뉴1</a></li>
<li><a href="#content2">메뉴2</a></li>
<li><a href="#content3">메뉴3</a></li>
</ul>
<h2 id="content1">내용1</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Nisi ab, praesentium laudantium quas hic non quasi earum
possimus magnam voluptate illo eius animi maiores.
Asperiores quasi tempore dignissimos. Aliquam, eaque?
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Nisi ab, praesentium laudantium quas hic non quasi earum
possimus magnam voluptate illo eius animi maiores.
Asperiores quasi tempore dignissimos. Aliquam, eaque?
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Nisi ab, praesentium laudantium quas hic non quasi earum
possimus magnam voluptate illo eius animi maiores.
Asperiores quasi tempore dignissimos. Aliquam, eaque?
</p>
<p><a href="#menu">[메뉴로]</a></p>
<h2 id="content2">내용2</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Nisi ab, praesentium laudantium quas hic non quasi earum
possimus magnam voluptate illo eius animi maiores.
Asperiores quasi tempore dignissimos. Aliquam, eaque?
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Nisi ab, praesentium laudantium quas hic non quasi earum
possimus magnam voluptate illo eius animi maiores.
Asperiores quasi tempore dignissimos. Aliquam, eaque?
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Nisi ab, praesentium laudantium quas hic non quasi earum
possimus magnam voluptate illo eius animi maiores.
Asperiores quasi tempore dignissimos. Aliquam, eaque?
</p>
<p><a href="#menu">[메뉴로]</a></p>
<h2 id="content3">내용3</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Nisi ab, praesentium laudantium quas hic non quasi earum
possimus magnam voluptate illo eius animi maiores.
Asperiores quasi tempore dignissimos. Aliquam, eaque?
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Nisi ab, praesentium laudantium quas hic non quasi earum
possimus magnam voluptate illo eius animi maiores.
Asperiores quasi tempore dignissimos. Aliquam, eaque?
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Nisi ab, praesentium laudantium quas hic non quasi earum
possimus magnam voluptate illo eius animi maiores.
Asperiores quasi tempore dignissimos. Aliquam, eaque?
</p>
<p><a href="#menu">[메뉴로]</a></p>
</body>
</html>
07
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>html 07 page</h3>
<form action="html08.html" method="get">
<label>메세지 <input type ="text" name = "msg"/></label>
<input type = "submit" value = "전송"/>
</form>
</body>
</html>
08
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>html 08 page</h3>
<form>
<input type = "text" name ="id" placeholder="아이디를 적어주세요"/> <br/>
<input type = "text" name ="id" value="작성불가" readonly/> <br/>
<input type = "hidden" name = "hiddenval1" value=""heiddenvalue>
<input type = "password" name ="pw" required/> <br/>
A형<input type = "radio" name="bloodtype" value="A"><br/>
B형<input type = "radio" name="bloodtype"value="B"><br/>
<input type ="checkbox" name ="hobby" value ="hiking"><br/>
<input type ="checkbox" name ="hobby" value="backpacking"><br/>
<input type ="checkbox" name ="hobby" value = "netflix"><br/>
<input type ="color" name ="cs"><br/>
<input type = "date" name="date"><br/>
<input type = "month" name="date"><br/>
<input type = "week" name="date"><br/>
<input type = "time" name="time" value="09:30"><br/>
<input type = "time" name="time" value="18:20"><br/>
<input type = "datetime-local" name="time" ><br/>
<input type ="image" src="images/miki.png" width="100"><br/>
<input type ="button" value=""button><br/>
<button>버튼</button><br/>
<input type ="file"/>
<input type = "submit" value = "submit">
</form>
</body>
</html>
09
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<input type = "text" name="id"/> <br/>
<select name="subject">
<optgroup label="프론트앤드" >
<option value="null">선택해주세요</option>
<option value="html"selected>html</option>
<option value="js">javascript</option>
<option value="css">css</option>
</optgroup>
<optgroup label="백엔드">
<option value="java">java</option>
<option value="sql">sql</option>
<option value="Spring">Spring</option>
</optgroup>
</select>
<br/>
<textarea name="letter" cols="55" rows="10">Hello</textarea>
</form>
<br/>
<progress value="30" max="100"></progress>
</body>
</html>
10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <!--인코딩 설정-->
<!--렌더링 설정, 호환성 문제가 주로 발생되는 IE때문에
표준 모드로 렌더링 되도록 하는 설정 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name = "description" content="html 문서에 대한 설명">
<meta name="keywords" content = "검색 엔진에 걸리게 해줄 키워드">
<meta name = "author" content="작성자">
<!--반응형 관련 설정
width: 화면 초기 너비를 device-width 기기 너비로 세팅
initial-scale: 초기 확대값 1.0 == 100%
max-scale: 최대 확대값/ min-scale: 최소 확대값
user-scaleable: 사용자 확대 허용 여부 설정
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--link: 외부 데이터나 문서를 가져오기 위한 태그.
rel (relationship 관계) 속성으로 지정-->
<link rel="icon" href="images/miki.png" />
<link rel ="stylesheet" href="style.css" />
<style>
/*css 스타일 적용 여기에 할 수 있음.*/
</style>
<script>
//자바 스크립트 코드 작성
</script>
<title>Document</title>
</head>
<body>
<script>
//자바 스크립트 코드 작성
</script>
<script src ="js/test.js"></script> <!--이렇게 하면 코드만 따로 뺄 수 있다..-->
</body>
</html>
11
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header> 헤더부분 로고, 검색창 </header>
<nav>네비게이션 메뉴</nav>
<section>
<article></article>
<article></article>
</section>
<aside>서브메뉴, 로그인 입력란</aside>
<footer>회사 정보 등등</footer>
</body>
</html>