Hyper Text Mark up Language
<h1 class=”primary”>제목<h1>
HTML 문서 기본 구조 (!치고 enter)
doctype, html, head, body
<!-- 해당 문서가 어느 버전으로 작성되어 있는지 -->
<!DOCTYPE html>
<html lang="en"> <!-- 이 웹 문서가 어느 언어로 작성되어 있는지 -->
<head> <!-- 웹 문서의 정보를 담당. -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hello Html!</title>
</head>
<body> <!-- 웹에 표시되는 내용 -->
</body>
</html>
주석 한 번에 처리하기 : command + /
>
+
*
#
.
{}
$
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- 자식 노드 > : div>ul>li -->
<dic>
<ul>
<li></li>
</ul>
</dic>
<!-- 형제 노드 + : div>ul+ol+div -->
<div>
<u></u>
<ol></ol>
<div></div>
</div>
<!-- 반복하기 * : div>ul>li*3 -->
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!-- 아이디 # : span#item -->
<span id="item"></span>
<div id="item"></div>
<!-- 클래스 . : span.title -->
<span class="title"></span>
<div class="title"></div>
<!-- 콘텐츠 {} : p.container{Hello World} -->
<p class="container">Hello World</p>
<!-- 자동 넘버링 $ : p.container{item$}*5 -->
<p class="container">item1</p>
<p class="container">item1</p>
<p class="container">item2</p>
<p class="container">item3</p>
<p class="container">item4</p>
<p class="container">item5</p>
</body>
</html>
<h1>
~ <h6>
Heading
<p>
Paragraph
<hr>
Horizontal Rule
<br>
Break
<i>
Italic
<em>
Emphasis
<b>
Bold
<strong>
표시와 강조 차이
<em>
<strong>
사용<ol>
Ordered List
<ul>
Unordered Lists
<li>
Listed item
<ul>
, <ol>
태그의 하위<dl>
Definition List
<dt>
Definition Term
<dd>
Definition Description
<dl>
태그는 하나 이상의 <dt>-<dd>
쌍의 태그를 갖고 있어야 함<dt>-<dd>
태그가 반드시 일대일 대응일 필요는 없다.<li>
, <dt>-<dd>
태그는 밖에서 독립적으로 사용 불가<ul>
태그의 하위요소로는 <li>
태그가 위치해야 함Visual Studio Code 단축키
Multi Select 기능
커서 끝으로 이동
<table>
<caption>
<tr>
<th>
, <td>
가 반드시 있어야 함<th>
<tr>
안에 있어야 함<td>
<tr>
안에 있어야 함<colgroup>
<col>
<colgroup>
의 자식으로 열 단위를 나눌 수 있음span
속성을 사용하여 열을 그룹으로 묶을 수 있음<thead>
<tbody>
<tbody>
로 묶어줌<tfoot>
<table>
→ HTML5에서는 웹 표준이 아니므로 CSS 대체 필요
<th>
<th scope=”col”>
<th scope=”row”>
<th>
, <td>
<td colspan=”2”>
<td rowspan=”2”>
<col>
<col span=”3”>
어디까지 올라가는거야 구름