Preface
이번 장에선 HTML 파일의 전체적인 구조와 몇 가지 주요한 시맨틱 태그를 알아봤다.
HTML의 문법 자체는 어려운 부분이 없는 것 같고, 몇몇 주된 태그들의 종류와 사용 방법 정도만 익히면 충분히 내가 원하는 내용을 웹 상에 표현할 수 있을 것 같다.
아, 그리고 책에 자세히 소개되지 않는 태그들 중 궁금한 것들은 따로 정리해 놓자.
1. HTML과 첫 만남
- HTML(Hyper Text Markup Language): 웹 문서를 만드는 언어
- 하이퍼텍스트: 문서를 서로 연결해주는 링크
- 태그(tag): 웹 문서의 다양한 부분을 구분할 수 있도록 해주는 꼬리표
- HTML의 기본 기능: 웹 브라우저에게 보여 줄 내용을 마크업하고 문서끼리 링크하는 것
- 스타일 시트(style sheet): 글자를 보기 좋게 꾸미거나 문서의 배치를 다양하게 바꾸는 것
2. HTML 구조 파악하기
- 웹 문서는 보통 <!DOCTYPE html>로 시작해 <html>, <head>, <body> 3개의 영역으로 구성된다.
- <!DOCTYPE html> 태그: 문서 유형을 지정한다.
→ html에선 대소문자를 구별하지 않는다.
- <html> 태그: 웹 문서의 시작과 끝을 나타낸다.
→ lang 속성으로 사용할 언어를 지정할 수 있다. (검색 사이트에서 특정 언어로 제한해 검색할 때 필요)
- <head> 태그: 웹 브라우저가 문서를 해석하는 데 필요한 정보를 입력한다. (웹 브라우저에는 표시되지 않음)
1. <meta> 태그: 웹 문서와 관련된 정보를 지정할 때 사용한다.
1) 화면에 글자를 표시할 때 어떤 인코딩을 사용할지 지정한다.
<meta charset="UTF-8">
<!-- 한글로 된 내용을 표시할 땐 UTF-8이라는 문자 세트를 사용 -->
2) 다양한 정보를 지정한다.
<meta name="keywords" content="html의 구조">
<!-- 웹 문서의 키워드 -->
<meta name="description" content="html의 구조를 알아봅시다">
<!-- 웹 문서의 설명 -->
<meta name="author" content="Gyeongmo Kim">
<!-- 웹 문서의 소유자나 제작자 -->
2. <title> 태그: 문서의 제목을 나타낸다.
→ 웹 브라우저의 제목 표시줄에 표시된다.
- <body> 태그: 실제 웹 브라우저에 표시할 내용을 입력한다.
3. HTML 파일 만들기
- vscode에 라이브 서버(live server) 플러그인을 설치해서 사용하면 작성한 파일을 웹 브라우저에서 바로 확일할 수 있다.
→ 라이브 서버 실행 단축키: command + L + O
- HTML의 기본 구조 자동으로 입력하는 방법
1) 느낌표 + tab/enter
2) html:5 + tab/enter
4. 웹 문서 구조를 만드는 시맨틱 태그
- 시맨틱 태그: HTML의 태그는 이름만 봐도 의미를 알 수 있으므로 시맨틱 태그라고 한다.
→ 웹 문서는 시맨틱 태그를 사용하지 않더라도 만들 수 있다.
- 시맨틱 태그를 사용하는 이유
1) 웹 브라우저가 HTML의 소스 코드만 보고도 영역을 구분할 수 있다.
2) 문서 구조가 정확히 나눠지므로 다양한 기기의 화면에서 웹 문서를 표현하기 쉽다.
3) 웹 사이트를 검색할 때 필요한 내용을 정확히 찾을 수 있다.
- 웹 문서 구조를 만드는 주요 시맨틱 태그
1. <header> 태그: 헤더 영역을 의미한다.
2. <nav> 태그: 같은 웹 문서 안에서 다른 위치로 연결하거나 다른 웹 문서로 연결하는 링크를 만든다.
1) 웹 문서의 위치에 영향을 받지 않으므로 독립해서 사용할 수도 있다.
2) 여러 개 사용할 경우 각각 id 속성을 지정하면 내비게이션마다 다른 스타일을 적용할 수 있다.
3. <main> 태그: 웹 문서에서 핵심이 되는 내용을 넣는다.
1) 웹 문서마다 다르게 보여 주는 내용으로 구성한다.
2) 웹 문서에서 한 번만 사용할 수 있다.
4. <article> 태그: 웹에서 실제로 보여주고 싶은 내용을 넣는다.
1) 블로그의 포스트나 뉴스 사이트의 기사처럼 독립된 웹 콘텐츠 항목을 말한다.
2) 여러 개 사용할 수 있고, 태그 안에 <section> 태그를 넣을 수도 있다.
5. <section> 태그: 웹 문서에서 콘텐츠 영역을 나타낸다.
1) <section> 태그는 몇 개의 콘텐츠를 묶는 용도로 사용하고, <article> 태그는 블로그의 포스트처럼 독립된 콘텐츠로 사용한다.
6. <aside> 태그: 사이드 바를 만든다.
7. <footer> 태그: 웹 문서의 맨 아래쪽에 있는 푸터 영역을 만든다.
1) 다른 시맨틱 태그를 모두 사용할 수 있다.
8. <div> 태그: id나 class 속성을 사용해서 문서 구조를 만들거나 스타일을 적용할 때 사용한다.
→ 영역을 구별하거나 스타일로 문서를 꾸밀 때 사용한다고 보면 된다.
'Web Front > HTML + CSS + 자바스크립트' 카테고리의 다른 글
| [HTML] 입력 양식 작성하기 (1) (0) | 2022.07.17 |
|---|---|
| [HTML] 웹 문서에 다양한 내용 입력하기 (2) (1) | 2022.07.16 |
| [HTML] 웹 문서에 다양한 내용 입력하기 (1) (0) | 2022.07.15 |
| 웹 개발 시작하기 (0) | 2022.07.14 |
| HTML + CSS + 자바스크립트 출처 (0) | 2022.07.13 |
댓글