우리는 다양한 웹 사이트 또는 웹을 통한 서비스를 사용하게 됩니다. 온라인 쇼핑, 뉴스 사이트, 소셜 네트워킹 서비스, 동영상 스트리밍 등 다양한 형태의 웹 서비스가 우리의 생활에 깊숙이 들어와 있습니다.
이런 웹 서비스를 이용할 때 우리가 가장 처음 보게 되는 영역을 프론트엔드라고 부릅니다. 프론트엔드(링크 업데이트 예정)는 사용자가 직접적으로 보고, 느끼고, 조작하는 웹 서비스의 사용자 인터페이스를 구성하는 영역입니다.
이 프론트엔드는 다양한 요소들로 구성되어 있습니다. 텍스트, 이미지, 동영상, 버튼, 링크 등 다양한 형태의 콘텐츠와 이들을 배치하고 디자인하는 레이아웃, 그리고 사용자의 조작에 반응하는 인터랙션 등이 그것입니다.
이 중에서 웹 페이지의 기본적인 구조와 콘텐츠를 담당하는 것이 HTML, 즉 HyperText Markup Language입니다. HTML은 웹 페이지의 본문을 구성하는 텍스트와, 이를 꾸며주는 이미지나 동영상 등의 멀티미디어 콘텐츠, 그리고 페이지 간의 연결을 만들어주는 링크 등을 정의하고 구조화하는 역할을 합니다.
개요
HTML은 HyperText Markup Language의 약자로, 웹 페이지를 작성하기 위한 표준 마크업 언어입니다. 이 언어를 사용하여 텍스트, 이미지, 링크 등 다양한 콘텐츠를 구조화하고 표현할 수 있습니다.
HTML의 역할
HTML은 웹 페이지의 구조를 정의하고, 각 요소들의 의미를 명시하는 역할을 합니다. 또한 웹 브라우저에게 어떻게 콘텐츠를 표시해야 하는지를 알려줍니다. 이는 웹 페이지가 일관된 형태로 사용자에게 제공되도록 도와줍니다.
HTML은 웹 페이지를 구성하고 표현하는 데 있어 필수적인 요소입니다. 모든 웹 개발자는 HTML에 대한 이해와 숙련이 필요하며, 이를 통해 웹 페이지를 더욱 효과적으로 구축할 수 있습니다. 웹 페이지의 구성 요소
HTML 문서 구조
HTML 문서 구조
HTML 문서는 다음과 같은 구조를 가집니다.
<!DOCTYPE html>
<html>
<head>
<title>This is a web page</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html><!DOCTYPE html>: 이 부분은 HTML5 문서 유형을 나타냅니다. 브라우저에게 이 문서가 HTML5로 작성되었음을 알려줍니다.<html>: HTML 문서의 루트 요소입니다. 모든 HTML 요소는 이 태그 안에 포함되어야 합니다.<head>: 문서의 메타데이터와 스타일 시트 링크, 제목 등을 포함합니다. 일반적으로 브라우저에 표시되지 않습니다.<title>: 문서의 제목을 정의합니다. 브라우저의 탭에 표시됩니다.<body>: 실제로 화면에 표시되는 콘텐츠를 포함합니다. 모든 가시적인 콘텐츠는 이 태그 안에 들어갑니다.
HTML의 주요 요소
HTML은 다양한 요소로 구성되며, 각 요소는 특정한 의미를 가집니다. 몇 가지 주요 요소는 다음과 같습니다. HTML 요소 더 알아보기
<h1>,<h2>, …,<h6>: 제목을 나타내는 요소로, 숫자가 클수록 제목의 수준이 낮아집니다.<p>: 문단을 나타내는 요소입니다. 텍스트를 문단 단위로 묶어줍니다.<a>: 하이퍼링크를 생성하는 요소로, 다른 웹 페이지나 문서로 이동할 수 있도록 합니다.href속성을 사용하여 링크의 대상을 지정합니다.<img>: 이미지를 삽입하는 요소입니다.src속성을 사용하여 이미지 파일의 경로를 지정합니다.<ul>,<ol>,<li>: 순서가 없는 목록과 순서가 있는 목록을 나타내는 요소입니다.
HTML의 주요 특성
HTML은 마크업, 구조화, 표현, 그리고 접근성이라는 네 가지 주요 특성을 가지고 있습니다. 이를 통해 콘텐츠의 의미를 나타내고 구조화하여 시각적으로 표현하며, 모든 사용자에게 쉽게 접근할 수 있는 웹 페이지를 제작할 수 있습니다.
- 마크업 (Markup): HTML은 마크업 언어로, 각 요소를 태그로 둘러싸서 해당 요소의 의미를 나타냅니다. 예를 들어,
<p>태그는 문단을 나타내고,<a>태그는 하이퍼링크를 생성합니다. - 구조화 (Structuring): HTML은 콘텐츠를 적절하게 구조화하여 의미 있는 정보를 전달하는 데에 중점을 둡니다. 제목, 문단, 목록 등의 요소를 사용하여 콘텐츠를 구성함으로써 사용자가 정보를 쉽게 이해할 수 있도록 합니다.
- 표현 (Presentation): CSS(Cascading Style Sheets)와 함께 사용하여 HTML 문서의 콘텐츠를 시각적으로 표현합니다. CSS를 사용하여 텍스트의 크기, 색상, 배치 등을 지정하여 웹 페이지의 디자인을 꾸밀 수 있습니다.
- 접근성 (Accessibility): HTML은 웹 페이지의 콘텐츠에 접근하기 쉽도록 구조화하고 마크업합니다.
- 적절한 태그 사용과 명확한 문서 구조는 스크린 리더 및 다양한 보조 기술을 통해 정보에 접근하는 데 도움이 됩니다.
HTML의 버전
HTML은 버전이 업데이트되면서 다양한 기능과 특성이 추가되었습니다. 최초의 HTML 2.0에서 기본적인 웹 페이지 구조를 제공하였고, HTML 3.2와 4.01에서는 웹 페이지의 다양한 요소와 디자인, 동작을 제어하는 기능이 추가되었습니다. XHTML 1.0에서는 엄격한 문법을 도입하였으나 널리 받아들여지지 않았고, 현재 널리 사용되는 HTML5에서는 웹에서 멀티미디어 콘텐츠를 쉽게 다룰 수 있게 하는 기능과 웹 앱 개발, 웹 접근성 향상을 위한 기능을 추가하였습니다.
HTML 2.0 (1995)
HTML 2.0은 최초의 공식 HTML 표준으로, 웹의 초창기에 사용되었습니다. HTML 2.0은 링크, 이미지, 폼 등의 기본적인 요소를 포함하고 있었고, 이는 초기 웹 페이지의 구조를 정의하는 데 사용되었습니다. 이 버전에서는 웹 페이지에 텍스트와 이미지를 추가하고, 사용자가 입력을 할 수 있는 간단한 폼을 만들 수 있었습니다.
HTML 3.2 (1997)
HTML 3.2는 HTML 2.0의 확장된 형태로, 표, 이미지 맵, 폼 컨트롤 등이 추가되었습니다. 또한 이 버전에서는 브라우저 간 호환성을 강화하기 위한 노력이 시작되었습니다. 이로 인해 웹 개발자들은 다양한 브라우저에서 동일하게 표시되는 웹 페이지를 만들 수 있게 되었습니다.
HTML 4.01 (1999)
HTML 4.01은 1999년에 발표된 버전으로, 웹 개발의 표준으로 자리잡았습니다. 이 버전에서는 프레임, 스크립트, 스타일시트 등의 기능을 지원하게 되었습니다. 또한 스타일 시트와 스크립트 요소가 도입되어 웹 페이지의 디자인과 동작을 보다 세밀하게 제어할 수 있게 되었습니다. 이 버전은 시멘틱 마크업을 강조하며, 새로운 요소와 특성이 추가되었습니다.
XHTML 1.0 (2000)
XHTML 1.0은 HTML 4.01의 다음 버전으로, XML 기반의 HTML입니다. 이 버전은 엄격한 문법을 가지고 있으며, 웹 문서를 보다 구조화하고 의미를 부여하기 위한 시도였습니다. XHTML 1.0은 웹 표준화를 추진하였으나, 개발자들 사이에서 널리 받아들여지지는 않았습니다.
HTML5 (2014)
2014년에 발표된 최신 버전으로, 멀티미디어 콘텐츠, 웹 앱 개발 등을 위한 다양한 기능을 추가했습니다.
- 새로운 멀티미디어 기능: 오디오, 비디오, 캔버스 등을 기본적으로 지원하여 멀티미디어 콘텐츠 제작을 용이하게 합니다.
- 웹 앱 개발 지원: 웹 앱 개발을 위한 API를 제공하여 웹 브라우저에서 동작하는 애플리케이션 개발을 가능하게 합니다.
- 향상된 접근성: 스크린 리더 등의 보조 기술을 사용하는 사용자도 웹 페이지를 쉽게 이용할 수 있도록 지원합니다.
- 오류 감소: 이전 버전에 비해 문법 검사를 간소화하여 오류 발생 가능성을 줄이고 개발 효율성을 높입니다.
HTML Living Standard
HTML Living Standard는 현재 웹 개발에 사용되는 HTML의 가장 최신 버전을 말합니다. 이 용어는 HTML5 이후의 버전이 공식적으로 번호를 매기지 않고 지속적으로 업데이트되는 형식을 채택하면서 사용되기 시작했습니다.
- HTML Living Standard는 웹 표준화를 담당하는 W3C(World Wide Web Consortium)와 WHATWG(Web Hypertext Application Technology Working Group)에 의해 관리되고 있습니다. 이 두 조직은 HTML의 표준화를 위해 공동으로 작업하다가 2004년에 분리되었는데, 이후 W3C는 HTML5를 마지막으로 표준 버전을 발표하고, WHATWG는 HTML Living Standard를 지속적으로 업데이트하는 방식을 채택하였습니다.
- HTML Living Standard는 웹 브라우저와 웹 기술이 빠르게 발전하고 변화하는 현실을 반영하기 위해 지속적으로 업데이트되고 있습니다. 이는 웹 개발자들이 최신 웹 기술을 사용하여 효율적이고 현대적인 웹 사이트와 애플리케이션을 구축할 수 있도록 지원합니다. 기능 추가, 버그 수정, 보안 강화 등 다양한 개선 사항이 지속적으로 반영되며, 이러한 변경 사항은 WHATWG의 웹사이트를 통해 실시간으로 확인할 수 있습니다.