emmet 문법 : 강력한 자동완성 기능 등으로 HTML 작성 속도를 크게 향상시켜주는 플러그인
- 사용법 링크 🔗
HTML의 주석 표시 : <!— —> 화면상에서는 나타나지 않고 코드를 설명하는 용도로 사용. 협업
<!DOCTYPE html> : 해당 문서가 어떤 타입인지 나타내주는 태그 (html타입인 것을 알 수 있음.)
<h1></h1> : 이 문서의 대표 제목을 뜻함. h태그는 6까지 존재.
문서 내에는 <h1>태그가 하나만 존재하는걸 권함.
- h1*3 + tab : <h1></h1>이 3개 만들어짐 (emmet 문법)
- h$*6 + tab : <h1>부터 <h6>까지 하나씩 만들어짐 (emmeta 문법)
<p></p> : 태그는 paragraph, 즉 문단의 약자로, 하나의 문단을 만들 때 쓰임.
<html>
<body>
<p>first paragraph</p>
<p>second paragraph</p>
<p>
new line<br>
third paragraph
</p>
</body>
</html>
출력 결과
**first paragraph
second paragraph
new line
third paragraph**
<sub></sub> : 아래첨자를 나타냄.
<sup></sup> : 윗첨자를 나타냄.
<p>H<sub>2</sub>0</p>
<!-- 숫자 2를 아래첨자로 출력 -->
<p>x<sup>2</sup>=4</p>
<!-- 숫자 2를 윗첨자로 출력 -->
-
출력 결과
<br> : 개행 태그. 줄 바꾸기 태그.
<hr> : 구분선 태그. 태그가 있는 위치에 구분선을 나타냄.
<a></a> : 앵커 태그. 해당 마크업으로 이동하게 하는 태그. href속성에 입력한 주소로 이동하게 해줌.
<a href="<http://www.paullab.co.kr>">click</a>
<!-- 클릭 시 해당 주소로 이동 -->
<a href="<http://www.paullab.co.kr>" target="_blank">click</a>
<!-- 클릭 시 새탭 오픈, 해당 주소로 이동 -->
<a href="./index.html">click</a>
<!-- "./" = 현재 폴더에 있는 어떤 파일로 이동 -->
<a href="#move">click</a>
<!-- "#" = 페이지 내에 'move'라는 아이디에 해당하는 태그로 이동 -->
<!-- 그런 아이디가 존재하지 않으면 이동하지 ❌ -->
<a href="./test.png" download>click</a>
<!-- 클릭 시 해당 파일을 다운로드 하게 해줌 -->
굵은 글자 출력 태그
-
<strong></strong>: 시각 장애인분들이 사이트에 들어왔을 때 음성을 강조해서 읽게 해주는 태그. 또한 글자를 굵게 처리함.<strong>hello</strong>-
출력 결과
-
-
<b></b>: 글자를 굵게 처리함. 출력 형태는<strong>태그와 같으나 음성을 강조해서 읽게 해주지는 않음.<b>elit</b>-
출력 결과
-
기울인 글자 출력 태그
-
<em></em>: 시각 장애인분들이 사이트에 들어왔을 때 음성을 강조해서 읽게 해주는 태그. 글자를 기울여서 출력<em>quisquam</em>-
출력 결과
-
-
<i></i>: 글자를 기울여 출력. 출력 형태는<em>태그와 같으나 음성을 강조해서 읽게해주지는 않음.<i>autem</i>-
출력 결과
-
<mark></mark> : 형광펜으로 칠한듯이 나타내주는 태그. CSS에서 색깔 조정 가능.
<mark> corrupti </mark>
-
출력 결과
<addr>
<kbd>
<pre>
<code>