안녕하세요. 이번 포스팅에서는 IT입문자를 위한 HTML 이해를 위한 포스팅을 해볼까 합니다. 막 입문하신 분들은 HTML이라는 단어 자체도 생소하실 수 있지만 실제로 웹페이지에 대해서 이야기할 때 HTML 자체를 제외하고 이야기할 수 없습니다.
물론 우리에겐 가볍게 사용해볼 수 있는 좋은 실습도구이기도 하니, 웹페이지를 만들어보는 가장 기초단계라고 생각하고 가벼운 마음으로 시작해보도록 하겠습니다.
HTML이란 무엇인가
HTML은 웹 페이지를 구성하는 기본 요소 중 하나입니다. Hyper Text Markup Language 의 약자로 HTML이라고 불리고 있습니다. 실제로 우리는 웹페이지를 시각적으로 보게 되지만, 웹페이지의 구조와 내용은 HTML로 구성되어 있다고 이해하시면 됩니다. 즉, 웹페이지를 구성하고 있는 '뼈대'인 것입니다.
HTML은 태그라는 것을 사용하여 작성되게 되는데요. 태크는 꺽쇠괄호(<>)로 둘러싸여 있고, 보통 시작 태그와 종료 태그의 쌍으로 구성됩니다. 이것을 문서를 '마크업'한다고 표현하는데요. 그래서 HTML은 마크업 언어라고 불리고 있죠.
위의 예제에서 사용된 태그들이 각각 title, head, body 등과 같은 것이지요.
HTML의 기본 구조
우리가 당장 실습을 할 것은 아니니까 이해를 돕기 위해 실제적인 예시를 하나 들어보겠습니다. 웹페이지를 하나의 책이라고 생각해본다면, 여기서 HTML은 책의 구조와 내용을 정의하는 것과 매우 유사합니다.
<html>: 책의 표지와 목차를 감싸는 표지지와 목차
<head>: 책의 목차와 각종 정보를 담고 있는 목차 페이지
<body>: 실제 내용이 담긴 책의 내용 페이지
<h1>, <h2>, ...: 책의 장(Chapter) 제목
<p>: 책의 각 장에서의 문단
이렇게 나눠서 생각해볼 수가 있겠습니다.
즉, HTML문서는 크게 'html', 'head', 'body' 세 가지 요소로 구성되는데, 하위의 주요 태그들이 달리면서 구성요소들이 차곡차곡 쌓이는 문서로서의 기능이 될 수 있는 것입니다.
HTML을 이해하기 위한 Q&A
사실 HTML이라는 것은 개발 입문 단계에서 간단하게 설명하고 실습하면서 기능을 익히는 데 주력합니다. 다만 우리는 가장 기본적인 단계의 기능과 역할에 대해서 경계를 긋는 작업을 한다고 생각하기 때문에 입문자나 IT비전공자들이 이해할 수 있는 간략한 Q&A로 HTML에 대해서 추가적으로 알아보겠습니다.
1. HTML은 마크업 언어라고 하는데, 마크업 언어는 무엇인가요?
- 앞서 설명했듯, 텍스트에 태그를 사용하여 문서의 구조를 정의하는 언어입니다. 또한 텍스트를 어떻게 표시할지를 정의하는 역할을 하고 있습니다.
2. HTML은 개발언어인가요?
- 1번 질문에 대한 대답에서 문서의 구조와 내용을 표현하고 표시내용을 정의한다고 설명드렸습니다. 이것이 바로 HTML이 개발언어가 아닌 이유입니다. 조금 더 쉽게 말하자면, HTML은 웹 페이지의 구조를 정의하기 위해 사용되지만 개발 언어는 동적으로 웹 페이지를 제어하거나 데이터를 조작 , 처리하는 용도로는 사용하므로 단순히 "표시"하는 역할을 하는 HTML은 개발언어로 분류하지 않습니다. 조금 더 상세히 알고자 하면 함께 사용하는 프로그래밍 언어를 함꼐 실습하는 것이 도움이 됩니다.
3. HTML을 실습하기 위해서는 어떤 것들이 필요한가요?
- 텍스트 편집기를 사용해 간단한 HTML문서를 따라 만들어보는 것이 제일 빠릅니다. 기본적인 태그들을 익힌 뒤, 무료로 제공되는 편집기가 많으니, 다운받아서 기존에 존재하는 웹 페이지를 따라 만들어보면서 실습하는 것이 좋습니다.
4. HMTL을 배우면 어떤 것을 할 수 있나요?
- 웹페이지를 만들 수 있습니다. 또한 텍스트, 이미지, 링크, 목록, 테이블 등을 사용해서 간단히 웹피이지를 꾸밀 수 있고 단순한 폼을 만들 수도 있습니다. 물론 HTML만으로 잘 구동되는 웹페이지를 만들수는 없습니다.
5. 웹페이지를 만들기 위해 HTML 외에 무엇이 더 필요할까요?
- 간단히 말하자면 CSS와 Javascript가 필요합니다. 다음 포스팅에서 다루겠지만 CSS로 디자인, 배경색 등을 만들고 Javascript로 동적인 기능(상호작용, 애니메이션, 데이터검증 등)을 삽입해서 웹페이지를 만들 수 있습니다.
마치며
이번 포스팅에서는 IT입문자를 위한 HTML을 이해하는 방법에 대해서 다루어보았습니다. HTML은 웹 개발의 가장 기본이 되는 요소이기도 하고, 사실 독학으로도 쉽게 배우고 사용할 수 있는 언어입니다. IT입문자로서 이 정도만 상식으로 알고 있어도 실제 HTML을 다루지 않는 IT계열 종사자 분들도 간략하게나마 이해와 설명이 가능할 것 같습니다. 이 글이 HTML을 이해하고 다루는 데 조금이라도 도움이 되었으면 좋겠습니다.
'IT공부하기 > IT상식' 카테고리의 다른 글
| IT입문자를 위한 Javascript 이해하기 (0) | 2023.08.05 |
|---|---|
| IT입문자를 위한 CSS 이해하기 (0) | 2023.08.04 |
| IT입문자를 위한 입사 이후 업무절차 이해하기 (0) | 2023.08.02 |
| IT입문자를 위한 IT인프라 이해하기 (0) | 2023.07.28 |
| API(application programming interface) 에 대해서 쉽게 알아보자! (0) | 2023.07.26 |
