01. HTML 시작하기

qpress 2020년 2월 18일 37

HTML은 필수!

전세계 사람들이 매일 접하는 것이 바로 HTML입니다. 웹사이트(페이지)를 구성하는 기본 언어가 바로 HTML이기 때문입니다.
그리고, 개발자 뿐만 아니라 기획자, 마케터까지도 기본적인 HTML은 알고 있어야 업무가 잘 진행될 정도로 HTML은 인터넷 관련 업종의 필수적이면서 기본적인 개념이 되어 있습니다.
또한 웹 개발에 필요한 다양한 언어들을 공부할때 항상 HTML에 대한 기본적인 지식은 가지고 있어야한다는 전제 조건이 붙습니다.
실제로 웹사이트의 프로세스를 이해하거나 공부할 때 알아야 하는 개념의 순서 상 항상 HTML은 첫번째 입니다.

HTML -> CSS -> JavaScript -> Server Side (PHP, JSP, ASP, NodeJs…)

HTML이란?

HTML은 Hyper Text Markup Language의 줄임말입니다.

Hyper Text 는 쉽게 말이 링크(Hyper Link)되는 Text라는 뜻입니다. 기존의 문서 형태는 저작자의 의도에 따라 순차적으로 내용을 읽어 가는 형태였지만, 인터넷과 Web에서는 링크에 따라 내용을 소비하는 형태라고 할 수 있습니다. 국가, 지역, 언어를 가리지 않고 전세계 어떤 정보든 클릭 한번으로 이동하거나 소비 할 수 있는 인터넷 정보 혁명은 바로 이 Hyper Text의 개념이 핵심이라고 할 수있습니다.

Markup Language 는 꾸미는 언어, 즉 모양새를 잡아주는 언어라는 뜻입니다. 글씨를 굵게 한다든지 색을 파랗게 하는 등 내용이 보여지는 방식을 결정할때 사용하는 언어입니다.

쉽게 말해서 HTML은 웹페이지를 구성하고 꾸미는데 사용하는 언어입니다.

HTML 체험

누구나 바로 HTML을 볼 수 있습니다. 지금 보고 있는 웹페이지에서 마우스 오른쪽 버튼을 클릭하여 ‘소스보기’를 하면 현재 페이지의 HTML 소스를 볼 수 있습니다.

복잡해 보이지만 간단하게 개념을 축소해 보면 꺽쇠(< >)로 둘러쌓인 태그(Tag) 들의 조합입니다. 이 태그는 여는 태그(< 태그이름>), 닫는 태그(</ 태그이름>)로 둘러쌓게 되는 문법을 가지고 있습니다.
HTML문서의 모든 요소는 이렇게 태그로 구성되어 있습니다.

<h1>제목입니다.</h1>

위 예제에서 꺽쇠로 둘러쌓인 태그는 화면에 보이지 않고, h1 이라는 태그가 가진 스타일(글자 크기가 좀 크고 굵은..)이 반영된 ‘제목입니다.’라는 내용만 화면에 출력하게 되는 것입니다.

HTML 작성해 보기

HTML은 어려운 프로그램 언어가 아닙니다. 문서의 보이는 방식, 일종의 서식과 같기 때문에 비교적 쉽게 HTML을 이해하고 작성할 수 있습니다.

PC의 메모장을 열어서 아래와 같이 입력한 후 test.html 이라는 이름으로 바탕화면에 저장해 주세요.

<html>
   <body>
     첫번째 HTML 문서 입니다.
   </body>
</html>

그리고 저장된 test.html 파일을 이용중인 브라우저 내부로 드래그 해보시기 바랍니다.

그러면 브라우저에 아름답게 내용이 출력되는 것을 확인 할 수 있습니다.
HTML의 구조에 대해서는 다음 글에서 자세하게 다루도록 하겠습니다.