! + tap
: 기본 form 이 나타남
ctrl + /
: 코멘트 단축키
<!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>
<!-- 이것은 코멘트 -->
</body>
</html>
자주 사용하는 기본 태그와 요소
<!DOCTYPE html>
<head>
<style>
<!--CSS 내용 기재 가능-->
</style>
</head>
<body>
<h1>헤드라인 </h1>
<h2>좀 더 작은 헤드라인</h2>
<h3>h6까지 있음</h3>
<p>본문, 문단</p>
<!-- div, span 태그로 다른 태그들을 하나의 묶음으로 묶을 수 있다 -->
<div> 한 줄 전체 차지; 다음 내용은 줄 바꿈 됨
<span>콘텐츠 크기 만큼만 차지; 한 줄에 계속 기재</span>
</div>
</body>
<img src="경로">
💡 width="넓이" height="높이" 를 추가로 지정할 수 있음
width height 생략하면 기존 이미지 크기로 삽입
width만 입력하면 비율에 맞춰 height 자동 조절
<img src="https://velog.velcdn.com/images/velog/profile/9aa07f66-5fcd-41f4-84f2-91d73afcec28/green%20favicon.png" width="40" height="40">
<a href="주소"> 링크이름 </a>
💡 target="_blank" 새로운 탭에서 링크 열림
<a href="https://www.google.com" target="_blank"> 구글로 가는 링크 </a>
<ul><li>리스트</li></ul>
unordered list 순서가 정해지지 않은 리스트
<ol><li>리스트</li></ol>
ordered list 순서가 정해져있는 리스트
<ul> <!---unordered list 순서가 정해지지 않은 리스트-->
<li> 리스트 </li>
<ul>
<li> 리스트 </li> <!--리스트 안에 리스트도 가능-->
</ul>
<li> 리스트 </li>
</ul>
<ol> <!--ordered list 순서가 정해져있는 리스트-->
<li> 리스트 </li>
<li> 리스트 </li>
<li> 리스트 </li>
</ol>