HTML

인터넷을 통해 웹 사이트 또는 앱에 접속하면 가장 먼저 마주하게 되는 것은 화려한 버튼, 다채로운 이미지, 각종 텍스트 정보 등이 적절하게 배열된 웹 사이트나 웹 서비스의 화면입니다. 이런 화면을 통해 사용자는 정보를 얻고, 서비스를 이용하며, 다양한 행동을 취할 수 있습니다. 이렇게 사용자와 직접적으로 상호작용하는 부분을 프론트엔드(Frontend)라고 합니다. 프론트엔드 더 알아보기

이런 프론트엔드를 구성하는 뼈대를 이루는 기술 중 하나가 바로 HTML(HyperText Markup Language)입니다. 이는 우리가 웹 브라우저를 통해 웹 사이트를 방문했을 때 보이는 모든 텍스트, 이미지, 버튼 등의 요소를 정의하고 배치하는 역할을 합니다.

HTML은 웹의 초창기부터 사용되어 온 기술로, 웹 페이지의 구조를 정의하는 마크업 언어입니다. HTML 문서는 태그라는 특별한 표시를 사용하여 웹 페이지의 다양한 요소들, 예를 들어 제목, 문단, 링크, 이미지 등을 정의합니다.

개요

HTML은 웹 페이지를 만들기 위한 표준 마크업 언어입니다. 이 언어는 웹 페이지의 구조를 정의하고, 각 요소의 의미와 역할을 지정합니다. HTML은 웹 브라우저에게 문서를 어떻게 표시해야 하는지 알려주는 중요한 역할을 합니다.

HTML은 웹 페이지를 구성하고 정보를 전달하는 데 필수적인 요소입니다. 모든 웹 페이지는 HTML로 작성되며, 이를 통해 사용자는 웹을 통해 정보를 검색하고 공유할 수 있습니다.

역사

HTML은 1990년대 초에 팀 버너스리(Tim Berners-Lee)에 의해 개발되었습니다. 초기 버전은 단순한 텍스트 기반으로 웹 페이지의 구조를 정의했습니다. 그 후 꾸준한 발전을 거쳐 현재의 표준화된 형태로 발전하게 되었습니다.

1989년: 팀 버너스리 (Tim Berners-Lee)가 CERN에서 제안
1993년: HTML 1.0 버전 발표
1995년: HTML 2.0 버전 발표, 이미지, 테이블 등의 기능 추가
1997년: HTML 3.2 버전 발표, 자바스크립트 지원
1999년: HTML 4.0 버전 발표, 스타일시트 (CSS) 분리
2004년: XHTML 1.0 버전 발표, XML 기반의 엄격한 문법 도입
2008년: HTML 4.01 버전 발표, XHTML 1.1 버전 발표
2014년: HTML 5.0 버전 발표, 새로운 의미론적 태그, 멀티미디어 기능 강화
2017년: HTML 5.1 버전 발표, 미디어 캡처, 웹 컴포넌트 등의 기능 추가
2019년: HTML 5.2 버전 발표, 접근성 개선, 새로운 API 추가
현재: HTML 5.3 버전 개발 중

HTML의 구조

HTML 문서는 일련의 요소(Element)들로 구성됩니다. 각 요소는 태그(Tag)로 표시되며, 태그는 해당 요소의 종류와 의미를 나타냅니다. 예를 들어 <p> 태그는 단락을 정의하고, <img> 태그는 이미지를 삽입합니다.

HTML 태그

HTML 태그는 웹 페이지의 콘텐츠를 구성하고 서식을 지정하는 데 사용되는 코드입니다. 태그는 꺾쇠괄호(< >)로 둘러싸이며, 시작 태그와 끝 태그로 구성됩니다. 시작 태그는 속성을 포함할 수 있으며, 끝 태그는 슬래시(/)를 포함합니다.

HTML 문서 구조

HTML 문서는 다음과 같은 기본적인 구조를 따릅니다.

DOCTYPE 선언: HTML 문서임을 명시하고 사용되는 HTML 버전을 지정합니다.
html 태그: HTML 문서의 시작과 끝을 표시합니다.
head 태그: 메타데이터 (문서 제목, 문자 인코딩 등)를 포함합니다.
body 태그: 웹 페이지의 실제 콘텐츠를 포함합니다.

주요 HTML 태그

텍스트 서식 태그: 텍스트의 서식을 지정하는 데 사용됩니다. 예를 들어 <h1>, <strong>, <em> 등이 있습니다.
구조적 태그: 문서의 구조를 나타내는 데 사용됩니다. 예를 들어 <p>, <div>, <ul>, <ol> 등이 있습니다.
링크 태그: 다른 페이지로 이동할 수 있는 하이퍼링크를 생성하는 데 사용됩니다. <a> 태그가 이에 해당합니다.
이미지 태그: 이미지를 삽입하는 데 사용됩니다. <img> 태그가 이에 해당합니다.
멀티미디어 태그: 오디오나 비디오 등의 멀티미디어 콘텐츠를 삽입하는 데 사용됩니다. <video>, <audio> 태그가 이에 해당합니다.
폼 태그: 사용자로부터 정보를 입력받는 폼을 생성하는 데 사용됩니다. <form>, <input>, <button> 등이 있습니다.
테이블 태그: 표를 생성하는 데 사용됩니다. <table>, <tr>, <td> 등이 있습니다.
스크립트 태그: 자바스크립트 코드를 포함하는 데 사용됩니다. <script> 태그가 이에 해당합니다.

HTML의 주요 기능

HTML은 웹 페이지의 구조를 정의하고, 하이퍼링크를 제공하며, 멀티미디어를 삽입하고, 폼을 제어하는 데 사용되는 마크업 언어입니다. 이를 통해 사용자는 웹 페이지를 읽고 이해하고 상호 작용할 수 있습니다.

문서 구조 정의

HTML은 웹 페이지의 구조를 정의하여 텍스트, 이미지, 비디오 등을 적절히 배치합니다. 이를 통해 사용자는 웹 페이지를 읽고 이해할 수 있습니다. HTML 문서의 구조는 다음과 같은 주요 요소로 이루어집니다.

헤딩(Headings): <h1>부터 <h6>까지의 태그를 사용하여 제목의 수준을 나타냅니다. 이는 페이지의 구조를 분명히 합니다.
문단(Paragraphs): <p> 태그를 사용하여 텍스트를 문단 단위로 구분합니다. 이는 문서의 가독성을 높입니다.
목록(Lists): <ul>, <ol>, <li> 태그를 사용하여 순서 없는 목록과 순서 있는 목록을 생성합니다. 이를 통해 정보를 체계적으로 나열할 수 있습니다.
섹션(Sections): <section> 태그를 사용하여 문서를 섹션으로 나눌 수 있습니다. 이는 페이지의 구조를 더욱 명확하게 합니다.

하이퍼링크 제공

HTML은 <a> 태그를 사용하여 다른 웹 페이지로 이동할 수 있는 링크를 제공합니다. 이를 통해 사용자는 웹 페이지 간에 쉽게 이동할 수 있습니다. 하이퍼링크는 다음과 같은 특징을 가지고 있습니다.

목적지 지정: href 속성을 사용하여 링크의 목적지를 지정합니다.
텍스트나 이미지 링크: <a> 태그 내에 텍스트나 이미지를 포함하여 링크를 만들 수 있습니다.

멀티미디어 삽입

HTML은 이미지, 오디오, 비디오 등 다양한 멀티미디어 요소를 웹 페이지에 삽입할 수 있습니다. 이를 통해 페이지의 콘텐츠를 다양하게 표현할 수 있습니다. 멀티미디어 요소를 삽입하는 방법은 다음과 같습니다.

이미지 삽입: <img> 태그를 사용하여 이미지를 삽입합니다. src 속성을 사용하여 이미지 파일의 경로를 지정합니다.
오디오 삽입: <audio> 태그를 사용하여 오디오를 삽입합니다. src 속성을 사용하여 오디오 파일의 경로를 지정합니다.
비디오 삽입: <video> 태그를 사용하여 비디오를 삽입합니다. src 속성을 사용하여 비디오 파일의 경로를 지정합니다.

폼 제어

HTML은 사용자로부터 데이터를 수집하기 위한 폼 요소를 제공합니다. 이를 통해 사용자는 웹 페이지에 정보를 입력하고 전송할 수 있습니다. 폼 요소는 다음과 같은 기능을 제공합니다.

입력 필드: <input> 태그를 사용하여 텍스트 상자, 비밀번호 상자, 체크 박스 등 다양한 입력 필드를 생성할 수 있습니다.
버튼: <button> 태그를 사용하여 버튼을 생성할 수 있습니다. 이를 통해 사용자는 데이터를 제출하거나 작업을 실행할 수 있습니다.
선택 목록: <select>와 <option> 태그를 사용하여 사용자가 선택할 수 있는 목록을 생성할 수 있습니다.

HTML의 특징

HTML은 간편하고 표준화된 언어로, 확장성과 다양성을 갖추고 있어 웹 페이지를 쉽게 작성하고 관리할 수 있습니다. 이는 웹 개발의 기초를 이루는 핵심 기술이며, 다양한 플랫폼과 환경에서 효율적으로 사용됩니다.

간편성: HTML은 비교적 배우기 쉽고 사용하기 간편한 언어로, 단순한 문법과 직관적인 구조를 가지고 있습니다. 이로 인해 초보자도 쉽게 웹 페이지를 작성할 수 있습니다. 또한 HTML 편집기와 같은 도구들이 널리 제공되어 사용자 편의성을 높입니다.
표준화: HTML은 W3C (World Wide Web Consortium)에서 표준화되어 있어 호환성이 높습니다. 이는 다양한 브라우저와 플랫폼에서 일관된 동작을 보장하며, 웹 페이지의 이식성과 안정성을 높여줍니다. 또한 표준화된 HTML은 검색 엔진 최적화(SEO)에도 도움을 줍니다.
확장성: HTML은 새로운 기능을 추가하기 쉽고 확장할 수 있는 특징을 가지고 있습니다. 새로운 요구사항이나 기술의 발전에 따라 HTML의 스펙이 지속적으로 개선되고 확장되어 왔습니다. 이는 웹 개발자들이 최신 기술을 적용하고 웹 페이지를 보다 풍부하게 만들 수 있도록 합니다.
다양성: HTML은 다양한 브라우저에서 지원되며, 크로스 플랫폼 호환성을 가지고 있습니다. 이는 사용자가 다양한 디바이스와 브라우저를 통해 웹 페이지를 접근하고 이용할 수 있도록 보장합니다. 또한 HTML5와 같은 최신 버전의 HTML은 멀티미디어 콘텐츠를 효과적으로 지원하여 다양한 경험을 제공합니다.

개요

역사