[HTML] 3. HTML 기본 문서 만들기
3. HTML 기본 문서 만들기
웹 개발 알아보기
HTML이란?
- 태그: 웹 브라우저가 어느 부분이 제목, 텍스트, 표 등인지 구별할 수 있도록 붙이는 꼬리표
- HTML은 웹 브라우저에 보여 줄 내용에 마크업하고 문서끼리 링크하는 역할까지. 이후에 꾸미거나 배치를 다양하게 하는 등의 역할은 CSS가 함.
HTML 구조 파악하기
HTML 파일 살펴보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML 기본 문서</title>
</head>
<body>
<h1>프런트엔드 웹 개발</h1>
<hr>
<p>HTML</p>
<p>CSS</p>
<p>자바스크립트</p>
</body>
</html>
뒙 문서는 보통 < !DOCTYPE html >로 시작하여 < html >, < head >, < body >의 세 영역으로 구성된다.
-
< !DOCTYPE html >: 현재 문서가 HTML5 언어로 작성할 웹 문서라는 뜻 (문서유형을 알려줌)
-
< html > ~ < /html >: 웹 문서의 시작과 끝을 나타내는 태그. < /html > 태그 뒤에는 아무 내용도 없어야 함.
- lang 속성: 문서에서 사용할 언어 지정. html 태그에서 지정하는 이유는 검색 사이트에서 특정 언어로 제한해 검색할 때 필요하기 때문.
-
< head > ~ < /head >: 웹 브라우저가 웹 문서를 해석하는 데 필요한 정보를 입력하는 태그. 대부분 웹 브라우저에서 보이지는 않음. 또한 문서에서 사용할 스타일 시트 파일도 이곳에서 연결함.
-
< meta > 태그: 문자 세트를 비롯해 문서 정보가 들어있는 태그. 주요 내용으로 charset 이라는 속성을 이용하여 인코딩을 지정한다. 그 외에도 다음과 같이 < meta > 태그를 다양하게 사용할 수 있다.
```html
-
< title > 태그: 웹 문서의 제목을 지정. 이 때의 제목은 웹 브라우저의 제목 표시줄에 표시되는 제목임.
-
-
< body > ~ < /body >: 실제로 웹 브라우저 화면에 나타나는 내용을 입력하는 태그.
프런트엔드 웹 개발
HTML
CSS
자바스크립트
</body> </html>
웹 문서 구조를 만드는 시맨틱 태그
시맨틱 태그 알아보기
HTML의 태그는 그 이름만 봐도 의미를 알 수 있어 시맨틱 태그라고 한다.
ex) < p >: 텍스트 단락(paragraph), < a >: 앵커(anchor)
- 웹 사이트의 구조(body 태그 안의 내용만 표시)
(...생략...)
<div id="container">
# 1. 헤더 영역
<header>
# 1-1. 네비게이션 영역
<nav>
</nav>
</header>
# 2. 본문 영역
<main class="contents">
<section id="headling">
<h2>몸과 마음이 치유되는 섬</h2>
</section>
</main>
# 3. 푸터 영역
<footer>
<section id="bottomMenu">
</section>
</footer>
</div>
(...생략...)
웹 문서 구조를 만드는 주요 시맨틱 태그
- 헤더 영역을 나타내는 < header > 태그
- 헤더는 사이트 전체의 헤더도 있지만 특정 영역의 헤더도 있음
- 사이트에서 헤더는 주로 맨 위쪽이나 왼쪽에 존재하며, 검색 창이나 사이트 메뉴를 삽입함.
- 내비게이션 영역을 나타내는 < nav > 태그
- 같은 웹 문서 내에서 다른 위치로 연결하거나 다른 웹 문서로 연결하는 링크를 만듦
- 헤더나 푸터, 사이트 바 안에서 또는 독립적으로 사용할 수 있음
- 여러 개의 내비게이션 바를 사용할 경우 각각 id 속성을 지정하면 각각 다른 스타일을 적용할 수 있음
-
예시. 로고와 내비게이션이 있는 헤더
<header> <div id="logo"> <a href="index-footer.html"> <h1>Dream Jeju</h1> </a> </div> <nav> <ul id="topMenu"> <li><a href="#">단체 여행</a></li> <li><a href="#">맞춤 여행</a></li> <li><a href="#">갤러리</a></li> <li><a href="#">문의하기</a></li> </ul> </nav> </header>
- 핵심 콘텐츠를 담는 < main > 태그
- 메뉴, 사이드 바, 로그처럼 페이지마다 똑같이 들어간 정보가 아닌, 웹 문서마다 다르게 보여주는 내용으로 구성.
- < main > 태그는 웹 문서에서 한 번만 사용 가능
- 독립적인 콘텐츠를 담는 < article > 태그
- 웹에서 실제로 보여주고 싶은 내용을 넣음
- ex) 블로그의 포스트, 뉴스 사이트의 기사
- 문서 안에는 여러 개의 < article > 태그를 사용할 수 있으며, 이 안에는 < section > 태그를 넣을 수도 있음
- 웹에서 실제로 보여주고 싶은 내용을 넣음
- 콘텐츠 영역을 나타내는 < section > 태그
- 몇 개의 콘텐츠를 묶는 용도로 사용
-
예시. 섹션 2개로 구성한 본문
```html
몸과 마음이 치유되는 섬
...다양한 액티비티가 기다리는 섬
...
- 사이드 바 영역을 나타내는 < aside > 태그
- 본문 외에 왼쪽이나 오른쪽, 혹은 아래쪽에 사이드 바를 만듦
- 푸터 영역을 나타내는 < footer > 태그
- 사이트 제작 정보, 저작권 정보, 연락처 등의 내용을 포함하는 푸터 영역을 만듦
-
예시. 메뉴가 들어가 있는 푸터
```html
- 여러 소스를 묶는 < div > 태그
- HTML의 < header >, < section > 같은 시맨틱 태그가 나오기 전에는 헤더나 내비게이션, 푸터 등을 구별할 때 < div > 태그를 사용했으며, 아직까지도 많이 사용한다.
- < div id=”header”>, < div class=”detail”> 처럼 id나 class 속성을 사용해서 문서 구조를 만들거나 스타일을 적용할 때 사용.
정리
| 태그 | 설명 |
|---|---|
| < !DOCTYPE html > | 문서 유형이 html이라는 것을 알려줌 |
| < html > | 웹 문서의 시작과 끝을 나타냄 |
| < head > | 웹 문서를 해석하는 데 필요한 정보를 입력 문서에서 사용할 스타일 시트도 이 곳에서 연결 |
| < meta > | charset, name&content 속성을 이용해 문서 정보 등을 지정하는 태그 |
| < title > | 웹 브라우저의 제목 표시줄에 표시될 제목을 지정 |
| < body > | 실제로 웹 브라우저의 화면에 나타나는 내용을 입력하는 태그 |
| < header > | 특정 영역에 헤더를 삽입 주로 검색창이나 사이트 메뉴를 삽입함 |
| < nav > | 어떤 영역에 내비게이션 바를 삽입 같은 웹 문서 내의 다른 위치로 연결하거나 다른 웹 문서로 연결 |
| < main > | 웹 문서의 핵심 콘텐츠를 담는 태그. 웹 문서에서 한 번만 사용 가능 |
| < article > | 독립적인 콘텐츠로, 웹에서 실제로 보여주고 싶은 내용을 담음 ex) 블로그의 포스트, 뉴스 사이트의 기사 등 |
| < section > | 몇 개의 콘텐츠를 묶는 용도로 사용하며 콘텐츠 영역을 나타냄 |
| < aside > | 본문 외에 왼쪽이나 오른쪽, 혹은 아래쪽에 사이드 바를 만듦 |
| < footer > | 사이트 제작 정보, 저작권 정보, 연락처 등의 내용을 포함하는 푸터 영역을 만듦 |
| < div > | id나 class 속성을 이용하여 문서 구조를 만들거나 스타일을 적용 |
Leave a comment