HTML[1] - HTML이란?

안녕하세요.

오늘은 HTML에 대해 알아보겠습니다.

1. HTML이란?

HTML은 HyperText Markup Language의 약자로, 웹페이지를 만들기 위한 마크업 언어를 의미합니다.

마크업 언어는 문서내에 문장이나 그림, 표 등이 어떻게 배치되는지, 글자는 어떤 크기와 모양을 갖고 있는지에 대해 나타내는 언어로써, 쉽게 말해 웹페이지의 골격을 만들어주는 언어입니다.

 

프로그래밍 언어인 파이썬이나 C언어는 기계에 명령이나 연산을 시키는 목적으로 사용되지만, 마크업 언어인 HTML은 웹페이지의 구조를 만드는 역할만 할수 있습니다.

프로그래밍 언어는 실행을 위한 언어라면, HTML은 표현을 위한 언어라고 할 수 있겠네요.

 

HTML은 태그와 속성, 내용과 요소로 이루어져있는데 여기서 태그는 명령어의 집합이라고 할 수 있습니다.

태그는 여는태그와 닫는 태그로 이루어져 있는데, 여는태그에 /를 붙여주면 닫는태그의 역할을 합니다.

예를들면 <h1></h1>이라는 태그 셋트는 텍스트의 크기를 제일 크게 만들어주는 태그입니다.

<h1>태그를 사용하니 글자 크기가 달라졌습니다.

HTML에서 태그의 역할이 좀 감이 오시나요?

태그에서 태그이름을 제외한 나머지 부분들은 다음과 같은 역할을 합니다.

예를들면

<h1 class="primary">내용</h1>

라는 예시에서 h1은 방금 말했듯 태그이름을 의미합니다.

다음으로 class는 속성명을 의미하는데, 시작태그 안에서 구체화된 명령어 체계를 나타냅니다.

primary는 속성값을 의미하며 속성에 대한 세부적인 정보를 담고 있습니다.

내용이라는 텍스트는 말그대로 웹페이지 상에서 우리 눈에 보여지는 내용을 의미합니다.

마지막으로 시작태그부터 종료태그까지의 태그뭉치를 합쳐서 요소라고 부릅니다.

 

2. ATOM 설치하기

이제 HTML이 무엇인지는 대충 알게 되었으니 직접 웹페이지를 만들어보고 체험해보도록 하겠습니다.

HTML코드를 작성하는 방법은 그리 제한적이지 않습니다.

메모장에다가 작성해도 되고, 한글 파일로 작성해도 되거든요.

하지만 저희는 조금 더 편리하게 HTML코드를 작성 하기위해 ATOM이라는 텍스트에디터를 설치해보도록 하겠습니다.

ATOM은 비쥬얼 스튜디오 코드와 같은 역할을 하지만 더 가볍고, HTML 코드를 실시간으로 확인하는 기능이 편리하기 때문에 사용해보도록 하겠습니다.

우선 다음 링크로 접속해주세요.

https://atom.io/

A hackable text editor for the 21st Century

해당 사이트에 접속하시면 다음과 같은 화면이 뜹니다.

노란색 다운로드 버튼을 눌러서 설치파일을 다운받아주세요.

설치파일을 실행하면 아래와 같은 화면이 뜨면서 설치가 진행됩니다.

설치는 금방 끝나고, 아래와 같은 화면이 뜨면 정상적으로 설치가 진행된 것입니다.

웰컴 어쩌구 하는 탭들은 다 꺼주시면 되고 우측 상단의 파란색 팝업창도 꺼주시면 됩니다.

이제 HTML파일을 작성하기 위한 셋팅을 해보겠습니다.

우선 [file] - [settings]로 들어갑니다.

다음으로는 좌측의 [install] 탭으로 들어가신 후 검색창에 [html preview]를 입력해주세요

[atom-html-pewview]를 다운받아주시면 됩니다.

[file] - [open folder]를 눌러주세요

새폴더를 만들어서 열어줍니다.

선택된 폴더를 오른쪽 클릭하신 후 [new file] 버튼을 눌러주세요.

[파일명.html]을 입력해주시면 됩니다.

만들어진 파일에서 html을 입력하시면 태그가 뜹니다. 눌러주세요.

html을 위한 기본적인 셋팅이 자동으로 완성됩니다.

이제 HTML코드를 작성할 준비가 끝났습니다.