본문 바로가기
IT

웹 페이지를 만들 때 사용되는 마크업 언어 HTML

by 동골여행자 2023. 9. 20.

웹 페이지를 만들 때 사용되는 마크업 언어 HTML(HyperText Markup Language)

HTML은 HyperText Markup Language의 약자로, 웹 페이지를 구성하는 데 사용되는 마크업 언어입니다. HTML은 웹 페이지의 구조와 콘텐츠를 정의하기 위해 사용됩니다. 웹 브라우저는 HTML 문서를 해석하여 시각적으로 보여지는 웹 페이지로 렌더링합니다. HTML을 사용하여 텍스트, 이미지, 링크, 테이블 등 다양한 요소들을 추가하고 조합하여 웹 페이지를 작성할 수 있습니다. 이렇게 작성된 HTML 문서는 태그(Tag)라 불리는 요소들로 구성되며, 각 태그는 열림(<tag>)과 닫힘(</tag>)으로 이루어진 형식을 가지고 있습니다. 태그들은 요소에 대한 의미와 스타일을 정의하며, 웹 페이지 내에서 계층 구조를 형성합니다. HTML은 웹 개발에서 기본적인 언어로 사용되며, CSS(Cascading Style Sheets)와 JavaScript와 함께 조합하여 동적이고 멋진 웹 페이지를 만들 수 있습니다.

HTML의 구성 요소는 다음과 같습니다.

태그:

HTML 문서의 기본 구성 요소는 태그입니다. 태그는 < 와 > 로 둘러싸인 요소의 이름이며, 시작 태그와 종료 태그로 구성됩니다. 예를 들어, <p>는 단락을 시작하는 태그이고 </p>는 단락을 종료하는 태그입니다.

요소:

요소는 태그와 콘텐츠로 구성됩니다. 요소의 내용은 일반적으로 텍스트 또는 다른 요소가 될 수 있습니다. 예를 들어, <p> 이것은 단락입니다. </p> 에서, <p> 는 요소의 개시를 나타내, 「이것은 단락입니다」는 요소의 내용입니다.

속성:

태그에 속성을 추가할 수 있습니다. 속성은 일반적으로 이름-값 쌍으로 구성된 요소에 대한 추가 정보를 제공합니다. 예를 들어, <img src="image.jpg" alt="image"> 에서 src 와 alt 는 속성이며, 각각 이미지의 소스 경로와 대체 텍스트를 정의합니다.

구조 계층 구조(문서 구조):

HTML 문서에는 계층 구조가 있습니다. 일반적으로 <html>, <head>, <title>, <meta>, <body> 등의 요소가 포함됩니다. <html>은 문서의 시작과 끝을 나타내고, <head>는 문서의 메타 정보와 스타일시트를 정의하며, <body>는 실제 콘텐츠를 포함합니다.

하이퍼링크:

<a> 태그를 사용하여 다른 웹 페이지에 연결할 수 있습니다. <a> 태그는 href 속성을 사용하여 링크 대상을 지정합니다.

이미지:

<img> 태그를 사용하여 웹 페이지에 이미지를 삽입할 수 있습니다. src 속성을 사용하여 이미지 파일의 경로를 지정합니다.

목록:

순서없는 목록에서는 <ul> 태그가 사용되고 순서가 지정된 목록에서는 <ol> 태그가 사용됩니다. 각 목록 항목은 <li> 태그로 정의됩니다.

양식:

<form> 태그를 사용하면 사용자 입력을 받고 입력 필드(텍스트 상자, 라디오 버튼, 확인란 등)를 추가할 수 있습니다.

테이블:

<table>, <tr>, <td> 등의 태그를 사용하여 테이블을 만들 수 있습니다.

HTML은 웹 페이지의 구조를 정의하는 데 사용되며 CSS(Cascade Style Sheet) 및 JavaScript와 함께 사용하여 웹 페이지의 디자인과 상호 작용을 향상시킬 수 있습니다. HTML 문서는 일반적으로 .html 확장명이 있는 텍스트 파일로 저장되며 웹 브라우저를 통해 열고 볼 수 있습니다.



HTML의 역사


HTML은 World Wide Web의 시작과 함께 등장한 마크업 언어입니다. HTML의 역사는 웹의 역사와 밀접하게 관련되어 있습니다.

1990년:

HTML은 CERN (유럽 원자핵 연구기구) Tim Berners-Lee와 Robert Cailliau가 개발 한 프로젝트의 일환으로 탄생했습니다. HTML의 첫 번째 버전은 간단한 텍스트 기반 마크업을 사용하여 웹 페이지의 구조를 정의했습니다.

1993년:

Marc Andreessen과 Eric Bina가 Mosaic 웹 브라우저를 개발하면 웹 페이지에 그래픽과 이미지를 표시하는 데 사용할 수 있는 태그와 확장 기능이 추가된 HTML 버전이 탄생했습니다. 그 후 Mark Andreessen과 그의 팀은 Netscape Communications Corporation을 설립하고 Netscape Navigator 웹 브라우저를 개발하여 HTML을 확장했습니다.

1994년:

HTML 2.0이 공식적으로 제정되어 표준화 프로세스가 시작되었습니다. 이 버전에서는 이미지, 링크, 양식 등의 요소가 정의됩니다.

1995년:

Microsoft는 Internet Explorer 웹 브라우저를 출시하여 HTML을 확장했으며 브라우저와 표준간에 경쟁이 시작되었습니다.

1996년:

HTML 3.2의 출현으로 표준화가 어느 정도 안정되었습니다. 이 버전에서는 표준 웹 디자인 요소와 기능을 제공했습니다.

1997년:

HTML 4.0의 출현으로 스타일시트와 스크립트 통합과 같은 더 많은 기능이 도입되었습니다.

2000년:

XHTML (eXtensible HyperText Markup Language) 1.0의 출현으로 XML 기반 엄격한 구문이 도입되었습니다. 이것은 향후 웹 표준을 준비하는 데 중요한 역할을 수행해 왔습니다.

2004년:

웹 표준화 단체인 World Wide Web Consortium(W3C)은 HTML 4.01을 XHTML 1.0으로 대체하기로 결정했습니다.

2008년:

W3C는 기존 HTML 표준을 최신화하고 새로운 멀티미디어 요소를 도입하는 HTML5 초안을 출시했습니다.

2014년:

HTML5는 공식 표준으로 확립되었으며 이후 웹 개발의 주요 표준이되었습니다.

HTML의 역사는 웹의 발전과 함께 계속 진화하고 있으며 현재 HTML5가 웹 개발의 핵심 기술로 사용되고 있습니다. 최신 브라우저는 HTML5와 관련된 많은 기능을 지원하며 웹 개발자는 이를 활용하여 동적 멀티미디어 풍부한 웹 응용 프로그램을 개발할 수 있습니다.



HTML의 특징


HTML(HyperText Markup Language)은 웹 페이지를 만드는 데 사용되는 마크업 언어이며 다양한 기능을 제공합니다. 이러한 특성은 웹 페이지의 구조와 콘텐츠를 정의하며 웹 브라우저가 문서를 해석하고 사용자에게 시각적으로 표시하는 데 중요합니다.

마크업 언어:

HTML은 텍스트를 마크업(태그 및 속성을 사용하여 표시)하여 웹 페이지의 구조와 의미를 정의합니다. 이렇게 하면 브라우저가 콘텐츠를 적절한 방식으로 볼 수 있습니다.

계층 구조:

HTML 문서는 계층 구조를 가지며, 부모-자식 관계에는 다른 요소가 포함될 수 있습니다. 이러한 구조는 웹 페이지의 레이아웃과 디자인을 정의하는 데 중요합니다.

텍스트 및 멀티미디어:

HTML은 텍스트, 이미지, 비디오, 오디오 등 다양한 미디어 유형을 지원합니다. <img>, <video>, <audio> 등의 요소를 사용하여 웹 페이지에 멀티미디어를 포함할 수 있습니다.

하이퍼링크:

HTML에는 하이퍼링크를 만드는 기능이 있습니다. <a> 태그를 사용하면 다른 웹 페이지에 링크하거나 내부 문서를 스크롤할 수 있습니다.

양식 요소와 입력 요소:

HTML은 사용자로부터 데이터를 수집하는 양식을 만드는 데 사용됩니다. <form> 태그와 다양한 입력 요소(텍스트 상자, 라디오 버튼, 확인란 등)를 제공하여 사용자 상호작용을 지원합니다.

표 및 목록:

HTML은 테이블과 목록을 만드는 데 사용되는 요소를 제공합니다. <table>, <ul>, <ol>, <li>, <tr>, <th>, <td> 등의 태그를 사용하여 데이터를 구조화할 수 있습니다.

메타데이터:

HTML 문서에는 메타데이터를 포함할 수 있습니다. <head> 요소 내에서 페이지 제목, 문자 인코딩, 스타일시트 링크, 검색 엔진 최적화(SEO) 정보 등을 정의할 수 있습니다.

웹 표준:

HTML은 W3C(World Wide Web Consortium) 및 WHATWG(Web Hypertext Application Technology Working Group)와 같은 웹 표준 기관에서 관리하며 웹 표준을 따릅니다. 이는 웹 일관성과 액세스성을 유지하는 데 중요합니다.

내게 필요한 옵션:

HTML은 웹 페이지를 액세스할 수 있도록 하는 데 큰 역할을 합니다. 명확한 문서 구조와 대체 텍스트를 제공하면 시각, 청각 및 운동 장애가 있는 사용자가 웹 콘텐츠에 더 쉽게 액세스할 수 있습니다.

동적 웹 페이지:

HTML은 JavaScript와 함께 사용되며 동적 웹 페이지를 작성합니다. 이를 통해 사용자 상호 작용, 실시간 업데이트, 웹 응용 프로그램 개발 등 다양한 기능을 사용할 수 있습니다.

HTML은 웹 개발의 핵심 요소이며 웹 페이지를 구축하는 데 필수적인 언어입니다. 웹의 다양한 기능과 종류의 콘텐츠를 처리할 수 있는 강력한 도구로 계속 진화하고 있습니다.