1.HTML(HyperText Markup Language)
- Web의 가장 기본이 되는 언어로 " Hyper Text Markup Language" 의 줄인말이다.
- 웹페이지를 기술하기 위한 마크업 언어
- 웹페이지의 내용(content)과 구조(structure)을 담당하는 언어로써 HTML 태그를 통해 정보를
구조화 하는것
- HTML은 태그로 이루어진 언어이며 태그는
<(Less Tan Sign)으로 시작하여><(Grater Ten Sign)>으르 끝나는 구조를 가지고 있다.
2. <!DOCTYPE html>
- HTML5 문서는 반드시 <!DOCTYPE html> 으로 시작하여 문서형식(document type)을 HTML5로
지정한다.
| HTML5 | <!DOCTYPE html> |
| HTML4 | <!DOCTYPE HTML PUBLIC "_W3C//DTD HTML 4.01//EN" http://www.w3.org/TR/html4/static.dtd> |
HTML4까지의 문서 타입은 복잡하고 길이가 길었으니 HTML5가 등장하며 간편하게 바뀌었다.
3. <html> </html>
- 실제적인 HTML document는 2행부터 시작되는데 <html>과 </html> 사이에 기술한다.
4. <head> </head>
- <head>와 </head> 사이에는 document title, 외부참조 파일 참조, 메타데이터의 설정 등이 위치하며
이정보들은 브라우저에 표시도지 않는다.
5. <body> </body>
- 웹브라우저에 출력되는 모든 요소는 <body>와 </body>사이에 위치한다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Hello!</title>
</head>
<body>
<h1>Hello World</h1>
<p>안녕하세요~</p>
</body>
</html>
|
cs |
HTML document는 .html 확장자를 갖는 순수한 텍스트 파일이다.
편집을 하기 위해서는 다양한 편의 기능을 제공하는 editor또는 IDE(Integrated Development Enviroment)를 사용하는 것이 일반적이다. 대표적인 editor or IDE는 다음과 같다
- Visual Studio Code
- WebStorm
- Atom
- Brakets
- Sublime text
1. HTML 기본문법
1.1.요소(Element)
- HTML 요소는 시작 태그(start tag)와 종료 태그(end tag) 그리고 태그 사이에 위치한 content로 구성된다.
| <p> Hello </p> |
<p> 시작태그 </p> 종료태그 Hello 콘텐츠 |
HTML document는 요소(Element)들의 집합으로 이루어진다.
태그는 대소문자를 구별하지 않으니 W3C(World Wide Web Consortium)에서는 소문자를 추천하고 있으니 HTML5에서도 소문자를 사용하는 것이 일반적이다.
1.1.1 요소의 중첩(Nested Element)
- 요소는 중첩될 수 있다. 즉, 요소는 다른 요소를 포함할 수 있다. 이때 부자관계가 성립된다. 이러한 부자관계로
정보를 구조화하는 것이다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8">
</head>
<body>
<h1>안녕하세요</h1>
<p>반갑습니다!</p>
</body>
</html>
|
cs |
1.1.2 빈 요소(Empty Element)
- content를 가질수 없는 요소를 빈(Empty element or Self-Closing element)라 한다.
▶ br
▶hr
▶img
▶input
▶link
▶meta
1.2 어트리뷰트(Attribute)
- 어트리뷰트(Attribute 속성)이란 요소의 성질, 특징을 정의하는 명세이다. 요소는 어트리뷰트를 가질 수 있으며 어트리뷰트는 요소에 추가적 정보(예를 들어 이미지 파일의 경로, 크기 등)를 제공한다.
<img src = “html.png”>
src : 어트리뷰트명
html.png : 어트리뷰트값
1.2.1 글로벌 어트리뷰트(HTML Global Attribute)
- 모든 HTML요소가 공통으로 사용할 수 있는 어트리뷰트다.
|
Attribute |
Description |
|
id |
유일한 식별자(id)를 요소에 지정한다. 중복 지정이 불가능하다. |
|
class |
스타일시트에 정의된 class를 요소에 지정한다. 중복 지정이 가능하다. |
|
hidden |
css의 hidden과는 다르게 의미상으로도 브라우저에 노출되지 않게 된다. |
|
lang |
지정된 요소의 언어를 지정한다. 검색엔진의 크롤링 시 웹페이지의 언어를 인식할 수 있게 한다. |
|
style |
요소에 인라인 스타일을 지정한다. |
|
tabindex |
사용자가 키보드로 페이지를 내비게이션 시 이동 순서를 지정한다. |
|
title |
요소에 관한 제목을 지정한다. |
1.3 주석
- 주석(comment)는 주로 코드를 설명하기 위해 사용
<!--주석은 화면에 표시되지 않는다.-->
참고 사이트 : https://poiemaweb.com/html5-syntax
추가 수정 : 2020.06.05
'개발 > HTML' 카테고리의 다른 글
| [HTML] 목록 List /<ul> / <ol> / <il> (0) | 2020.05.20 |
|---|---|
| [HTML] Hyperlink 정리 (0) | 2020.05.20 |
| [HTML] Text 관련 Tag / 특수문자 (0) | 2020.05.20 |
| [HTML] 웹페이지를 구성하는 기본 tag (0) | 2020.05.20 |
| [HTML] 시멘틱 태그 (Semantic Web) 란??? / Semantic tag (0) | 2020.05.19 |
