[html] html이란, 웹 브라우저와 웹 편집기

안녕하세요 강민성입니다.

요즘에는 웹 프로그래밍을 공부하고 있습니다.

그러기 위해서 가장 기초가 되는게 바로 html과 css 가 아닐까 생각되는데요.

이번 시간에는 그 중에서도 html에 대해서 배워보도록 하겠습니다.

html 이란 무엇일까?

html이란 하이퍼텍스트 마크업 랭귀지 (HyperText Markup Language)의 줄임말로 

하이퍼텍스트를 마크업하는 언어라는 의미입니다.

한 단어씩 이해해보면 하이퍼텍스트 란,

 웹사이트에서 링크를 클릭해 다른 문서나 사이트로 이동하는 기능을 말하고

마크업이란 태그를 사용해서 문서에서 어느 부분이 제목이고 본문인지,

 어느 부분이 사진인지 등을 표시하는 것을 말합니다.

글로는 이해가 안 갈 수 있지만 뒤에서 실습을 하면 무슨 말이었는지 이해할 수 있을 겁니다.

또한 컴퓨터에서 사용하는 파일들에는 각각의 형식이 있습니다.

가장 많이 접하게 되는 것 중 하나인 한글은 확장자가 .hwp로 저장이 되는걸 보신 적 있으실 겁니다.

이와 마찬가지로 웹도 웹에 맞는 형식이 있습니다.

그리고 그 웹의 확장자가 바로 .html 인거죠.

하지만 한글 엑셀 워드 등 일반 문서와 웹 문서는 크게 다른 점이 있습니다.

일반 문서와 같은 경우에는 입력하는 프로그램과 확인하는 프로그램이 같지만 웹은 그러지 않습니다.

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

웹 브라우저와 웹 편집기

웹 브라우저는 웹 편집기로 작성한 웹 문서를 확인하는 프로그램이라고 했습니다.

우리가 이미 많이 쓰고 있고 이름을 들으면 아! 하고 떠오르실 겁니다.

웹 브라우저로는

다음과 같은 친구들이 있습니다.

왼쪽부터 크롬, 파이어폭스, 인터넷 익스플로러, 사파리, 엣지 라는 웹 브라우저들입니다.

이미 사용하거나 익숙한 것도 보일테고 처음보는 웹 브라우저도 있을 겁니다.

각각에 따라서 html 에 지원하는 정도가 모두 달라 웹 브라우저를 고르는 것 역시 중요합니다. 

저는 크롬이 html 에 가장 잘 지원 해주고, 많은 사람들이 사용하기 때문에

 크롬 브라우저를 기본브라우저로 사용하겠습니다.

크롬 설치

https://www.google.com/intl/ko/chrome/

다음 url로 가시면 쉽게 크롬을 다운 받으실 수 있습니다.

다음으로는 웹 편집기를 알아보도록 하겠습니다.

사실 html 파일을 만들기 위해서는 메모장에 코드를 입력하고 확장자명만 html로 지정해주면 됩니다.

하지만 굳이 웹 편집기를 사용하는 이유가 있습니다.

여러 웹 편집기 중에서도 비주얼 스튜디오 코드(visual studio code) 를 사용하도록 하고

 그 장점을 살펴보도록 하겠습니다. 

비주얼 스튜디오 코드의 장점을 알아보자

1. 모든 OS에서 사용가능합니다.

말 그대로 visual studio code는 원도우, OSX, 리눅스 등 모든 OS에서 사용이 가능합니다.

저도 OSX 운영체제인데 vs code를 사용하고 있습니다.

2. 각 태그와 css 속성을 간편하게 입력할 수 있고 이에 대한 설명을 제공합니다.

이름의 일부분만 입력해도 그 부분이 포함된 태그나 css 속성이 표시되어 손쉽게 추가할 수 있습니다.

뿐만 아니라 그 부분의 설명도 제공됩니다.

추가적으로 닫는 태그를 작성시 </ 까지만 입력해도 자동으로 태그를 추가해줍니다.

3. 확장이 쉽습니다.

꼭 html이나 css 가 아니더라도 여러 프로그래밍 언어들을 통합해서 개발할 수 있습니다.

python, c, c++, c# ,Go 등 모두 가능합니다.

4. 무료입니다.

굳이 설명안해도 될거라고 생각합니다 :)

비주얼 스튜디오 코드 설치 및 실행

이제 vs code를 설치해보도록 하겠습니다.

https://visualstudio.microsoft.com/ko/

위의 url 로 접속하면 visual studio의 여러 제품들을 보실 수 있습니다.

그 중에서 저희가 다운로드 할 것은 vs code이므로 다운로드를 눌러주시면 됩니다.

위의 이미지는 OS와 웹 브라우저 마다 다를 수 있습니다.

설치를 모두 마쳤다면 html 파일을 vs code로 실행시켜 보겠습니다.

다음과 같이 html 이라는 확장자를 가진 폴더를 더블클릭하면...

새로운 웹 창이 뜨게 됩니다. 웹 편집기가 아닌 웹 브라우저가 실행되는 것이죠.

이를 vs code로 실행 시키기 위해서는

다음과 같이 오른쪽 마우스를 클릭해 visual studio code로 열어주어야 합니다.

그 결과,

다음과 같이 실행이 된 것을 볼 수 있습니다.

vs code에 대한 여러 기능과 조작법은 차차 알아가도록 하고

 기본적으로 색 테마 바꾸는 법만 알아보도록 하겠습니다.

이 역시도 os 마다 다를테지만 mac OS 를 기준으로 설명을 하자면,

상단 메뉴바에서 code -> 기본설정 -> 색테마 로 들어가시면 

원하는 색 테마를 고르실 수 있습니다.

저는 밝은 색 테마는 눈이 아파서 기본적인 어두운 테마를 사용하고 있습니다.

마무리

오늘은 기본적으로 html 이 뭔지에 대해서,

웹 브라우저와 편집기에 대해서 알아보았습니다.

환경설정은 항상 힘들고 지루한 작업으로 느껴질 수 도 있지만

다음 시간부터 이어질 재미있는 코딩을 기대하며

해내시길 바랍니다.

오늘도 제 글을 읽어주셔서 감사합니다 :)