티스토리 뷰
웹 개발을 시작하려면 어떤 언어부터 시작해야 할까요? 아직 방향성을 찾지 못하는 초보 입문자들을 위해 간단하게 알려드리고 싶어 HTML에 대한 포스팅을 하고자 합니다. 웹 개발을 시작하는 입문자에게는 HTML(Hyper Text Markup Language) 언어를 알아야 하는 것이 웹 개발의 가장 첫 단계라고 할 수 있을 만큼 매우 필수적인 언어라고 생각합니다. 저 또한 4년 전에 웹 개발을 시작하면서 가장 먼저 배웠던 언어는 HTML이었으며, 기본적으로 우리가 인터넷을 사용하면 반드시 이용하는 웹 페이지에서 개발자 모드('F12')를 살펴보면 어떤 HTML 구조로 구성되었는지 알 수 있습니다. 이번 포스팅에서는 웹 개발의 대표적인 언어 HTML의 역사와 이해, 다양한 태그들을 알아보도록 하겠습니다.
1. HTML의 역사
HTML은 1989년에 팀 버너스리(Tim Berners-Lee)에 의하여 개발 되었습니다. 팀 버너스리는 물리학자로서 본인의 연구자들과 문서를 공유하기 위한 시스템을 제안 및 개발하였고 이것이 최초의 인터넷 기반의 하이퍼텍스트 시스템이라고 합니다. 이때의 최초 HTML은 단순한 텍스트 문서를 연결할 수 있었지만 이미지나 동영상 같은 요소들은 사용할 수 없었습니다. 하지만 1993년 이후로 이미지 지원이 가능하게 되며 점점 테이블 표 형식 등 멀티미디어 요소들을 사용할 수 있게 되었습니다. 1997년에는 HTML3.2가 개발되며 프레임, 스타일시트, 폼 요소들이 추가가 되어 더 다양한 콘텐츠를 만들 수 있게 되었습니다. 그 이후로 1, 2년 간격으로 HTML 4.0이 발표되면서 스크립트와 동적 요소가 지원이 되어 웹 표준의 중요성을 강조하면서 사용자가 이용하는 데 있어 더 편리하도록 웹 페이지를 개발할 수 있게 되었습니다. 2008년에는 드디어 우리가 현재 사용하고 있는 HTML 5가 개발이 되면서 오디오, 비디오, 그래픽 등 웹 애플리케이션 기능 사용이 가능하게 되었으며 최종적으로 2014년에 공식적으로 표준으로 제정되었습니다. 현재까지 HTML은 웹 개발의 핵심 언어로 널리 사용되고 있으며 계속해서 발전되고 웹 개발자들에게 웹 브라우저를 구축하는 데 매우 필수적인 언어 중 하나라고 할 수 있습니다.
2. HTML에 대한 기본 이해
HTML(Hyper Text Markup Language)은 웹 브라우저가 이해할 수 있도록 콘텐츠를 표시하기 위해 웹 페이지를 기술하기 위한 언어입니다. HTML은 이름에서 알 수 있듯이 마크업(Markup) 언어의 한 종류입니다. 마크업 언어는 우리가 작성하고자 하는 텍스트의 양 끝 단에 태그 형식을 붙여서 문서 정보를 정확하게 전달하여 텍스트가 문서의 어느 구성에 해당하는지를 기술하는 언어입니다. 태그는 꺽쇠 괄호 ('< >')로 작성되고 있으며, 주로 여는 태그('<tag>')와 닫는 태그('</tag>')의 형태로 사용되고 있습니다. 여는 태그는 해당 요소를 시작하는 역할을 하고 닫는 태그는 그 반대로 해당 요소를 끝내는 역할을 합니다. 간단한 태그 예시를 통해 HTML에 구성되어 있는 태그를 살펴보겠습니다.
- <!DOCTYPE html> - 이 태그 선언은 페이지가 HTML5로 작성되었음을 선언하여 웹 브라우저에게 알려줍니다.
- <html>...</html> - 모든 HTML 코드들은 이 태그 안에 들어가며, 문서의 루트 요소 역할을 합니다.
- <head>...</head> - 페이지의 메타 정보와 제목, 스타일 시트, 스크립트 등 외부 리소스를 포함할 수 있습니다.
- <body>...</body> - 웹 페이지에서 사용자에게 표시되는 모든 콘텐츠는 이 본문 태그 안에 들어가게 됩니다.
앞서 알려드린 4가지 예시는 웹 페이지의 가장 기본적이며 필수적인 태그 구조라고 할 수 있습니다. HTML은 이 외에도 다양한 요소들로 텍스트, 이미지, 표, 목록 등도 웹 페이지에 표시할 수 있습니다. 예를 들어 <p> 태그는 우리가 작성하는 문장으로 단락을 만들고, <a> 태그는 하이퍼링크를 생성할 수 있는 역할이 있습니다. 이렇게 HTML에는 다양한 태그들로 구성될 수 있으며 그렇기 때문에 사용자가 원하는 대로 다양한 페이지를 만들 수 있습니다. 이어서 많이 사용되는 태그들을 알아보도록 하겠습니다.
3. HTML 의 다양한 기본 태그
이제 HTML의 기본적인 구조를 이해하였으니 웹 페이지에 콘텐츠를 추가하기 위한 다양하고 기본적인 태그들을 살펴보겠습니다. 가장 많이 사용되고 있는 대표적인 태그 10가지를 소개해드리겠습니다.
- <h1>, <h2>, <h3>, ..., <h6> - 제목을 정의하는 태그이며 h1이 가장 크기가 크며 중요한 제목을 나타내고 h6으로 갈수록 작은 제목을 나타냅니다.
- <p> - 짧은 글 내용 단락을 정의하는 태그이며 문장 단락 역할을 합니다. 자동으로 단락의 전후에 빈 줄을 추가합니다.
- <a> - 하이퍼 링크를 생성하는 태그이며 다른 웹 페이지 또는 리소스로 연결할 수 있습니다.
- <img> - 이미지 파일의 경로를 지정하여 이미지를 웹 페이지에 추가하는 태그입니다.
- <ul> - 순서 없는 목록을 생성하는 리스트 태그이며 리스트의 항목은 <li> 태그로 나열시킬 수 있습니다.
- <ol> - <ul>과는 반대로 순서 있는 목록을 생성하는 태그이며 이 태그 또한 <li> 태그로 나열시킬 수 있습니다.
- <li> - 목록 요소 하나하나를 정의하는 태그입니다.
- <table> - 표를 생성할 수 있는 태그로서 표의 구조를 정의하고 <tr>로 행을 생성, <th>로 표의 헤더 행을 생성, <td>로 표의 셀 한 칸을 생성할 수 있는 하위 태그들로 구성되었습니다.
- <br> - 줄 바꿈 태그로 일정 간격을 콘텐츠 사이에 구분 할 수 있습니다.
- <hr> - 가로 줄을 생성하여 콘텐츠 사이를 구분할 수 있습니다.
이렇게 태그들을 사용하여 완성된 HTML의 요소들을 CSS와 Javascript를 함께 사용하여 디자인도 함께 적용시켜 준다면 사용자가 원하는 웹 페이지를 만들 수 있습니다.
이번 포스팅에서는 초보 입문자들을 위한 HTML에 대해 역사와 이해 그리고 다양하게 사용되는 태그들을 알아보게 되었으며 HTML은 메모장을 이용한 환경, 개인 웹 서버 Apache를 이용한 환경 등에서 개발할 수 있습니다. 내가 원하는 웹 페이지를 구축하기 위해 필요한 각 태그별 자세한 내용은 앞으로의 포스팅으로 설명과 함께 알려드리겠습니다.