HTML(Hypertext Markup Language, 하이퍼텍스트 마크업 언어)은 웹 페이지를 만들기 위한 언어이다.
마크업 언어란 보통 태그를 이용하여 문서나 데이터 등의 구조를 명기하는 언어이다.
HTML은 요소(Element) 단위로 구성되며, 요소는 3가지로 이루어 진다.
- 여는 태그(Opening tag)
- 닫는 태그(Closing tag)
- 내용(Content)
Nesting
요소는 다른 요소 안에 중첩(Nesting)될 수 있으며, 포함될 요소의 전체를 다른 요소의 내용에 넣어야 한다.
Empty
모든 요소가 내용을 가지지는 않으며, 내용이 필수적이지 않는 요소도 있다.
이 때는 닫는 태그가 필수는 아니다.
<img src="image.png" alt="image"></img>
<img src="image.png" alt="image">HTML 문서 구조
Line 1: 문서 형식을 html로 선언
Line 2 ~ 12 : html 문서와 사용 할 언어를 선언
Line 3 ~ 8: html 문서에 표시되지는 않지만 문서에 대한 정보를 담고 있는 head 태그
Line 4: html 문서의 문자 인코딩 방식 명시
Line 5: 프래그마 지시문 정의(HTTP 헤더 값)
(pragma는 컴파일러에 전처리 방법을 알려주는 명령어이다?)
Line 6: 웹 콘텐츠를 볼 수 있는 창의 영역 지정
Line 7: 브라우저의 탭에 표시되는 html 문서의 제목
Line 9 ~ 11 : 문서의 콘텐츠를 담기 위한 body 태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>기본적인 html 태그 사용
제목
<h1> ~ <h6> 태그 사용.
숫자가 높을 수록 하위 수준이며, 글자 크기가 작음
h1 태그는 페이지당 한 개만 사용
예시:
h1 제목
h2 제목
h3 제목
h4 제목
단락
<p> 태그 사용.
일반적인 텍스트 콘텐츠 작성시 사용
예시:
이 글은 단락입니다.
목록
정렬되지 않은 목록(unordered lists): <ul> 태그 사용
정렬된 목록(ordered lists): <ol> 태그 사용
목록안의 요소는 공통적으로 <li> 요소 사용
예시:
- 첫 번째 항목
- 두 번째 항목
- 세 번째 항목
- 네 번째 항목
- 첫 번째 항목
- 두 번째 항목
- 세 번째 항목
- 네 번째 항목
링크
다른 웹 페이지 또는 현재 웹페이지의 위치를 지정하여 이동
예시:
naver로 가는 링크최상단으로 가는 링크
'HTML' 카테고리의 다른 글
| 웹이 동작하는 과정 (0) | 2022.06.29 |
|---|---|
| JavaScript 정의와 타입 (0) | 2022.06.29 |
| 웹사이트 파일 구조와 이름 (0) | 2022.06.28 |
| 웹사이트 구상하기 (0) | 2022.06.28 |
| 프로토타입의 충실도 lo-fi와 hi-fi (0) | 2022.06.28 |