뉴스 사이트, 소셜 미디어, 은행 시스템 등을 방문하면 사용자와 상호작용할 수 있는 여러 요소가 화면에 제공됩니다.
하지만 여러분은 이 모든 것이 어떻게 구축되었는지에 대해 생각해 보셨나요?
웹사이트를 구축하는 데 관여하는 전문가 중 한 명은 프론트엔드 개발자입니다. 그들은 UX/UI 디자인 팀이 figma를 사용해 만든 레이아웃을 코드로 변환합니다.
기술적으로, 웹사이트는 다양한 기술을 사용하여 구축되며, 이 중 하나가 HTML입니다.
이 글에서는 HTML이 무엇이며 어떻게 사용되는지 알아보겠습니다.
HTML이란 무엇인가요?
웹사이트를 개발하는 데 사용되는 기술이기 때문에 HTML을 프로그래밍한다고 생각하기 쉽습니다. 중요한 점은 HTML이 프로그래밍 언어가 아니라 마크업 언어라는 것입니다.
프로그래밍 언어는 알고리즘을 작성하고 변수 및 데이터 구조를 조작하는 데 사용됩니다. HTML은 영어로 HyperText Markup Language의 약자로, 웹 페이지의 내용을 구조화하고 서식을 지정합니다.
이 기술을 사용하여 프로젝트를 개발하려면 "html" 형식의 파일이 필요합니다. 그럼 웹 브라우저에서 이 파일을 열어 코드를 해석하여 화면에 요소를 표시할 수 있습니다.
HTML 파일의 구조
HTML 파일의 구조는 트리로 이해할 수 있습니다.
우리는 뿌리 요소인 <html>을 가지고 있고, 이것을 기반으로 새로운 요소(가지와 같은 것)를 선언할 수 있습니다. 이들은 자식 요소로 해석될 수 있으며 따라서 부모 요소를 만드는 것도 가능합니다. 또한, 같은 뿌리에서 유래한 요소들은 형제라고 불릴 수 있습니다.
HTML 요소의 해부학
HTML 요소의 구조는 시작 태그로 이루어져 있습니다. 시작 태그는 꺽쇠 괄호로 둘러싸여 있습니다.
예를 들어, 단락 태그인 <p>는 보여질 내용 다음에 이어진 후, 동일한 이름의 닫는 태그로 닫힙니다. 닫는 태그는 열린 태그와 동일하지만 요소 이름 앞에 슬래시가 붙습니다.
결과는 다음과 같습니다:
예시:
<p> 나의 강아지 이름은 Retovem입니다. </p>
HTML로 무엇을 만들 수 있나요?
HTML을 사용하면 원하는 주제로 웹 페이지를 만들 수 있어요! 블로그, 가상 상점, 뉴스 페이지 등 다양한 요소를 만들 수 있답니다.
우리가 만들 수 있는 주요 요소 몇 가지를 살펴보면:
- 제목과 단락
- 링크와 버튼
- 이미지
- 목록과 표
- 폼
- 비디오와 오디오
이 마크업 언어는 많은 기능을 제공해요. 여기서 언급된 것 외에도 다양한 기능이 있어요. 이것들은 프로젝트의 필요에 맞게 활용할 수 있는데요.
HTML의 발전
팀 버너스-리는 CERN(CERN: 유럽 원자핵 연구 기구)에서 NeXTSTEP 개발 환경을 사용하여 HTML을 개발했습니다. 처음에는 연구 및 커뮤니케이션을 관리하기 위한 도구로 시작되었습니다.
인터넷의 발전과 함께 이 솔루션이 전 세계적인 주목을 받았습니다. 초기 버전들은 유연했고, 이는 이 분야의 초보자들을 돕았습니다.
시간이 지남에 따라 구조가 더 엄격해지고 있지만, 오늘날에도 브라우저들은 과거의 방식으로 만들어진 웹 페이지를 역호환성을 통해 해석할 수 있습니다.
90년대에 명세가 정의되었습니다. 그 후 HTML이 발전을 시작했고, 1995년에 HTML 2.0 버전이 발표되었습니다.
1997년 말에 HTML 3.5 버전이 출시되었고, 이것과 함께 W3C의 작업 그룹이 2000년에 XHTML 개발에 초점을 맞추기 시작했습니다. 그리고 마침내 2014년에 HTML이 출시되었는데, 현재까지 사용되고 있습니다.
우리는 오늘날 사용하는 HTML 버전에 이르기까지 여러 버전의 HTML이 출시되었다는 것을 알았는데요, HTML과 HTML5의 차이는 무엇일까요?
HTML과 HTML5의 차이
이전 버전에서 콘텐츠 구조화는 주로 일반적인 요소로 이루어졌어요.