1. 코드 스니펫 설정
Cmd + P로 명령 팔레트 열기>snippet입력 후 사용자 코드 조각 설정 클릭- html.json 파일 열어서 수정 (html(html) 항목 찾으면 됨)
{
"Print to console": {
"prefix": "htmlko",
"body": [
"<!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>$1</title>",
"</head>",
"<body>",
" $2",
"</body>",
"</html>"
],
"description": "한국어 페이지용 html 템플릿"
}
}- 설정 후 html 파일에서
htmlko를 입력하면 해당 코드가 뜸
! + Tab사용 시 언어 설정이 en으로 나오기 때문에 설정해 주는 것htmlko + Tab입력 시 바로 title에 커서 위치하게 됨- 제목 입력 후 Tab 키 누르면 body로 넘어가도록 설정
2. URL, IP, PORT
1️⃣ URL
Uniform Resource Locater
인터넷 상에서 자원들의 위치를 나타내는 주소
ex) https://www.naver.com
구조
1. 프로토콜 종류
2. 자원이 있는 서버의 IP 주소, 도메인 주소, 포트 주소
3. 자원의 위치
2️⃣ IP
Internet Protocol address
컴퓨터 네트워크 상에서의 각 장치들이 가진 고유 번호
ex) 173.194.126.240
위와 같은 IP 주소 형식은 외우거나 구별하기 어렵기 때문에 DNS를 통해 도메인 주소로 변환
→ www.google.com
3️⃣ PORT
네트워크 서비스나 특정 프로세스를 식별하는 논리 단위, 번호로 구분하여 포트 번호라고 칭함
포트 번호는 IP 주소와 함께 쓰여 해당하는 프로토콜에 의해 사용됨
ex) ftp://000.000.000.000:80의 URL에서 90이 포트 번호
자주 쓰이는 포트 번호
- 20: FTP(data)
- 80: WWW, HTTP
- 443: TLS/SSL 방식의 HTTP
3. HTML Living Standard
HTML 문법 등을 규정한 표준
The HTML Living Standard (sometimes informally called HTML5). The HTML specification has been a living document without version numbers since 2011. It includes both HTML, the core markup language for the web, and a number of related APIs.
HTML Living Standard은 종종 비공식적으로 HTML5라고 불린다. HTML의 스펙(specification)은 2011년부터 버전 넘버 없이 살아있는 표준(living standard)으로 존재한다. HTML Living Standard는 웹의 핵심적인 마크업 언어인 HTML과 여러 관련 API들을 모두 포함한다.
HTML5라는 명칭은 더 이상 쓰지 않지만 찾아보면 곳곳에서 아직 쓰이고 있다. (HTML 아이콘만 봐도 알 수 있다.)
4. Grouping Content
1️⃣ ol, ul, li
<ol>
ordered list
순서가 있는 목록
<ul>
unordered list
순서가 없는 목록
<li>
list item
항목들을 나열함
2️⃣ dl, dt, dd
<dl>
definition list
정의 목록
<dt>
definition term
정의할 용어
<dd>
definition description
용어 설명
3️⃣ div
div
레이아웃 나눌 때 사용
하위 요소들을 묶어 스타일 변경 가능
article, section, header, nav 모두 div와 같은 역할 함
-
<section>
논리적으로 관계가 있는 것들을 묶을 때 사용 -
<article>
독립적인 콘텐츠를 다룰 때 사용
div로 도배하는 건 탈락의 지름길
웬만한 내용은 section으로 다룰 것
4️⃣ figure, figcaption
figure
이미지와 다이어그램을 감싸는 태그
figcaption
이미지나 다이어그램에 캡션을 추가하는 태그
- 코드
<figure>
<img width="auto" height="100px" src="elephant.jpg" alt="엄마 코끼리와 아기 코끼리">
<figcaption>
관심받고 싶어 하는 아기
</figcaption>
</figure>- 결과
관심받고 싶어 하는 아기
5️⃣ p
단락 표시 태그
하나의 완결된 문단을 의미
줄 바꿈의 용도로 사용하지 말 것
6️⃣ pre
HTML 파일에 작성한 내용을 그대로 화면에 나타냄
- 코드
<pre>
fuction 제곱(x) {
return x**2;
}
</pre>- 결과
fuction 제곱(x) { return x**2; }
7️⃣ blackquote
인용구문
- 코드
<blockquote>
<p>소년이여, 야망을 가져라!</p>
<cite>윌리엄 스미스 클라크</cite>
</blockquote>- 결과
소년이여, 야망을 가져라!
윌리엄 스미스 클라크
8️⃣ main
문서의 주요 콘텐츠
9️⃣ hr
가로줄 삽입하는 태그
콘텐츠 그룹 안에 넣지 않고 밖에서 사용
은행권에서는 사용하지 않음 (보여지는 화면이 달라짐)
예전에는 <hr/>로 태그를 닫아야 했지만 이제는 닫아 주지 않아도 됨 (br도 마찬가지)
- 코드
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
<hr>
<p>Voluptatem harum non tempora laboriosam.</p>- 결과
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Voluptatem harum non tempora laboriosam.
5. emmet 문법
h${hello}*6: h1부터 h6 태그까지 자동 완성 가능
<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>h1+h2: h1 태그와 h2 태그가 한꺼번에 생성
<h1></h1>
<h2></h2>h1>p: h1 안에 p 태그 생성
<h1>
<p></p>
</h1>h1+h2+p: h1 h2 p 태그가 차례대로 한꺼번에 생성
<h1></h1>
<h2></h2>
<p></p>h1{hello}: h1 태그 안에 hello 문자 입력
<h1>hello</h1>h1>p+p: h1 태그 안에 p 태그 두 개 생성
<h1>
<p></p>
<p></p>
</h1>h1#one: one이라는 id 값을 가진 h1 태그 생성
<h1 id="one"></h1>h1.one: one이라는 class 이름을 가진 h1 태그 생성
<h1 class="one"></h1>.one: one이라는 class 이름 가진 div 태그 생성
<div class="one"></div>#one: one이라는 id 값을 가진 div 태그 생성
<div id="one"></div>p[a="value1" b="value2" c="1"]
<p a="value1" b="value2" c="1"></p>h1.one.two#three
<h1 class="one two" id="three"></h1>
table>(tr>td*4)*3
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>