[HTML] #1-1 HTML이 뭐야?

1. 프로그램의 흐름을 이해하자 : 입력 > 가공 > 출력

 

 우리가 개발자가 되어서 프로그램을 개발한다는 것은 결국 컴퓨터에게 일을 시키는 것이다. 그리고 컴퓨터에게 일을 시키기 위해선 컴퓨터가 알아들을 수 있는 언어로 명령을 해야 하는 법이다(이것을 컴파일이라 부른다).

 어떠한 필요로 인하여 특정한 데이터를 출력하는 것에 성공했다고 생각해보자.

 하지만 출력된 데이터를 나만 보는 것이 주 목적이 아니라 여러 사람과 공유를 하기 위해선 각기 다른 사람들이 사용하는 매체와 프로그램에 맞는 방식으로 제공을 해주어야 하고(입력) 그 데이터들은 각 프로그램에 맞춰 변환이 되어(가공) 사람들에게 보여지게 된다(출력).

 

 이것이 프로그램에서 이루지는 입력, 가공, 출력의 단계이다.

 좀 더 자세히 알아보자.

 1) 입력 데이터
 무언가의 데이터를 입력하는 과정에서 한 가지 질문을 먼저 던지려 한다.
 수많은 데이터들이 대체 어디에 저장되는 것일까? 하는 질문이다.

 메모장? 가능하다.
 엑셀? 역시 가능하다.
 하지만 각 프로그램마다 용량의 한계, 그리고 데이터를 편리하게 처리하는 것의 한계가 존재하기 마련이다.

 예를 들어 40만개의 자료를 엑셀에 정리, 할 수는 있지만 데이터를 저장하는 데에 특화되어있는 프로그램을 활용하여 저장하는 것이 더 유리한 것이다.
 이 프로그램들을 DataBase라고 부르며 대표적인 프로그램으로는 Oracle DB, Maria DB, MS-SQL이 있다.
데이터를 활용하는 것을 목적으로 한다면 JAVA와 같은 프로그램을 거치지 않아도 DB 자체만으로도 하나의 작업이 가능하다.

 2) 가공(Backend)
 위의 활동을 통해 입력된 데이터를 활용하여 개발자가 원하는 결과를 만들어내는 과정을 가공이라고 한다.
 그런데 사용자들은 데이터들을 가공하는 과정까지 알 필요가 있을까? 아니다.
 마치 자동차를 사는 사람들이 자동차를 전문적으로 조립할 수 있을 정도로 세부적인 것까지 다 알 필요가 없다는 말이다.

 데이터도 마찬가지이다.
 어느 사이트에 로그인을 하려고 할 때 사이트 사용자들은 로그인에 성공했는지, 실패했는지만 알면 되지만 개발자들은 그 모든 과정을 컨트롤하고 이해할 수 있어야 한다.
 그래서 이 과정을 개발 분야에서는 "Back"end단, Server단이라고 부른다.

 3) 출력(Frontend)
 출력을 한다라는 말은 말 그대로 사용자에게 보여주는 것을 말한다.
 그래서 개발분야에서는 흔히 "Front"end단, View단, UI단이라고 불리운다.
 이 각각의 단에서 사용되는 언어가 바로 HTML, CSS, Bootstrap 언어이다.

우리는 위에서 설명한 이 세 단계를 각기 배우겠지만 결국 모든 과정을 통합하여 활용할 수 있도록 준비하는 것이 개발자가 되는 과정이다.
그래서 우선! 첫 과정으로 Frontend단인 HTML에 대해서 배워보려 한다.

 

2. 다양한 개발도구와 코딩툴

 

 우리가 이렇게 컴퓨터에게 일을 시키기 위해선 다양한 개발 도구가 사용된다.

 JDK(자바), Python, C++ 등이 이에 해당된다.

 그리고 이 도구들은 각기 다른 특성에 따라 최적화된 사용처가 존재한다.

 

 예를 들어 C언어는 병원 프로그램에 자주 사용된다.

 우리가 자주 사용하는 어플리케이션에는 자바 프로그램이 사용된다.

 파이선은 인공지능 분야에서 흔히 사용되는 분야이다.

 물론 혼용해서도 사용이 가능하지만 더 잘 맞는 도구를 내버려두고 다른 걸 굳이 사용할 필요는 없는 것이다.

 

 이 각기 다른 프로그램들에는 사용되는 명령어들이 있는데 이 명령어들은 제각기 다르고 언어마다의 차이가 있기 때문에 이런 것들을 정리해주고 쉽게 사용할 수 있도록 도와주는 것이 있다.

 이것을 ‘코딩툴’이라고 부른다.
 코딩툴로 대표적인 것은 아래의 목록에 적힌 것들이며 우리는 주로 Visual Studio Code를 사용하려 한다.

Visual Studio Code
Eclipse
Sublime
Editplus
Pycharm
등등...

 

 

3. 출력을 위한 도구, HTML

 

 이제 개발도구와 코딩툴을 사용하여 데이터를 입력하고 가공한 뒤 나온 출력 결과물을 확인하기 위해선 어떻게 해야할까?
 출력이란 이름에 걸맞게 종이로도 인쇄하여 보는 것이 가능하긴 할 것이지만 명색에 개발자라고 불리는 이들인데 그렇게 하진 않는다.

 

 우리의 데이터가 컴퓨터 내부에서 가장 흔하게 출력되는 장소는 바로 ‘웹 브라우저’ 이다.
 이 웹브라우저에 출력을 가능하도록 뼈대를 만드는 언어가 바로 HTML이다.
 그리고 그 뼈대에 여러가지 디자인 요소와 스타일을 입히는 것이 CSS.
 또 그것들이 자유롭게 움직일 수 있도록 돕는 것이 Java Script.
 물론 그 모든 것들을 가능하게 하는 것은 또 Backend단의 영역이다.

 이렇게 각기 다른 개발도구와 언어들이 융합되는 것이 프로그램 개발의 과정이라 생각하면 된다.

 브라우저에 출력을 할 때는 정적인 요소와 동적인 요소가 모두 포함되기 마련이다.
 그리고 당연하게도 이 요소들은 출력을 위해 미리 준비해야하는 것이 꼭 필요하다.
 이 요소들을 준비하기 위해 먼저 html, images, music이라는 작업 폴더를 만들고 그 안에 준비한 자료들을 저장해두었다.

 

무엇이든지 한눈에 들어오도록 자료를 잘 정리해두는 것이 첫걸음이겠지!

 

 그리고 'Visual Studio Code' 프로그램도 설치하였다.

프로그램 깔아서 실행만 시켰는데도 개발자가 된 기분.. 은 거짓부렁이다(ㅎ)

 

 

4. 비쥬얼 스튜디오로 HTML 하기

 

 비쥬얼 스튜디오를 깔았다고 해서 모든 언어를 다 사용할 수 있는 것은 아니다.

 각각의 언어를 사용할 수 있도록 확장팩을 깔아야 한다.
 다행히도 HTML과 CSS는 기본적으로 내장되어있기 때문에 추가로 확장팩을 설치하지 않아도 괜찮다.

 

왼쪽 메뉴바의 가장 아래, 네모모양의 탭을 클릭하면 확장팩들을 확인할 수 있다.

 

 자, 이제 본격적으로 비쥬얼 스튜디오를 활용해 간단한 HTML 작업을 할 준비가 끝났다!