HTML 개요
HTML 이란?
아마 웹에 대해서 조금이라고 관심을 가지고 계신 분들이라면 html을 적어도 한 번 이상을 들어보셨을 것이라고 생각합니다. 그만큼 html은 웹개발에 있어서 아주 중요하고 핵심적인 언어입니다. 지금도 아주 많은 곳에서 활발하게 사용되고 있고 계속해서 새롭게 업그레이드 되고 있는 언어 중 하나입니다.
HTML(HyperText Markup Language)
웹페이지 제작의 가장 기초적인 뼈대가 되는 마크업언어(Markup Language)로서 웹페이지의 내용과 레이아웃을 담당하는 언어
html은 웹페이지 제작의 가장 기초적인 뼈대가 됩니다. 아무리 멋진 디자인, 좋은 내용을 가지고 있다고 하더라도 html을 사용하지 않으면 제대로된 웹페이지를 제작할 수 없습니다. 좋은 정보, 내용들을 멋진 디자인으로 표현한 웹페이지를 제작하기에 앞서서 먼저 html을 이용해서 기본적인 뼈대를 만들어주게 됩니다. 여기서 말하는 뼈대는 나중에 디자인을 할 때도 활용되며 CSS를 이용한 디자인을 공부하면서 html이 웹페이지에 대한 뼈대를 형성한다는 것을 크게 느낄 수 있을 것입니다.
마크업언어(Markup Language)
특정기호나 표기를 사용하는 "태그(tag)"를 사용하여 어떠한 문서를 구성하는 내용의 논리적 구조, 배치양식에 대한 정보를 표현하는 언어로서 프로그래밍언어와 구분됨. 내용이 아닌 그 내용을 구성하는 서식에 대한 정보를 나타내는 데 사용
위의 정의에서 보신 것처럼 html의 정의에는 마크업 언어(Markup Language)라는 용어가 사용됩니다. 다소 어려운 표현일 수 있지만 우선 태그(Tag)를 사용한다는 점을 중점적으로 보시면 됩니다.(마크업 언어에 대해서는 차후에 더 자세히 다뤄보도록 하겠습니다.)
그러면 HTML만 있으면 웹 개발할 수 있나요?
html이 웹 개발에 있어서 핵심적이고 중요한 것은 맞지만, 그렇다고 해서 html만으로 현재 우리가 사용하고 있는 많은 종류들의 웹 서비스를 개발할 수 는 없습니다. 웹 페이지를 멋지고 좋은 디자인으로 꾸며주는 것도 필요하고 또한, 요즘처럼 사용자의 입력에 따른 다양한 동작을 수행해야하는 동적 웹페이지의 경우 사용자의 입력도 처리할 수 있어야 합니다.
그래서 위에서 말한 이러한 수요들을 충족하기 위해서 웹페이지는 html만이 아니라 디자인을 담당하는 CSS, 사용자 입력에 대한 동적인 처리를 담당하는 JavaScript와 함께 사용됩니다.(실제로 최근의 웹페이지들은 더 많은 언어와 기술들을 사용해서 만들어집니다.) html에 대해서 먼저 공부한 뒤에 CSS, JavaScript도 이어서 공부할 것입니다.
나 요즘 Html로 프로그래밍 해!
아마 많은 현업개발자들이 계신 곳에서 위의 제목과 같이 말한다면 어떻게 될까요? 아마 그 반응은 상당히 싸늘할 겁니다. 위의 정의에서 언급했던 것처럼 html은 마크업 언어이지 프로그래밍 언어가 아닙니다. 요즘 같이 통합개발환경(IDE) 툴들이 정말 좋아지고 동시에 여러가지 언어들을 지원하면서 웹 개발에서 사용하는 언어들도 사용할 수 있게되었는데 이 언어들이 대표적인 프로그래밍 언어인 C, C++, Java, Python, Go 등과 같은 다양한 프로그래밍 언어들을 모두 동일한 환경에서 개발할 수 있게되다보니 이런 오해를 빚은 것이 아닐까 생각합니다. 결론적으로 html로 프로그래밍을 한다는 표현은 잘못된 표현입니다!
부가적으로 이와 관련된 재미있는 만화가 인터넷 상에서 돌아다니고 있어서 이도 함께 첨부하도록 하겠습니다.
https://www.hooni.net/xe/media/95965
숨어있는 개발자 찾는 방법 - 후니넷
Q : 저는 HTML로 프로그래밍 해요~ A : HTML은 프로그래밍 언어가 아닙니다 ㅋㅋ (원본 파일 첨부함 ㅋㅋ)
www.hooni.net
html에 대한 개요를 마치기 전에 마지막으로 html 태그에 대한 공부를 하기에 앞서서 먼저 html의 요소에 대해서 간단하게 알아보도록 하겠습니다. html 문장의 구성요소는 다음과 같습니다.
HTML 요소(HTML Elements)
1. 시작태그(Start Tag)
2. 내용(Some Contents)
3. 종료태그(End Tag)
모든 html문서의 내용들은 시작태그와 종료태그 사이에 내용이 오는 구조를 철저하게 지킵니다. 문법상으로 다음의 형식으로 표현합니다.
<!-- 기본적인 형식 -->
<tagname> Contents </tagname>
<!-- 예시 -->
<h1> My First Heading </h1>
<p> My first paragraph </p>물론 이에 대해서 예외가 존재한다. 어떤 html 요소는 내용(Contents)을 가지지 않는 경우가 있는데 이러한 요소들을
빈 요소(Empty Elements) 라고 부른다. 빈 요소의 대표적 예로는 <br>가 있으며 빈 요소는 종료태그를 갖지 않는다는 점을 기억하자.
HTML Page의 구조 - body 부분만 나타난다!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
<body> </body> 태그 사이에 들어가는 내용만 실제로 웹 브라우져를 통해서 페이지에 나타난다.
즉, 웹페이지에 무언가를 html을 이용하여 나타내기 위해서는 body태그 사이에 관련 코드를 작성해야 한다.
'Web Basic > HTML' 카테고리의 다른 글
| HTML Quotation & Comments (인용구 & 주석) (0) | 2020.07.20 |
|---|---|
| HTML Formatting(서식) (0) | 2020.07.20 |
| HTML Styles (0) | 2020.07.20 |
| Heading(제목) & Paragraphs(단락) (0) | 2020.07.20 |
| HTML 기초 (0) | 2020.07.20 |