웹 상식 정보

HTML, 무엇인가요?

  • 작성자 ㈜위링
  • 날짜 2024-07-18
  • 조회 462

본문

90ff7b361103ee7b69ed03677fdd8357_1721293528_9913.jpg
안녕하세요! 오늘은 HTML에 대해서 알아보겠습니다. HTML(하이퍼텍스트 마크업 언어)은 웹 페이지를 만드는 데 사용되는 기본적인 마크업 언어입니다. HTML은 웹 문서의 구조를 정의하고, 각 요소들이 어떻게 표시되고 동작해야 하는지를 브라우저에게 지시합니다.


HTML의 주요 특징

  1. 구조화: HTML은 각 요소들을 태그(tag)로 정의하여 문서의 구조를 계층적으로 표현합니다. 예를 들어, <html>, <head>, <body> 등의 태그를 사용하여 문서의 기본 구조를 만듭니다.

  2. 마크업: 각 요소에는 태그를 통해 정보의 의미와 구조를 부여합니다. 예를 들어, <p> 태그는 단락을 정의하고, <img> 태그는 이미지를 삽입하는 등의 역할을 합니다.

  3. 플랫폼 독립성: HTML은 모든 운영 체제와 브라우저에서 동일하게 작동합니다. 이는 웹의 보급성과 접근성을 높이는 데 기여하였습니다.

90ff7b361103ee7b69ed03677fdd8357_1721293614_0858.jpg
 

HTML은 하이퍼텍스트 마크업 언어(HyperText Markup Language)의 약자입니다. 여기서 각 글자의 의미를 다시 한 번 정리해보면 다음과 같습니다:

  • HyperText: 문서와 문서가 링크로 연결되어 있는 형태를 의미합니다. 웹 페이지에서 하이퍼링크를 통해 다른 페이지로 이동할 수 있습니다.

  • Text: 텍스트 기반으로 문서를 작성하고 표현하는 방식입니다. HTML에서는 텍스트 이외에도 이미지, 비디오 등의 다양한 멀티미디어 콘텐츠를 포함할 수 있습니다.

  • Markup: 문서의 구조를 정의하기 위해 태그로 이루어져 있습니다. 태그는 컨텐츠의 의미를 정의하고, 브라우저에게 어떻게 표시해야 하는지를 알려줍니다.

  • Language: HTML은 웹 페이지를 만들기 위한 언어로, 웹 브라우저에서 해석되어 사용자에게 표시됩니다.

HTML에서는 각 요소를 정의하기 위해 열리는 태그와 닫히는 태그가 짝을 이루는 경우가 대부분입니다. 
예를 들어, <p>이것은 단락입니다.</p>
여기서 <p>가 열리는 태그이고 </p>가 닫히는 태그입니다. 이렇게 하면 브라우저는 이 사이의 텍스트를 단락으로 인식하고 표시합니다.

90ff7b361103ee7b69ed03677fdd8357_1721293673_5539.jpg
 
HTML 파일의 기본 구조는 다음과 같습니다:
  1. <html> 태그: HTML 문서의 최상위 요소로, 모든 HTML 요소들을 감싸는 역할을 합니다. 보통 다음과 같이 구조화됩니다:

  2. <head> 태그: HTML 문서의 정보를 정의하는 부분입니다. 이 부분은 실제 페이지에 표시되지 않지만, 웹 브라우저에게 문서의 메타데이터를 제공합니다. 

  3. <body> 태그: HTML 문서의 실제 내용이 위치하는 부분입니다. 웹 브라우저에 의해 표시되는 모든 콘텐츠는 이 부분에 포함됩니다.

90ff7b361103ee7b69ed03677fdd8357_1721293818_8681.jpg

HTML은 여러 버전을 거쳐 발전해왔고, 각 버전마다 문법과 기능이 업데이트되었습니다. 이에 따라 DTD(Document Type Definition)라는 것을 사용하여 각 HTML 문서가 어떤 표준에 따라 작성되었는지를 명시합니다.

HTML의 주요 버전과 특징

  1. HTML 3.2: 초기 웹 페이지 표준으로서, 많은 웹 사이트가 이 버전을 기반으로 만들어졌습니다.

  2. HTML 4.01: HTML 3.2의 발전된 버전으로, 스타일 시트(stylesheet)와 폼(form) 요소 등이 추가되었습니다.

  3. XHTML 1.0: HTML을 XML 기반으로 재정의한 버전으로, 엄격한 문법과 XML의 장점을 활용하려는 시도였습니다.

  4. HTML5: 최신 표준으로, 멀티미디어 콘텐츠의 지원, 오프라인 애플리케이션, 그래픽, 폼 컨트롤 등 다양한 기능이 추가되었습니다. 또한, 간결한 문법과 더욱 직관적인 요소들을 제공하여 개발자들이 더 쉽고 효율적으로 웹 페이지를 구축할 수 있도록 했습니다.

DTD(Document Type Definition)

DTD는 HTML 문서가 어떤 버전의 HTML 또는 XHTML에 따라 작성되었는지를 정의합니다. 

HTML5의 간결함과 직관성

HTML5는 이전 버전들에 비해 문법이 간단하며, 특히 JavaScript와 CSS 등의 기술과의 통합이 잘 이루어져 있습니다. 또한, 새로운 멀티미디어 요소와 그래픽 기능을 지원하여 보다 동적이고 풍부한 웹 애플리케이션을 구축할 수 있습니다. 이러한 특성 덕분에 HTML5 문서만으로도 강력한 웹 페이지를 만들 수 있습니다.


90ff7b361103ee7b69ed03677fdd8357_1721293886_439.jpg