[01-1] HTML이란 무엇인가? 웹 개발의 첫걸음

 

안녕하세요. 최삐뚤빼뚤씨입니다.

 

오늘은 웹 개발에 대해 알아보려고 해요.

웹 개발을 시작하려면 먼저 HTML이라는 언어에 대해 이해하는 것이 중요한데요.

HTML은 HyperText Markup Language의 줄임말로, 웹페이지를 만들기 위해 사용되는 언어입니다.

이 언어를 통해 웹페이지의 구조와 내용을 작성할 수 있어요.

웹 개발을 시작하는 분들에게는 반드시 알아야 할 첫걸음이죠!

 

아마 처음 보신 분들은 HyperText가 뭔지, Markup Language는 뭔지 어려우실 수 있어요.

하나씩 차근차근 설명 드리도록 하겠습니다.

모두 웹 개발의 기본이 되는 내용들이니 잘 숙지하시기 바랍니다😊

 

참고로, 저는 없는 대학생 용돈을 탈탈 털어.. 구매한..

'Do it! HTML5+CSS3 웹 표준의 정석' 책을 기반으로 공부 후

추가 내용들을 덧붙여 게시글을 작성하고 있습니다 :)

---

 

1. HTML이란 무엇일까?

컴퓨터에서 사용하는 모든 파일에는 각각의 고유 형식이 있습니다.

웹 사이트에서 사용할 문서에서는 웹에 맞는 형식인 *.html(또는 *.htm) 확장자를 붙여 구분합니다.

엑셀과 같은 일반 문서는 내용 입력 프로그램과 내용 확인 프로그램이 'Excel'로 동일합니다.

 

하지만 웹 문서는 문서를 작성하는 프로그램과 내용을 보는 프로그램이 서로 다릅니다.

웹 문서를 작성하는 프로그램을 '웹 편집기', 웹 문서를 보는 프로그램을 웹 브라우저라고 합니다.

 

웹 문서의 확장자 *.html
웹 문서 작성 ➡️ 웹 편집기(web editor)
웹 문서 확인 ➡️ 웹 브라우저(web browser)

 

 

그렇다면 HTML은 무엇일까요?
HTML은 HyperText Markup Language의 줄임말입니다.

여기서 하이퍼텍스트(HyperText)란, 링크를 클릭해 다른 문서 혹은 사이트로 즉시 이동할 수 있는 기능을 의미하고,

마크업(Markup)이란, 태그를 사용해 제목/본문/사진 등을 표시하는 것을 의미합니다.

태그(Tag)는 아래의 사진에서 꺽쇠 괄호로 묶인 부분입니다.(<, >)

 

즉, 웹에서 자유롭게 링크로 오갈 수 있는 웹 문서를 만드는 언어가 HTML인 것입니다.

 

HyperText Markup Language(HTML)
HyperText ➡️ 링크로 이동 가능
Markup ➡️ 태그 사용해 문서 작성
HTML ➡️ 링크로 이동할 수 있는 웹 문서를 작성하는 언어

---

2. 웹 표준이란 무엇일까?

HTML5를 웹 표준 기술이라고 합니다.

그런데 웹 표준은 무슨 의미일까요?

 

예를 들어 신발을 산다고 가정해봅시다.

신발 사이즈는 모두 표준화된 치수를 사용하여 만들어집니다. 보통 mm단위를 사용하죠.

하지만 이런 표준 치수가 없다면, 온라인으로 신발을 구매하기 어려울 뿐더러

오프라인 매장에서도 신발을 하나하나 신고 사야할 것입니다.

 

HTML도 마찬가지입니다. 어떤 웹 문서는 크롬 부라우저에서만, 또 어떤 웹 문서는 마이크로소프트 엣지, 또 다른 것은 네이버 웨일, 사파리... 등등에서만 열린다면 큰 불편함이 있을 것입니다.

 

웹 표준은 이를 해결하기 위해 존재합니다.

웹 사이트를 만들 때 지켜야 하는 일종의 약속입니다.

 

이렇게 정해진 웹 표준을 지켜 개발을 한다면

일반 사용자는 장소, 기기, 브라우저에 상관없이 쉽게 웹사이트를 확인할 수 있고

웹 개발자와 디자이너들은 작업 시간을 절약할 수 있습니다.

 

HTML5는 웹 표준 기술
장소, 기기, 브라우저에 상관없이
웹사이트를 확인할 수 있게 개발하기 위함

---

3. 왜 HTML5와 CSS3를 공부해야 할까?

웹 개발자가 되려면 왜 꼭 HTML과 CSS를 알아야 할까요?

HTML이 뭔지도 알겠고 웹 표준인 것도 알겠는데, 그래서 왜 배워야 하지 싶을 수도 있습니다.

 

 

 

 

1️⃣ 최신 웹 표준에 맞는 웹 사이트를 제작할 수 있습니다. (개발)

우리가 살고 있는 시대는 4차 산업혁명을 거치고 있습니다.

이제는 모든 사물에 인터넷이 연결될 수 있는 수준인데요, 이를 IoT라고도 하죠.

이 모든 기기에서 웹 사이트를 확인하기 위해 각자 다른 언어로 따로 코딩한다는 것은 상당히 비효율적입니다.

따라서 모든 웹 브라우저에서 똑같이 준수하는 표준이 HTML5인 것이죠.

 

HTML5를 배우고,이 문법을 사용한다면 노트북, 데스크탑, 스마트폰 뿐만 아니라

가전기기, 자동차를 비롯해 모든 기기에서 웹 문서를 확인할 수 있습니다.

CSS3까지 더해진다면 화면 크기에 맞추어 레이아웃이 바뀌는 '반응형 웹 디자인'도 가능하게 됩니다.

 

 

2️⃣ 웹과 더불어 '앱' 화면을 디자인하기 위한 기초입니다.

HTML5와 CSS3는 전문가들이 아닌 누구나 애플리케이션을 개발할 수 있게 합니다.

모바일용 앱, 운영체제와 상관없이 실행 가능한 웹앱 등

사용자에게 보여주는 화면은 최신 웹 표준인 'HTML5'와 'CSS3'를 사용해 디자인합니다.

 

cf) 아이폰 앱이나 안드로이드 앱을 제작하는 프로그래밍 언어는 따로 있지만

앱 화면에 보여주는 정보들 자체는 'HTML'과 'CSS'로 제작합니다.

 

 

3️⃣ 소스를 이해해 웹 사이트와 블로그를 수정하기 쉽습니다.

HTML5를 몰라도 웹 사이트와 블로그를 정해진 테마나 규격으로 수정 가능하지만,

HTML5와 CSS3를 이용한다면 사이트 전체를 원하는 대로 바꿀 수 있습니다.

 

---

 

 

이렇게 웹 개발의 첫 걸음을 저와 함께 내딛으셨습니다!

HTML은 웹 개발의 출발점이며, 특히 프론트엔드 개발자에게 필수적인 기술입니다.

기초를 탄탄히 다지고 나서 CSS, 자바스크립트 등 다른 웹 개발 기술을 익히는 것도 추천합니다. 🚀🌈