이번 포스팅에서는 웹 개발의 기초인 HTML의 소개에 대해 알아보겠습니다. HTML은 웹 페이지를 구성하는 기본적인 언어로, 웹 개발의 첫걸음이라고 할 수 있습니다. 이번 포스트에서는 HTML의 정의와 역할, 역사, 그리고 문서 구조에 대해 자세히 설명드리겠습니다.
1.HTML의 정의 및 역할
HTML(하이퍼텍스트 마크업 언어)은 웹 페이지의 구조를 정의하는 마크업 언어입니다. HTML은 웹 페이지의 내용을 작성하고, 이를 브라우저가 해석하여 사용자에게 보여줄 수 있도록 합니다. HTML은 텍스트, 이미지, 비디오, 오디오 등 다양한 멀티미디어 콘텐츠를 포함할 수 있으며, 서로 다른 요소들을 연결할 수 있는 하이퍼링크 기능을 제공합니다.
2.HTML의 주요 역할
-문서 구조화: 웹 페이지의 제목, 문단, 리스트, 테이블 등을 정의하여 콘텐츠의 구조를 명확히 합니다.
-하이퍼링크 생성: 다른 웹 페이지나 리소스에 연결할 수 있는 링크를 생성합니다.
-멀티미디어 포함: 이미지, 비디오, 오디오 등의 다양한 미디어 콘텐츠를 삽입할 수 있습니다.
3.HTML의 역사
HTML은 1991년 팀 버너스 리(Tim Berners-Lee)에 의해 처음 개발되었습니다. 그는 웹 페이지를 만들기 위해 HTML을 고안하였고, 이를 통해 정보 공유 플랫폼인 월드 와이드 웹(WWW)을 구축하게 됩니다. 이후 HTML은 지속적으로 발전하여 여러 버전이 출시되었습니다.
-HTML 1.0: 1993년, 최초의 HTML 버전으로, 기본적인 마크업 기능을 제공했습니다.
-HTML 2.0: 1995년, 표준화된 HTML로, 폼과 같은 추가적인 기능이 포함되었습니다.
-HTML 4.0: 1997년, 멀티미디어 지원과 시맨틱 태그가 추가되었습니다.
-HTML5: 2014년, 현재의 HTML 표준으로, 오디오, 비디오 태그와 같은 새로운 기능 및 API를 도입하였습니다.
4.HTML 문서 구조 이해
HTML 문서는 특정한 구조를 따릅니다. 기본적인 HTML 문서는 다음과 같은 요소들로 구성됩니다.
4.1 도큐먼트 타입 선언 (DOCTYPE)
HTML 문서의 첫 번째 줄은 문서의 유형을 정의하는 <!DOCTYPE html> 선언입니다. 이는 브라우저에게 현재의 문서가 HTML5 형식임을 알려줍니다.
4.2 <html> 태그
<html> 태그는 HTML 문서의 시작과 끝을 나타내며, 모든 HTML 요소는 이 태그 안에 포함되어야 합니다.
4.3 <head> 태그
<head> 태그는 문서의 메타데이터를 포함합니다. 여기에는 문서의 제목, 문자 인코딩, 스타일 시트 링크, 스크립트 등이 포함됩니다.
4.4 <body> 태그
<body> 태그는 웹 페이지의 실제 콘텐츠를 포함합니다. 텍스트, 이미지, 비디오 등 사용자가 볼 수 있는 모든 요소가 이 태그 안에 위치합니다.
아래는 기본적인 HTML 문서의 예시입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 소개</title>
</head>
<body>
<h1>환영합니다!</h1>
<p>이 페이지는 HTML의 기초를 소개하는 예제입니다.</p>
<ul>
<li>HTML의 정의와 역할</li>
<li>HTML의 역사</li>
<li>HTML 문서 구조 이해</li>
</ul>
</body>
</html>
[코드 설명]
<!DOCTYPE html>: HTML5 문서임을 선언합니다.
<html lang="ko">: 문서의 언어를 설정합니다. 여기서는 한국어입니다.
<head>: 문서의 메타정보를 포함하며, 제목과 문자 인코딩을 설정합니다.
<body>: 웹 페이지의 내용이 포함되며, 제목과 단락, 리스트 요소가 있습니다.
5.마치며
이번 포스트에서는 HTML의 정의와 역할, 역사, 그리고 HTML 문서 구조에 대해 살펴보았습니다.
감사합니다!
'IT프로그램 언어 > HTML' 카테고리의 다른 글
| HTML(텍스트 및 제목 태그) (1) | 2025.03.15 |
|---|