HTML 공부 시작! 웹 개발의 구성! HTML 이란?

 드디어 설치하는 과정들이 끝나고 무언가 코딩하는 것을 시작하였습니다! 우선 그것을 알려드리기 전에 웹 개발의 순서와 그 관련 용어, HTML에 관한 간단한 설명부터 드리겠습니다.

 

웹 개발의 구성 (프론트엔드? 백엔드?)

 우선 웹 개발은 크게 보면 2가지로 나뉩니다. 프론트엔드(Front End)와 백엔드(Back End). 프론트엔드는 웹 페이지의 보이는 부분, 직역하자면 "앞면"을 개발하는 과정입니다. 웹 페이지의 생김새, 구조 등을 디자인한다고 볼 수 있습니다. 백엔드는 웹 페이지의 보이지 않는 부분, "뒷면"을 개발하는 과정이죠. 웹 페이지의 데이터 관리를 담당한다고 할 수 있습니다. 그렇기에 백엔드에서는 코딩을 하더라도 바로 눈에 보이지는 않죠. 조금 더 쉽게 알아듣기 위해 쇼핑몰로 예시를 들어 보겠습니다. 쇼핑몰 웹 페이지의 생김새 - 검색창, 목록의 위치, 글꼴과 바탕의 색깔 및 크기 조절, 무언가를 클릭했을 때 나오는 문구들 등은 전부 프론트엔드에 포함되고, 그 뒤에 로그인 정보(아이디 및 패스워드), 장바구니 체크리스트, 링크 클릭 후의 연결되는 페이지 등을 관리방식을 개발하는 것이 백엔드라고 볼 수 있습니다. 프론트엔드를 담당하는 개발자, 백엔드를 담당하는 개발자를 각각 프론트엔드개발자, 백엔드 개발자라고 부르고 프론트엔드와 백엔드를 모두 다룰 수 있는 개발자를 풀 스택 개발자라고 합니다. 

 

※강사님이 처음 공부할 때 프론트엔드에 비해 백엔드의 수요가 높고 취업확률과 연봉이 높은 경우가 많아서 우선은 백엔드를 목표로 하라고 하셨습니다만, 저는 빠른 시일 내에 풀 스택 개발자가 되는 것이 목표이기에 둘 다 정말 열심히 하겠습니다!!

 

프론트엔드에 필요한 언어

 프론트엔드에 필요한 언어는 3가지로 나눌 수 있습니다. 웹 페이지의 구성하는 데에 쓰이는 HTML, 웹 페이지의 디자인을 담당하는 CSS, 그리고 웹 페이지의 사용자들이 어떠한 행동 (클릭을 했다거나)에 대한 반응을 만들어내는 Javascript라고 할 수 있습니다. (구성 -> 디자인 -> 반응)

 

백엔드에 필요한 언어

백엔드에도 다양한 언어가 사용되는데요, 우선은 서버 측 관련된 언어 - PHP, JSP, ASP (3개를 합쳐서 3P 라고 한답니다. 3개 다 배우면 1타 3피!?), Phython, Ruby, Java 등 정말 다양한 언어가 사용됩니다. 이 언어는 모두 다 알아야 하는 것은 아니고 실무 환경에 따라 사용하는 언어가 다를 수 있습니다만, 문법 자체는 비슷할 것이기에 한 개를 배우면 다른 언어도 어느 정도 쉽게 적용할 수 있을 것입니다. 그리고 이 데이터를 저장 및 검색, 프론트엔드에 연결하기 위한 MySQL, Oracle 및 SQL Server 도 사용할 수 있어야 한다고 하는데요. 현재로써 저는 MySQL을 배우기 시작한 상태라 아직은 어떤 식으로 융합이 되고 같이 사용될지 감이 잘 잡히지는 않습니다. 이후 차근차근 배우면서 알려드리겠습니다.

HTML 이란?

 HTML 의 약자는 Hyper Text Makeup Language로, 웹 페이지의 구조를 만들기 위해 사용되는 언어입니다. (강사님 피셜) 옛날에는 다양한 웹 언어가 난무하였으나, 인터넷이라는 공간에서 다른 개발자들이 수정/편집하기 쉽도록 편의성을 위해 HTML이라는 언어를 만들어서 기본 웹 개발의 기준으로 사용한다고 합니다.  마치 편의성을 위해 전자사전, 핸드폰, 블루투스 이어폰의 충전기 케이블을 전부 USB-C Type으로 만들어 둔 듯한 느낌이네요. HTML은 일상생활에 꽤나 많이 접할 수 있는데요, 아무 웹 페이지(네이버, 구글 등)에 들어가셔서 마우스 우클릭 후 소스보기를 클릭하셔서 나오는 코드가 바로 HTML입니다.

 

TAG 사용법

HTML은 웹 페이지의 구조를 구성하는 언어라고 설명드렸는데요, 예를 들자면 제목에 들어갈 글자의 크기, 문단 생성, 문장 띄우기, 수평선 생성 등의 구조를 만들 수 있습니다. 이 구조들은 태그(TAG)라는 명령어들을 사용해서 만듭니다. 후에 TAG라는 명령어는 괄호를 열어서 쓰고 닫습니다. <Tag> 이런 식으로 말이죠. 또한, 대부분의 태그(TAG)들은 끝부분에 종료 태그를 사용하여 꼭 종료해주어야 합니다. <Tag> 내용물 </Tag> 이런 식으로 앞에 사용한 태그의 끝에 </태그>라고 해서 어디서부터 어디까지 태그가 적용되는지 표시하는 겁니다.

 

다음 포스팅은 실제 TAG들의 정리 밑 TAG를 직접 써서 간단한 웹 페이지 생성에 관한 내용으로 돌아오겠습니다!