2020/09/25 - [홈페이지 만들기/1단계. HTML] - 2020 비주얼 스튜디오 코드 사용 방법 및 HTML 기본 구조1
2020 비주얼 스튜디오 코드 사용 방법 및 HTML 기본 구조1
2020 비주얼 스튜디오 코드 사용 방법 및 HTML 기본 구조1 오늘은 2020 비주얼 스튜디오 코드 사용 방법 및 HTML 기본 구조를 알아보겠습니다. 2020/09/22 - [홈페이지 만들기/1단계. HTML] - 2020 비주얼 스튜
makinghome.tistory.com
※ 아래 글을 읽기 전에 ↑위 글↑을 먼저 읽어주세요.
HTML 기본 구조2
「HTML 기본 구조1」에서 완성한 '구조.html'을 사용해 HTML 기본 구조를 알아봅시다.
1. <와 >로 묶인 부분을 HTML 태그(tag)라고 합니다.
- 옷가게에서 물건을 구입할 때 가격이 써 있는 태그(price tag)를 본 적이 있을 것입니다.
- 태그에는 가격뿐만 아니라 사이즈, 소재, 세탁 방법 등 그 제품에 대한 설명이 써있지요.
- HTML 태그도 이와 비슷합니다.
- <와 > 안 쪽에 표현하고 싶은 정보의 종류를 집어넣어 웹페이지에 표현하는 것입니다.
 |
 |
2. <h1>이 글은 제목1입니다.</h1>
- 예를 들어 <body>아래 쪽에 '<h1>이 글은 제목1입니다.</h1>'을 작성해보겠습니다.
- 편집창에서 우클릭한 후 Open with Live Server를 클릭하면, '구조.html' 파일이 실행됩니다.
- 그러면 웹페이지 상에서 아래와 같은 화면을 확인할 수 있습니다.
- h1 태그는 제목1을 나타내는 태그입니다.
- 따라서 사람들이 제목임을 알 수 있도록 일반 텍스트보다 굵고 진하게 표시됩니다.
- h1부터 h6까지 있는데, h1이 가장 큰 제목이고, h6이 가장 작은 제목입니다.
- h6으로 갈수록 크기가 작아지고 굵기도 얇아집니다.
3. 태그는 소문자로 씁니다.
- HTML 태그는 대·소문자를 구별하지 않지만, 표준은 소문자로 사용할 것은 권장합니다.
4. 여는 태그와 닫는 태그를 정확히 입력합니다.
- 대부분의 태그는 여는 태그와 닫는 태그가 하나의 쌍으로 이루어집니다.
- 예를 들어, h1 태그에서는 <h1>이 여는 태그, </h1>이 닫는 태그입니다.
- 웹브라우저는 여는 태그에서 닫는 태그까지를 태그의 적용 범위로 인식합니다.
- 따라서 </h1> 뒤로 텍스트가 작성된다면, 그 텍스트는 제목1로 인식되지 않습니다.
5. <!DOCTYPE html>
- <!doctype>는 웹브라우저에게 '이 문서는 HTML문서이니, 그 형식에 맞게 해석해'라고 말해주는 것입니다.
6. <html lang="en">...</html>
- html 문서가 시작되고, 끝나는 부분을 말해주는 것입니다.
- lang="en"은 문서에서 사용한 언어를 지정해주는 것입니다.
- "en"으로 지정되어 있다면 웹브라우저는 기본적으로 '영어'를 기준으로 이 웹페이지를 해석하게 됩니다.
- "ko"로 지정하면, '한국어'로 웹페이지를 해석합니다.
7. <head>...</head>
- 웹브라우저가 알아야할 정보들을 모아두는 곳입니다.
- 웹페이지 상에서 사용자들에게 이 내용이 보이지는 않습니다.
- <meta charset="UTF-8">은 UTF-8이라는 문자 세트를 사용한다고 말하는 것입니다.
- <meta name="viewport" content...>는 모바일 기기에서도 웹페이지가 잘 표현되도록 설정한 것입니다.(나중에 자세히 다루겠습니다.)
- <title></title>은 아래와 같이 웹브라우저의 제목 표시줄에 표시될 내용을 작성하는 곳입니다.
8. <body>...<body>
- 실제 브라우저에 표시될 내용을 입력하는 곳입니다.
- 위에서 예를 들었던, h1태그도 이 곳에 입력한 것입니다.
- 앞으로 실습할 예제들은 주로 이 곳에 입력할 것들이 많습니다.
'홈페이지 만들기 > 1단계. HTML' 카테고리의 다른 글
| HTML 목록(list) 태그: <ul> <ol> <li> <dl> <dt> <dd> (0) | 2020.10.07 |
|---|---|
| HTML 인라인(inline) 태그: <strong> <b> <em> <i> <q> <mark> <span> (0) | 2020.10.05 |
| 2020 비주얼 스튜디오 코드 사용 방법 및 HTML 기본 구조1 (0) | 2020.09.25 |
| 2020 비주얼 스튜디오 코드 설치(한글판) (0) | 2020.09.22 |
| 왕초보 홈페이지 만들기 (0) | 2020.09.20 |
댓글