IT 강좌 HTML 기초 009_Hello HTML
HTML이란 무엇인가?
네트워크, 또는 더 구체적으로 말하면 월드 와이드 웹(World Wide Web)은 서로 연결된 많은 문서와 리소스로 구성되어 있습니다. 이러한 문서와 리소스는 HTML로 작성되며, 웹 페이지라고 불립니다. HTML은 웹 페이지의 기초로서, 웹 페이지의 구조와 내용을 정의합니다.
브라우저에 URL(예: www.zhaojian.net)을 입력하면, 브라우저는 해당 웹 페이지를 제공하는 서버에 요청을 보냅니다. 서버는 이 요청에 응답하여 요청된 웹 페이지(즉, 일부 HTML)를 브라우저로 다시 보냅니다. 그런 다음 브라우저는 이러한 HTML을 구문 분석하여 일반적으로 보는 웹 페이지로 표시합니다.
HTML(HyperText Markup Language, 하이퍼텍스트 마크업 언어)은 웹 페이지의 구조를 생성하고 설계하는 데 사용되는 마크업 언어입니다. HTML은 일련의 요소(element)로 구성되며, 이러한 요소는 콘텐츠의 다른 부분을 감싸서 특정 방식으로 나타나거나 작동하도록 할 수 있습니다. 태그(tag) 쌍은 텍스트나 이미지에 하이퍼링크를 추가하거나, 텍스트를 이탤릭체, 볼드체, 단락, 목록 등으로 설정할 수 있습니다.
[!요약]
- HTML은 프로그래밍 언어가 아니라 마크업 언어입니다
- HTML 문서는 HTML 태그와 텍스트(왜 이미지는 없나요) 내용을 포함합니다
- HTML 문서는 web 페이지, 웹 페이지라고도 합니다
완전한 HTML 요소(element)
예시:
<p>hello HTML!</p>효과:
구조 분석:
[!요약]
- 완전한 HTML 요소는 시작 태그, 내용, 종료 태그의 세 부분으로 구성됩니다
- 시작 태그(Opening tag): 요소의 이름(이 예제에서는 p)을 포함하며, 왼쪽과 오른쪽 꺾쇠 괄호로 둘러싸여 있습니다. 시작 태그는 요소가 시작하거나 효과가 시작되는 위치를 표시합니다
- 내용(Content): 요소의 내용입니다
- 종료 태그(Closing tag): 시작 태그와 유사하지만, 요소 이름 앞에 슬래시가 포함됩니다. 이는 해당 요소의 끝을 표시합니다. 종료 태그를 포함하지 않는 것은 초보자가 흔히 저지르는 실수이며, 이상한 결과를 초래할 수 있습니다
완전한 HTML 페이지
예시:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>hello HTML</title></head><body> <p>hello HTML!</p></body></html>효과:
구조 분석:
[!요약]
<!DOCTYPE html>— HTML 문서 타입 선언, 문서 타입은 역사적 이유로 남아있으며, 브라우저에 해당 문서의 버전과 타입을 알려주는 데 사용됩니다. HTML4 엄격 모드 DOCTYPE 선언:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html></html>—html요소, HTML 페이지의 모든 내용을 포함하며, 때때로 루트 요소라고 불립니다.<head></head>—head요소, 그 내용은 사용자에게 보이지 않으며, 검색 엔진을 위한 검색 키워드(keyword), 페이지 설명, CSS 스타일, JavaScript 파일 및 문자 인코딩 선언 등을 포함합니다.<meta charset="utf-8">—meta요소, HTML 문서에 대한 메타데이터를 제공하는 데 사용됩니다. charset 속성은 문서의 문자 집합을 UTF-8로 설정합니다.<title></title>—title요소. 이 요소는 페이지의 제목을 설정하며, 브라우저 탭에 표시되고 즐겨찾기에 추가할 때 설명 텍스트로도 사용됩니다.<body></body>—body요소. 이 요소는 사용자가 페이지를 방문할 때 보기를 원하는 콘텐츠를 포함하며, 텍스트, 이미지, 비디오, 게임, 재생 가능한 오디오 트랙 또는 기타 콘텐츠를 포함합니다.<p></p>— 단락 요소, 텍스트의 단락을 나타냅니다.
요소 이름 | 역할 | 예시 |
|---|---|---|
<!DOCTYPE html> | HTML 문서의 타입과 버전을 정의 | <!DOCTYPE html> |
<html> | HTML 문서의 루트 요소를 정의 | <html lang="en"> |
<head> | 제목, 문자 집합 선언, 스타일 및 스크립트 링크 등의 문서 메타 정보를 포함 | <head>...</head> |
<title> | 문서의 제목을 정의하며, 브라우저의 제목 표시줄이나 탭에 표시됨 | <title>My Web Page</title> |
<meta> | 문자 집합, 뷰포트 설정, 키워드 등의 문서에 대한 메타 정보를 제공 | <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
<link> | 스타일시트 및 아이콘과 같은 외부 리소스를 참조 | <link rel="stylesheet" href="styles.css"> <link rel="icon" href="favicon.ico" type="image/x-icon"> |
<style> | 문서의 스타일을 내부적으로 정의 | <style>body { font-family: Arial, sans-serif; }</style> |
<script> | 스크립트를 정의하거나 참조하며, 문서에 포함되거나 외부 스크립트를 참조할 수 있음 | <script src="script.js"></script> |
<noscript> | 브라우저가 스크립트를 지원하지 않을 때 표시되는 내용을 정의 | <noscript>Sorry, your browser does not support JavaScript.</noscript> |
<base> | 페이지의 모든 상대 링크에 대한 기본 URL을 지정 | <base href="https://www.zhaojian.net/"> |
링크:
VS Code 플러그인: Remote - SSH Remote Development