1. HTML 정의
- HTML : Hypertext Markup Language
웹 페이지의 구조를 설명하는 프로그래밍 언어의 한 종류로
웹 브라우저에서 웹 페이지를 볼 수 있도록 웹 페이지의 구조를 설명한다.
(웹 페이지의 정보를 알려준다.)
인터넷에서 웹을 통해 접근되는 대부분의 웹 페이지들은 HTML로 작성된다.
2. HTML 특징
① 구조가 단순하고 문법이 쉽다.
다른 프로그래밍 언어에 비해 단순한 구조를 가지고 논리적이고 연산적인 요소가 없다.
② 컴파일 되지 않은 텍스트 문서이기 때문에 편집이 쉽다.
텍스트 문서를 기계 언어로 바꾸는 컴파일 작업이 필요없다.
실행되는 프로그램에 따라 웹 문서, 텍스트 문서가 되기 때문에
문서를 편집하여 수정된 문서를 즉시 적용이 가능하다.
③ 마크업 언어
마크업(Markup) : 형태나 효과를 정의하는 명령을 마크로 삽입하여 이루어지는 언어
마크 삽입만으로 형식을 정의하므로 파일 용량이 매우 작아진다.
(이미지 등의 파일을 문서에 직접 포함하지 않고 외부에서 불러올 수 있도록 함)
마크업 언어의 'link' 로 여러 장의 문서를 하나의 파일에 포함하지 않고 분리하여 링크시킬 수 있다.
④ 플랫폼에 독립적인 언어
HTML 문서는 어떤 운영체제에서도 웹브라우저만 있으면 표시할 수 있다.
웹브라우저는 HTML 표준에 기준을 두고 제작된다.
3. HTML 태그 (element)
HTML 은 다양한 구성 요소(element) 로 이루어지는데, 각각의 요소는 태그(tag) 로 표현된다.
웹 브라우저는 HTML 태그를 보고 페이지의 컨텐츠를 렌더링한다.
태그는 대소문자를 구분하지 않는다. (하지만 HTML 표준은 소문자로 사용한다.)
태그의 형태
<태그이름 속성 = "속성값"> 태그에 적용받은 요소(문자, 문단, 이미지 등) </태그이름>
ex)
<p> 여기는 단락입니다. </p>
HTML 태그는 쌍으로 존재하며, <시작태그> . . . </닫는태그> 로 구성된다.
예외) </닫는태그> 가 없는 태그 : 단일 태그 (empty element)
<br>, <meta> 와 같이 시작태그와 닫는태그 사이에 적용할 대상 없이 사용되는 태그가 있다.
<br /> 으로 닫는 태그를 포함하여 표현할 수도 있다.
태그는 속성(attribute) 와 함께 사용되어 태그에 여러 기능을 추가할 수 있다.
모든 태그마다 태그에서 사용할 수 있는 속성이 다르다.
- 속성을 적용하는 순서는 없다. (순서에 상관 없다.)
- 속성 값을 정의하는 " " 큰 따옴표는 작은 따옴표 ' ' 로 사용이 가능하다.
ex) 속성값으로 " " 큰 따옴표가 들어가야하는 경우, 작은 따옴표를 사용하게 된다.
<p title = 'Kephi "Hello World"! '> 텍스트 내용 </p>
태그의 중첩
태그는 중첩이 가능하다. ( 태그 속의 태그 )
html 문서도 역시 태그들의 중첩으로 이루어져 있다. <html> <head>~</head> . . . </html>
ex) 리스트 태그 <li>
4. HTML 문서의 구조
<!DOCTYPE html>
<html lang = "ko">
<head>
<title> 사이트 제목 </title>
<meta charset = "utf-8">
</head>
<body>
본문 영역
</body>
</html>
<!DOCTYPE html>
브라우저에게 문서 유형을 알려주는 선언으로
페이지 상단 (html 태그 이전)에 한 번만 표시한다.
또한 대소문자를 구분하지 않으므로 <!doctype html>도 가능하지만, HTML 5 표준은 대문자이다.
<html> ~ </html>
html 문서의 정보와 내용의 시작과 끝을 알린다.
<html lang = "ko"> : lang 라는 속성을 이용해서 문서에서 사용할 언어를 지정할 수 있다.
ko(한국어), de(독일어), en(영어). fr(프랑스어), ja(일본어), zh(중국어)
검색 사이트에서 정확하게 검색을 유도하기 위해 사용된다.
<head> ~ <head>
웹 브라우저 화면에는 보이지 않지만, 웹 브라우저가 알아두어야 할 정보들이 입력된다.
<title> ~ <title> : 웹 브라우저에 표시될 사이트 제목이 들어간다.
<meta> : 문자 인코딩 및 문서 키워드, 요약 정보 등이 들어간다.
<meta charset = "utf-8"> : 문자 인코딩을 utf-8 로 지정한다.
<body > ~ </body>
실제 웹 브라우저 화면에 표시되는 내용을 입력한다.
'WEB > HTML' 카테고리의 다른 글
| 6. HTML - 하이퍼 링크 태그 <a> (anchor) (0) | 2020.05.29 |
|---|---|
| 5. HTML - 자주 쓰는 기본 태그 <h>, <p>, <br>, <pre>, <hr> (0) | 2020.05.29 |
| 4. HTML - style 속성 (0) | 2020.05.29 |
| 3. HTML - 특수 문자 표시를 위한 특수 기호 사용하기 (0) | 2020.05.28 |
| 2. HTML - 주석 comment 추가하기 (0) | 2020.05.28 |