여러분은 HTML이 무엇인지 알고 계시나요? 아마 개발과 관련된 산업에 종사하고 있지 않더라도, HTML은 익히 알고 계실 분들이 많을 겁니다. HTML은 웹페이지에 콘텐츠를 표시하기 위해, 전 세계에서 가장 폭넓게 사용되는 언어입니다. HTML의 기본적인 내용들로는 문서를 구조화하는 방법, 제목과 같은 텍스트 콘텐츠에 다양한 타입을 설정하는 방법, 목록으로 표시하기, 주석 추가하기, 양식과 표 생성하기 등이 다양한데요.
이번 시간 위시켓은 자주 쓰이지만, 더 자세하게 알아볼 필요가 있는 'HTML'에 대해 준비했습니다. HTML은 상당히 흥미로운 기능들이 많이 있고, 새로운 웹사이트와 앱을 만들 때도 핵심이 되는 개념이니, 재미있게 읽어주시기 바랍니다!
'HTML'이란?
(Hypertext Markup Language, 하이퍼텍스트 마크업 언어)하나의 HTML 파일 안에 포함되어 있는 콘텐츠가 어떤 식으로 구성되어 있는지를 설명하는 텍스트 기반의 접근법이라고 할 수 있습니다. 이러한 마크업에서는 하나의 웹 페이지에서 텍스트와 이미지, 그리고 다른 형태의 멀티미디어들을 어떻게 보여줘야 하는지를 웹브라우저에게 알려줍니다.
HTML은 월드 와이드 웹 컨소시엄(World Wide Web Consortium, W3C)이 공식적으로 권장하는 표준인데요. 데스크톱은 물론이고, 모바일 환경에서도 거의 모든 웹 브라우저들이 HTML을 준수하고 있습니다. 우리가 흔히 듣는 HTML5는 이러한 기술 상향의 최신 버전이죠.
'HTML'은 어떻게 동작할까?
HTML은 구체적인 문법이고, 관련된 파일 정보나 이름을 짓는 일반적인 규칙들에 의해서 텍스트 파일로 작성됩니다. 그러면 컴퓨터와 웹서버에서는 HTML 파일 안에 적혀있는 내용을 정해진 규칙에 의해서 읽어야 하죠. 이런 HTML의 규칙들은 사실상 거의 모든 텍스트 편집기에서 텍스트 파일로 생성이 가능하며, 사용자는 웹 페이지의 기본적인 내용과 디자인을 작성한 다음 인터넷에 업로드할 수 있습니다.
HTML의 가장 기초적인 규칙은 텍스트 파일의 맨 처음에 HTML 문서의 타입을 선언하는 부분을 포함시켜야 한다는 것인데요. 그 이유는, 이 문서가 HTML 파일이라는 사실을 컴퓨터에게 확실히 알려줄 수 있는 부분이기 때문입니다. HTML 문서의 헤더(header) 부분은 보통 <!DOCTYPE html> 이런 식으로 되어 있습니다. 이 선언보다 앞에 앞에 있는 모든 내용들은, 컴퓨터가 HTML로 인식하지 않습니다.
문서 타입은 HTML에서만 사용되는 것은 아닙니다. SGML(Standard Generalized Markup Language, 표준 문서 마크업 언어)을 사용하는 모든 문서를 만들 때도 적용할 수 있습니다. SGML은 마크업 언어의 사용에 대해서 구체적으로 설명하기 위한 표준인데요. HTML은 문서의 타입을 선언하는 방식과 SGML 표준이 적용된 여러 개의 마크업 언어들 가운데 하나라고 보시면 됩니다.
HTML 파일을 생성하는 데 있어서 또 한 가지 중요한 내용으로는, 파일이 ",html'이라는 확장자로 저장되어야 한다는 것입니다. 이 파일이 HTML 파일이라는 사실을 내부에서 컴퓨터에게 알려주는 것이 문서 타입의 선언이라면, 외부에서 알려주는 것은 바로 확장자입니다. 이렇게 두 가지의 조건을 갖추게 되면, 컴퓨터는 해당 파일을 실제로 읽지 않더라도 HTML 파일이라는 것을 알 수 있습니다. 이것은 파일을 인터넷에 업로드할 때, 특히나 중요한데요. 그 이유는 웹서버에서 클라이언트 컴퓨터로 파일을 전송하기 전, 어떤 일을 해야 하는지 알아야 하기 때문입니다.
문서 타입을 적고, HTML 형식에 맞게 파일을 저장하고 나면, 사용자는 HTML의 다른 모든 문법 테크닉을 활용해서 웹 페이지를 수정할 수 있습니다. 이런 일련의 작업들이 일단 완료되면, 웹사이트의 다양한 페이지들에 해당하는 여러 개의 HTML 파일들이 생겨나는데요. 이러한 파일들은 그것을 작성해서 저장한 환경과 똑같은 파일 구조로 업로드하는 것이 중요합니다. 각각의 페이지들은 서로 간에 링크를 활성화하고, 다른 페이지에 있는 특정한 파일 경로를 참조하기 때문이죠. 파일 구조를 다르게 업로드하면, 특정한 파일 경로가 페이지에 적혀있는 내용과 다르기 때문에, 링크가 깨지거나 페이지를 찾을 수 없게 됩니다.
HTML을 구성하는 기본적인 요소들 알아보기!
HTML을 사용하면, 문서의 내용은 물론이고, 그 문서가 어떻게 표시되어야 하는지에 대한 내용까지 추가됩니다. 이러한 마크업(표기 규정)과 문서 자체의 콘텐츠를 구분하기 위해서, HTML에서는 특별한 문법이 사용되는데요. 이러한 특별한 구성요소를 HTML 태그(tag)라고 부릅니다. 이러한 태그는 속성이라고 하는 이름(name)-값(value)의 쌍으로 구성되어 있으며, 하나의 태그로 둘러싸인 콘텐츠를 HTML 요소(element)라고 말합니다.
HTML 요소는 언제나 시작 태그(opening tag)와 종료 태그(closing tag) 그리고 그 사이의 콘텐츠로 이루어집니다. HTML 요소의 추가 정보는 속성을 통해서 지정될 수 있으며, 이러한 속성은 시작 태그 안에 포함됩니다. HTML 요소들은 다음과 같은 두 가지 방식 만들어질 수 있습니다.
블록 레벨(Block-level) 요소
: 문서 내의 새로운 줄에서 시작하며, 자신만의 공간을 차지합니다. 블록 레벨 요소의 예시로는 제목과 단락 태그가 있습니다.
인라인(Inline) 요소
: 문서 내의 새로운 줄에서 시작하지 않으며, 필요한 공간만 차지합니다. 인라인 요소는 일반적으로 블록 레벨 요소 안에 있는 콘텐츠 포맷을 지정하는데 사용됩니다. 인라인 요소의 예시로는 하이퍼링크와 텍스트의 포맷 태그가 있습니다.
HTML의 장점과 단점은?
▷ 장점
- 수많은 리소스와 함께 광범위하게 이용되고 있습니다.
- 기본적으로 모든 브라우저에서 실행됩니다.
- 비교적 배우기가 쉽습니다.
- 깔끔하면서도 일관된 소스코드를 가지고 있습니다.
- 오픈소스(open source)이며, 무료로 이용할 수 있습니다.
- PHP와 같은 다른 백엔드(back-end) 프로그래밍 언어와 함께 사용될 수 있습니다.
▷단점
- 동적인 기능은 잘 지원하지 않기 때문에, 주로 정적인(static) 웹 페이지에 사용됩니다.
- 비슷한 요소들을 사용하는 개체들이라고 하더라도 모두 별개로 구분되어 생성되어야만 합니다.
- 브라우저의 반응을 예측할 수 없는 경우도 있습니다. 예를 들어, 오래된 브라우저들에서는 새로운 기능들이 호환되지 않을 수도 있습니다.
HTML의 사용법 및 구현하는 방법
HTML은 완전히 텍스트 기반이기 때문에, HTML 파일은 메모장이나 브이아이(VI) 편집기, 또는 이맥스(Emacs) 등 어떤 텍스트 프로그램에서도 간단하게 열어서 편집할 수 있습니다. 그러니까 HTML 파일은 어떤 텍스트 프로그램을 이용해서도 만들고 편집할 수 있으며, 파일 이름에서 ".html"이라는 확장자만 달고 있다면, 크롬(Chrome)이든 파이어폭스(Firefox)든 관계 없이 어떤 웹 브라우저에서도 그 파일을 웹 페이지의 형태로 표시할 수 있습니다.
전문적인 소프트웨어 개발자들은 다양한 위지워그(WYSIWYG) 편집기를 사용해서 웹 페이지를 개발합니다. 넷빈즈(NetBeans), 인텔리제이(IntelliJ), 이클립스(Eclipse), 마이크로소프트의 비주얼스튜디오(Visual Studio)와 같은 개발도구에서는 플러그인이나 기본 구성요소의 형태로 위지위그 편집기를 제공하고 있기 때문에, HTML을 아주 쉽게 사용하고 구현할 수 있습니다.
> 이 글은 'HTML (Hypertext Markup Language)'을 각색하여 작성되었습니다.
2.8K
