vscode 확장팩
prettier
auto rename
vs code icon
HTML 작성 규칙
태그는 대소문자를 구별하지 않음
하지만 보통 소문자로 쓴다. 혼용은 비권장
본문내 연속된 줄바꿈이나 탭은 하나의 공백으로 처리됨.
<!DOCTYPE html>
<html>
<head>
<title>HTML5 시작</title>
</head>
<body>
HTML5 기본 태그를 사용하여 작성한 문서입니다.
<p></p>
</body>
</html><!DOCTYPE html>
<html lang="ko">
<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>
<h1>속성 테스트</h1>
<img src="photo.jpg" border="3" width="400" height="300"
title="환영합니다." alt="Welcome">
<br><a href="http://naver.com">네이버</a>
<!--
<h1>공백 테스트 입니다...</h1>
<p>탭도 넣고요<p>줄
도 여러개 넣어볼까요~~~?</p>
-->
</body>
</html>링크 테스트
<a href = "">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=dus, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>링크 테스트</h1>
<p>
<a href = "http://naver.com" target="_blank">네이버</a>
</p>
<p>
<a href = "ex02.html">ex02.html</a>
</p>
<p>
<a href = "ex05.html#sec03">ex02.html</a>
</p>
<p>
<a href = "ex02.html">
<img src = "photo.JPG" width="400">
</a>
</p>
</body>
</html>책갈피 기능
<!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 id ="top">
<p>
<a href="#sec01">섹션 1</a> | <a href="#sec02">섹션 2</a> | <a href="#sec03">섹션 3</a>
</p>
<h1 id="sec01">책갈피 기능</h1>
<p>책갈피 기능1 책갈피 기능1책갈피 기능1책갈피 기능1책갈피 기능1</p>
<p>책갈피 기능1 책갈피 기능1책갈피 기능1책갈피 기능1책갈피 기능1</p>
<p>책갈피 기능1 책갈피 기능1책갈피 기능1책갈피 기능1책갈피 기능1</p>
<p>책갈피 기능1 책갈피 기능1책갈피 기능1책갈피 기능1책갈피 기능1</p>
<a href ="#top">top</a>
<h1 id="sec02">책갈피 파트2</h1>
<p>책갈피 기능1 책갈피 기능1책갈피 기능1책갈피 기능1책갈피 기능1</p>
<p>책갈피 기능1 책갈피 기능1책갈피 기능1책갈피 기능1책갈피 기능1</p>
<p>책갈피 기능1 책갈피 기능1책갈피 기능1책갈피 기능1책갈피 기능1</p>
<p>책갈피 기능1 책갈피 기능1책갈피 기능1책갈피 기능1책갈피 기능1</p>
<a href ="#top">top</a>
<h1 id="sec03">책갈피 파트3</h1>
<p>책갈피 기능1 책갈피 기능1책갈피 기능1책갈피 기능1책갈피 기능1</p>
<p>책갈피 기능1 책갈피 기능1책갈피 기능1책갈피 기능1책갈피 기능1</p>
<p>책갈피 기능1 책갈피 기능1책갈피 기능1책갈피 기능1책갈피 기능1</p>
<p>책갈피 기능1 책갈피 기능1책갈피 기능1책갈피 기능1책갈피 기능1</p>
<a href ="#top">top</a>
<h1 id="sec04">책갈피 파트4</h1>
<p>책갈피 기능1 책갈피 기능1책갈피 기능1책갈피 기능1책갈피 기능1</p>
<p>책갈피 기능1 책갈피 기능1책갈피 기능1책갈피 기능1책갈피 기능1</p>
<p>책갈피 기능1 책갈피 기능1책갈피 기능1책갈피 기능1책갈피 기능1</p>
<p>책갈피 기능1 책갈피 기능1책갈피 기능1책갈피 기능1책갈피 기능1</p>
</body>
</html>순서
ol과 ul이 있음
<!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>
<!-- 무순서 목록 -->
<section>
<article>
<h2>무순서 목록</h2>
<ul>
<li>coffee</li>
<li>
tea
<ul>
<li>black tea</li>
<li>green tea</li>
<li>milk tea</li>
</ul>
</li>
<li>cocoa</li>
<li>아이템</li>
</ul>
</article>
</section>
</body>
</html>입력
<!DOCTYPE html>
<html>
<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 name="INPUT1" action="page.jsp" method="post">
<input type="text" name="user" />
<input type="text" name="dept" />
<input type="submit" value="전송" />
<input type="reset" value="다시작성" />
</form>
</body>
</html><!DOCTYPE html>
<html lang="ko">
<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>
<h3>당신의 성별은 무엇입니까?</h3>
<input type="radio" name="sex" value="male" checked />남자 <input type="radio" name="sex" value="female" />여자
<p></p>
<h3>당신은 몇학년입니까?</h3>
<input type="radio" name="year" value="1" checked />1학년 <input type="radio" name="year" value="2" />2학년
<input type="radio" name="year" value="3" />3학년 <input type="radio" name="year" value="4" />4학년
<p></p>
<input type="submit" value="제출" />
<input type="reset" value="다시작성" />
</form>
</body>
</html>