웹 개발을 이야기 할 때 우선적으로 알아야 할 개념이 바로 HTML 이라고 할 수 있습니다. 많이 들어 봤어도 그 개념에 대해 정확히 알고 계신 분들이 많지 않을 텐데요 이번에는 HTML은 무엇이고 어떤 구조를 가지는지, 그리고 CSS와의 관계는 어떻게 되는지 알아보겠습니다.
1. HTML 이란 무엇인가?
HTML은 Hyper Text Markup Language의 약자로, 웹 페이지를 만들기 위한 표준 언어입니다. HTML을 사용하여 웹 페이지의 구조와 내용을 정의하며, 웹 브라우저는 이 언어를 해석하여 사용자에게 시각적인 형태로 보여줍니다.
쉽게 이야기 하면 웹 문서를 만드는 언어라고 할 수 있으며 다양한 인터넷의 정보를 웹 브라우저에 보여줄 때 사용하는 언어입니다. 이는 웹 개발의 출발점이라고 할 수 있습니다.
하이퍼텍스트란 문서를 서로 연결해 주는 링크를 의미합니다. 인터넷을 사용하다 보면 링크만 클릭하면 다른 페이지나 사이트로 연결이 되는 경험을 하게 되는데요 HTML에는 서로 연결한다는 의미가 포함되어 있고 또 웹 브라우저의 내용을 보여주는 텍스트, 이미지, 영상등을 표시(Markup)하는 것을 의미하기도 합니다.
2. HTML 웹 편집기
우리가 흔히 사용하는 한글, 엑셀, 워드 등의 일반 문서는 내용을 입력하는 프로그램과 입력한 내용을 확인하는 프로그램이 같습니다. 한글 문서를 만들때 한글에서 제공하는 표, 서식 등 한글에서 제공하는 기능을 사용해서 문서를 만들고, 이 문서의 내용을 한글파일에서 불러와서 그대로 사용할 수 있습니다.
하지만 웹 문서는 내용을 작성하는 프로그램과 그 내용을 확인하는 프로그램이 다릅니다. 예를 들어 웹 문서를 만들 때 웹 브라우저에서 바로 표를 삽입하거나 다른 작업을 할 수 없습니다. 아래의 그림처럼 비주얼 스튜디오 같은 웹 편집기에서 마크업 형식으로 표를 작성해야 합니다. 그러면 웹 브라우저에 원하는 모습이 나타나게 되는 것인데요 이때 웹 브라우저가 어느 부분이 제목, 텍스트, 또는 그림인지 구별할 수 있도록 꼬리표를 붙여야 하며, 이러한 꼬리표를 태그(Tag) 라고 합니다.
3. HTML과 CSS의 관계
HTML과 CSS는 웹 개발에서 중요한 역할을 하는 두 가지 다른 언어입니다. HTML은 웹 페이지의 구조와 콘텐츠를 정의하는 마크업 언어이며, CSS는 이러한 콘텐츠의 디자인과 스타일을 지정하는 스타일 시트(style sheet) 언어입니다.
- HTML(Hyper Text Markup Language) : HTML은 구조와 의미를 전달하며, 웹 페이지의 기반을 형성합니다. 예를 들어 제목을 표현하기 위해서는 <h1>부터 <h2> 태그를 사용하고, 단락을 만들기 위해서는 <p> 태그를 사용합니다. 또한 이미지, 링크, 테이블 양식 등도 HTML 태그를 사용하여 표현합니다.
- CSS(Cascading Style Sheets) : CSS는 HTML의 구조에 시각적인 스타일을 부여합니다. 즉, 텍스트의 크기와 색상, 배경 이미지와 여백 등을 설정합니다. CSS는 웹 페이지의 레이아웃과 디자인을 관리하여 보다 사용자 친화적이고 시각적으로 좋게 만들어 줍니다.
웹 개발자는 일반적으로 HTML과 CSS를 분리하여 관리하고 유지보수 하며 그 이유는 다음과 같습니다.
- 유지보수 용이성 : HTML과 CSS를 분리하면 콘텐츠와 디자인을 독립적으로 변경할 수 있어 유지보수가 간편해 집니다.
- 재사용성 : 동일한 스타일을 여러 웹 페이지에 적용할 수 있으며, 스타일 시트를 수정하면 모든 페이지에 변경 사항이 반영됩니다.
- 효율적인 개발 : 웹 개발 팀 내에서 역할을 분담하여 동시에 작업할 수 있습니다. 개발자는 HTML과 디자이너는 CSS를 담당하여 작업을 효율적으로 진행할 수 있습니다.
4. HTML의 기본구조
HTML 문서는 일반문서와 달리 정해진 형식에 맞추어 내용을 입력해야 합니다. HTML의 기본구조는 다음과 같습니다.
- <!DOCTYPE html> : 연재 문서가 HTML5 언어로 작성한 웹 문서라는 뜻입니다.
- <html> ~ </html> : 웹 문서의 시작과 끝을 나타내는 태그입니다. 웹 브라우저가 <html> 태그를 만나면 </html>까지 소스를 읽어 화면에 표시합니다.
- <head> ~ </head> : 웹 브라우저가 웹 문서를 해석하는데 필요한 정보를 입력하는 부분입니다.
- <body> ~ </body> : 실제로 웹 브라우저 화면에 나타나는 내용입니다.
5. 마무리
지금까지 HTML은 무엇을 말하는지 그리고 HTML을 이야기 할 때 항상 같이 따라다니는 CSS무엇이고 HTML과의 관계는 어떻게 되는지 알아보고 HTML의 기본 구조까지 알아보았습니다. 우리가 인터넷 환경에서 흔히 접하는 문서의 기본틀이 어떻게 구성되는지 이해할 수 있는 기본적인 정보였습니다.