본문 바로가기

HTML 쉽게 배우기| HTML 소개

by Learn, Code, Repeat 2020. 9. 13.
반응형

웹 개발에 관심 있으신 분?

블로그를 더 잘 사용하고 싶어서 HTML을 배우고 싶으신 분?

 

목적이 뭐든 누구나 쉽게 배울 수 있는 HTML 블로그입니다.

 

개인적으로 서론이 긴 거 별로 안 좋아하는데, 그래도 HTML이 뭔지는 설명해야 될꺼같아서 간단하게 해 볼게요.

 

HTML은 HyperText Markup Language (하이퍼텍스트 마크업 언어)의 약자입니다.

이게 무슨 말이냐면, 우리가 인터넷 할 때 사용하는 브라우저에 내용을 표시할 수 있는 문서를 작성할 때 사용하는 컴퓨터 언어입니다.

 

웹 사이트든 블로그든 브라우저에서 볼 수 있으려면 HTML 문서가 필요합니다.

이 문서는 태그와 요소들로 이루어져 있으며 이 요소들을 브라우저가 번역해서 우리가 보기 쉽게 표시해 줍니다.

 

좀 더 간단하게 설명하자면,

태그가 식재료라고 하면 요소는 그 재료로 만든 음식이고, 이 음식들이 모여서 브라우저에는 완성된 요리가 보이는 거죠.

 

이렇게 태그와 요소들로 문서를 작성하면

네이버 HTML

브라우저에는 이렇게 보이죠

네이버 홈

 

물론 HTML하나만 가지고 이렇게 할 수 없습니다.

 

웹 개발의 기본은 HTML, CSS, JavaScript로 이루어져 있고, 이 외에 더 많은 것들이 합쳐져야 네이버 같은 웹사이트가 만들어집니다.

 

우리는 웹 개발의 기본 중에 하나인 HTML을 먼저 알아볼 거예요.

왜냐하면 HTML이 웹 개발을 뼈대이기 때문입니다. 뼈대 없이 집못짓는 것처럼 HTML을 모르는 상태로 웹 개발하기는 어렵습니다.

 

 

 

본격적으로 시작하기 전에 프로그램 하나만 설치할게요.

VSCode라는 텍스트 에디터인데, HTML작성을 쉽게 할 수 있는 기능들이 있어서 많은 개발자들이 애용하는 프로그램입니다.

텍스트 에디터는 워드프로세서처럼 웹 문서들을 작성할 때 사용하는 웹 개발 전용 워드프로세서라고 보시면 됩니다.

그렇다고 MS워드를 사용해도 된다는 말은 아닙니다. MS워드 같은 사무용 워드프로세서로 하면 안돼요.

 

VSCode 없이 메모장을 사용해도 되지만, 많이 불편하기 때문에 VSCode를 설치하는 걸 추천합니다.

 

VSCode 다운로드

 

Download Visual Studio Code - Mac, Linux, Windows

Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications.

code.visualstudio.com

 

 

다음 편에서 HTML을 본격적으로 시작하겠습니다.

 

끝!

댓글