HTML 이란?
HyperText Markup Language는 프로그래밍 언어가 아니라, 웹 페이지가 어떻게 구조화되어 있는지 브라우저로 하여글 알 수 있도록 하는 마크업 언어.
HTML 문서의 기본 구조
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML</title>
</head>
<body>
<h1>HTML</h1>
<p>HTML의 기본 구조1</p>
<p>HTML의 기본 구조2</p>
<p>HTML의 기본 구조3</p>
</body>
</html>
HTML 요소의 구조
- 여는 태그 ( Opening tag ): 이것은 요소의 이름과 (사진에서 p), 열고 닫는 괄호로 구성된다. 요소가 시작에 위치하며, 여는태그 다음부터 효과가 적용
- 닫는 태그 ( Closing tag ): 이것은 요소의 이름 앞에 슬래시가 있는것을 제외하면 여는 태그와 같다. 이것은 요소의 끝에 위치
- 내용 ( Content ): 요소의 내용이며, 이 경우 단순한 텍스트이다.
- 요소 ( Element ): 여는 태그, 닫는 태그, 내용을 통틀어 요소라고 한다.
<!DOCTYPE HTML>태그
doctype는 HTML이 어떤 버전으로 작성되었는지 미리 선언하여, 웹 브라우저가 내용을 올바르게 표시할 수 있도록 해준다.
<html> 태그
HTML의 문서의 범위를 설정하는 태그
<head>태그
<head>태그는 문서의 머리를 나타내는 태그
브라우저에 직접 보이지 않으며, 숨은 데이터를 정의하는 태그들이 들어간다.
<title>: 웹 페이지의 제목을 나타내는 태그<meta>: 해당 문서에 대한 정보인 메타데이터를 정의할 떄 사용
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- 1. 검색 엔진을 위한 키워드를 정의 -->
<meta name="keyword" content="HTML, meta, tag, element, reference" />
<!-- 2. 웹 페이지에 대한 설명을 정의 -->
<meta name="description" content="HTML meta tag page" />
<!-- 3.문서의 저자를 정의-->
<meta name="author" content="TCPSchool" />
<!-- 4. 5초뒤 다른페이지로 리다이렉트-->
<meta http-equiv="refresh" content="5;url=http://www.tcpschool.com" />
<!-- 5. 모든 장치에서 웹 사이트가 잘 보이도록 뷰포트 설정 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link>: 외부 문서와 연결하는 태그<style>: 웹 문서의 디자인을 변경하기 위한 태그
<body> 태그
<body>태그는 문서의 몸통을 나타내는 태그
브라우저에 나타나는 태그들이 주로 들어간다.
<br>: br태그는 줄을 한칸 띄울 때 사용하는 태그<p>: 약간의 간격을 줘 문단을 나눠주는 태그<img>: 이미지 삽입 태그<strong>: 글자를 두껍게 강조하는 태그, 실제 페이지 내의 중요한 부분으로 브라우저에게 알려주는 역할, 웹 접근성에 큰 기여<b>: 글자를 굵게 표시하는 태그, bold의 약자, 단순한 텍스트 강조<i>: 글자를 기울임을 해주는 태그<h1>, <h2>: 제목, 소제목 등을 굵고 큰 문자로 나타내는 태그<a>: anchor로 링크를 통해 다른 문서에 연결한다<table>: 표를 만들 때 사용하는 태그
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<table>
<thead>
<tr>
<th>표의 맨 윗부분</th>
</tr>
</thead>
<tbody>
<tr>
<td>표의 데이터, 요소를 td로 묶어줘야함(thead는 th)</td>
</tr>
</tbody>
<tfoot>
<td>표의 맨 아래부분요소</td>
</tfoot>
</table>
<div>: 분할 태그, 웹 페이지의 내용을 구분 할 때 사용<span>: 웹 페이지의 영역을 설정할 때 사용하는 태그<ol>: 순서가 있는 리스트를 만들 때 사용하는 태그<ul>: 순서가 없는 리스트를 만들 때 사용하는 태그<li>: 리스트에 속하는 모든 요소들에 대한 태그
1
2
3
4
5
6
7
8
9
10
<ol>
<li>apple</li>
<li>orange</li>
<li>lemon</li>
</ol>
<ul>
<li>red</li>
<li>orange</li>
<li>yellow</li>
</ul>
<form>: 입력 양식 전체를 감싸는 태그
HTML semantic tag
sementic tag : 문서의 정보를 표현하기 위해 사용하는 의미를 갖는 태그들
<header>: 문서나 section의 헤더에 오는 태그<footer>: 문서의 정보를 담고있는 태그( 문서의 저자, copyright 정보 등 )<main>: 해당 페이지의 메인 내용. 한번만 사용<section>: 관련있는 주제끼리 grouping 해주는 태그<article>: 독립적으로 의미가 있는 컨텐츠 ( 블로그 포스트, 기사 )<nav>: 문서의 주요 link를 담는 태그<aside>: 문서의 content의 옆쪽에 위치하여 내용과 관계가 적은 태그<figure>: 이미지와 캡션을 묶어주는 태그
HTML 태그 내 속성
속성은 <태그 속성 ="값">의 형태로 사용하며, 태그마다 여러개의 속성을 부여할 수 있다.
- id: 원칙상 하나의 id당 하나의 태그에 적용
- class: 하나의 class를 여러개의 태그에 적용
id와 class를 통해 CSS나 JavaScript에서 태그를 쉽게 사용할 수 있다.
- style: css의 속성들을 html 문서 내에서 태그에 직접 설정할 때 사용되는 속성
- lang: 요소의 언어를 지정
- data-*: 사용자 정의 데이터 속성을 지정, Javascript에서 이용할 수 있는 데이터를 저장하는 용도로 사용
- draggable: 요소가 Drag and Drop API를 사용여부를 지정
- hidden: 요소를 숨김
XHTML
HTML과 동등한 표현 능력을 지닌 XML 마크업 언어로, HTML보다 엄격한 문법을 가진다.
script태그와 stylesheet 태그
script 자바스크립트 파일을 가장 아래에 놓아야 하는 이유는 파일을 다운로드해서 실행하기 전까지 브라우저가 DOM 파싱도 중지하고 아무것도 랜더링 하지 않기 때문이다. 이미 서버통신을 완료하고 필요한 구성요소를 모드 가져왔음에도 자바스크립트를 수행하느라 렌더링이 멈추게 되므로 가장 아래에 두어야 한다.
async : 브라우저가
<script async />를 만났을 때 다운로드를 시작하고, html 파싱을 막지않는다. 그러나 다운로드가 완료되면 즉시 실행하고 실행하는동안 브라우저는 HTML 파싱을 멈춘다. 순차적 실행이 보장되지 않고 다운로드 완료되는 시점에 실행된다. defer : 브라우저가<script defer />을 만났을 때 다운로드를 시작하지만, html 파싱을 막지않고 </html> 을 만났을 때 실행된다. 순차적 실행이 보장된다.stylesheet 브라우저 렌더링 단계에 따르면 사용자에게 화면을 보여 주기 전에 렌더 트리를 생성해야 하는데, 이때 스타일시트 파일이 필요하다. 따라서 스타일 시트를 최대한 빨리 다운로드해야한다. 따라사 head 태그에 스타일 시트 파일을 두어 빠르게 다운로드 받아야 한다