[HTML 기초] 2. 환경 세팅 & HTML 구조 (feat. vscode 사용 꿀팁)
1. 환경 세팅
HTML 문서를 작성하기 위해서는 전용 편집기가 필요합니다.
웹 개발을 할 때 주로 사용하는 에디터는 vscode라는 것으로, 여기에서 다운로드할 수 있습니다.
Extensions(확장 플러그인) 추천
vscode를 다운받은 상태 그대로 사용하는 것보다 Extensions를 활용해 내 입맛에 맞게 커스텀해서 사용하면 효율적으로 코딩을 할 수 있습니다. vscode를 열었을 때 왼쪽 사이드 바의 가장 아래쪽 아이콘을 클릭하면 플러그인을 검색하는 창이 나올 것입니다. 여기에 원하는 플러그인을 검색해서 설치하시면 됩니다.
굉장히 많은 플러그인이 있으니 개발을 하면서 나에게 맞는 환경을 구성해보는 재미도 쏠쏠합니다!
우선 가장 유용하다고 생각하는 두 가지를 추천합니다. (절대 후회 안 함)
Prettier: 코드를 자동으로 보기 좋게 정렬Live Server: 새로고침 없이 저장만으로 서버를 재시작
추가적으로 HTML과 CSS 작업을 할 때 유용한 것 두 가지 더 추천합니다.
HTML CSS Support: html에 적용된 css 추천CSS Peek: html에 적용된 css의 위치로 바로 이동
Vscode 단축키
윈도우 기준이며 제가 가장 많이 쓰는 것 기준으로 다섯 개 가져왔습니다.
더 많은 단축키가 궁금하시다면 여기를 참고하세요.
ctrl + /: 주석 처리ctrl + c: 커서가 있는 행 복사 (드래그 안해도 됨)ctrl + x: 행 삭제alt + ↑: 행 위로 이동alt + ↓: 행 아래로 이동
2. HTML 구조
이제 모든 준비 과정은 마쳤습니다. 본격적으로 코드를 살펴봅시다.
HTML의 기본 골격은 다음과 같습니다.
(vscode에서 빈 index.html 파일을 하나 만들고 !+tab을 누르면 위 골격이 자동 생성되고, < >를 태그라 부릅니다)
<!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>
계층적 구조
<html> 태그가 최상위 태그이며, 그 아래 <head>와 <body>가 있습니다. 그리고 <head>와 <body> 태그 안에 각각 여러 가지 태그들이 들어갑니다. 이렇게 HTML 문서의 구조는 계층적으로 구성됩니다.
<html>이 부모 태그이면 <head>와 <body>를 자식 태그라 부르고, <head>가 부모일 때는 <meta>를 자식 태그라 부릅니다. 부모와 자식 관계는 상대적입니다.
태그의 의미
가장 위에서부터 하나씩 의미를 살펴보면 다음과 같습니다.
<!DOCTYPE html>: 이 문서는 html 문서라고 정의하는 것<html>: 최상위 태그<head>: 사용자 관점이 아닌 검색 엔진을 위한 태그<meta>: 메타데이터(메타는 "~를 위한"이라는 뜻. 즉 메타데이터는 데이터를 위한 데이터)<title>: 문서의 제목 (브라우저 검색할 때 보여짐)
<body>: 사용자 관점에서 보이는 곳
조금 복잡해 보일 수 있지만, 초보자의 입장에서는 <body> 태그가 가장 중요하니 우선 이 부분에 집중하시면 됩니다. 이곳에서 사용자에게 보여지는 모든 것을 작성하기 때문입니다.
다음 시간에는 body 태그 안에 들어갈 다양한 태그들을 살펴보겠습니다.
'프론트엔드 입문 가이드 > HTML 기초' 카테고리의 다른 글
| [HTML 기초] 5. HTML 태그 - 폼 관련 태그(button, input, textarea, select, option, label, form) (0) | 2022.03.15 |
|---|---|
| [HTML 기초] 4. HTML 태그 - 멀티미디어, 표 관련 태그 (img, video, audio, table, thead, tbody, tr, th, td, caption) (0) | 2022.03.14 |
| [HTML 기초] 3. HTML 태그 - 텍스트 관련 태그(h1~h6, p, b, br, ol, ul, li, a) (0) | 2022.03.13 |
| [HTML 기초] 1. HTML이란? (0) | 2022.03.09 |
| [HTML 기초] 0. 소개 (0) | 2022.03.08 |
