HTML 시작하기
목차
어디서 부터 HTML을 시작하는게 좋을지 한번 보겠습니다.
일단 HTML이 구동하는 개발환경을 구축해야 합니다. 그럴려면 통합 개발환경을 설치하는게 제일 합리적이죠.
다만 요즘에는 Replit같은 사이트에 구글아이디를 사용하면 온라인 REPL 환경에서 코드를 작성할 수 있어서 굳이 개발자 도구를 나의 PC에 설치하지 않더라도 학습은 가능합니다. 학원 등 오프라인 강의에서는 프로그램을 설치하고 관리할 필요가 없어서 온라인 REPL 을 사용하는 경우도 많습니다.
하지만 결국 웹개발자는 통합개발환경과 가장 많은 시간을 보낼 것 이고 각 IDE에 따른 다양한 확장 기능을 사용하면서 자신의 스타일을 만들기 위해서는 개인 PC에 HTML 개발환경 구축(웹개발 환경)을 하는 것을 권장합니다. REPL 사이트는 이동하다가 나의 PC가 없을 때 온라인으로 코드를 작성해야 할 때 사용하면 유용합니다. 온라인 오프라인 어느 한쪽만 사용해야할 이유는 없습니다. 상황과 필요에 따라 적절히 사용하면 됩니다.
HTML을 위한 비주얼 스튜디오 코드 설정 등은 아래 포스팅을 참고합니다. 초기에는 HTML 인텔리센스와 라이브 서버 정도를 설치하면 충분할 것 입니다. 확장 플러그인을 처음에 너무 많이 설치하는 것 보다는 하나씩 테스트 하면서 익숙해지는게 좋습니다. 너무 많이 적용하면 이게 어디서 적용된건지 헷갈리기 쉽습니다.
HTML5 기초 | 비주얼 스튜디오 코드 설치와 초기설정, 테마, 실행 테스트 (tistory.com)
다운로드는 아래 MS 사이트에서 받으면 됩니다.(오픈소스에 무료입니다)
Visual Studio Code – 코드 편집기 | Microsoft Azure
HTML 학습의 장점
HTML 을 배울 때 좋은 점은 실행결과를 바로바로 확인할 수 있다는 점 입니다. 프로그래밍 언어라는게 내부 로직이 도는 것이 보이지 않습니다. 그 모든 과정을 다 정확하게 구현해야 하나의 프로그램이 동작하기 때문에 디버깅이라던가 어려움이 많습니다. 하지만 HTML 은 그냥 문서의 구조(structure)와 프레젠테이션(presentation) 에 대한 정보가 써있는 것 이라서 그냥 써내려가면 됩니다. 치명적인 오류같은 것은 나지 않습니다. 그런 오류가 있더라도 HTML 을 처리하는 브라우저 엔진(browser engine)이 적당히 표시가 되도록 합니다. 즉 HTML 에는 코딩에 있는 실행 오류라는게 없습니다. 실행하는게 아니기 때문이죠.
브라우저에 뭔가 프로그래밍 오류가 떴다면 그것은 자바스크립트나 서버의 응답에 관련한 내용입니다.
*참고로 MS 오피스 같은 워드 프로세서 내부에도 일종의 태그가 적용됩니다. 글자를 쓰고 거기에 특정한 효과 (글자크기, 폰트 종류, 굵기 등 )를 적용하는 방식입니다. 다만 워드프로세서에는 화면에 결과물이 나오기만 하고 HTML 파일처럼 구조가 보이지는 않지요. 워드의 사용자는 내부 태그를 들여다 볼 필요가 없기 때문입니다. 웹브라우저의 사용자들도 마찬가지이죠. 그래서 웹디자인과 개발하는 사람들이 HTML 파일을 들여다 봐야 합니다. 워드를 사용해본 경험이 있다면 HTML 파일의 개념에 익숙해진데 오랜 시간이 걸리지 않을 겁니다. 워드에서는 마우스로 드래그 해서 효과를 적용했다면 HTML에서는 태그를 직접 코딩해주는 것 입니다. 처음에는 코딩이 익숙하지 않을지라도 하다보면 훨씬 더 명쾌하고 많은 일을 할 수 있습니다.
자, 그렇다면 HTML의 기초 태그에 대한 실습을 해봅니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>HTML Tag H1</h1>
<h2>HTML Tag H2</h2>
<h3>HTML Tag H3</h3>
<h4>HTML Tag H4</h4>
<h5>HTML Tag H5</h5>
<h6>HTML Tag H6</h6>
<hr>
<p>
이것은 첫번째 문단입니다. <b>볼드</b> <em>강조</em>
</p>
<p>
이것은 두번째 문단입니다.
</p>
<hr noshade="noshade">
</body>
</html>비주얼 스튜디오 코드의 라이브 서버를 사용하면 파일을 저장할 때 마다 실시간으로 새로고침 해줘서 편리합니다.
위의 HTML 코드의 body 안의 내용을 실행하면 아래처럼 실행됩니다.
HTML Tag H1
HTML Tag H2
HTML Tag H3
HTML Tag H4
HTML Tag H5
HTML Tag H6
이것은 첫번째 문단입니다. 볼드 강조
이것은 두번째 문단입니다.
h태그
h태그는 1부터 6까지 있습니다. 크기에 차이가 있고 h1으로 갈수록 더 중요한 상위의 제목과 주제를 나타냅니다. 아무 태그에나 h1 태그를 사용하지 않는 것은 구글 등 검색엔진의 검색봇에게 좀 더 정확한 정보를 전달할 수 있게 합니다. 기능적으로 우리가 보는 것은 그냥 크기입니다만. 이것들은 CSS 스타일 시트로 각자 다 편집할 수 있습니다. 그러므로 보이는 것으로 판단하는게 아니라 HTML5의 표준을 지키는 쪽으로 태그를 선택하는게 구글SEO 등 검색최적화에 유리합니다.
이걸 기능적으로만 이해하면 그냥 h1은 제일 크고 굵고 h1은 제일 작고 얇고 그렇게 생각할 수 있는데 아닙니다. h1 – (head first) 첫번째로 중요한 제목이나 주제가 들어가고 2, 3, 4 … 순으로 중요도가 낮아지는 것 입니다. 워드프레스에 보면 h 태그의 순서에 따라 자동으로 색인을 생성해주는 플러그인이 있는데 h 태그로 만든 구조가 바로 목차라고 보면 됩니다. (table of content) 검색엔진은 이 h 태그를 바탕으로 목차를 생성합니다. 우리가 새로운 책을 들고 처음 보는게 목차입니다. 목차를 보고 이 책의 전체적 내용과 방향성 등을 파악하고 세부 내용을 볼지 말지 판단합니다. 구글 검색엔진도 마찬가지 입니다. h 태그는 단순한 문서의 구조 이상으로 내용적인 구조를 담고 있다고 판단하기 때문에 h 태그를 잘 쓰는 웹사이트는 검색엔진 노출에 유리합니다.
대부분의 HTML 책에는 SEO 에 대한 내용은 거의 안나와 있는데, 그런 식의 학습은 한계가 있습니다. 구글 검색엔진에 한페이지라도 더 노출시키기 위한 것이 웹의 목적이라면 처음부터 h태그 부터 개념을 잡아야 하는 것이죠. 사실 h 태그만 잘 써도 검색엔진 노출에 상당한 도움이 됩니다. 이런 것을 시멘틱웹(semantic web)이라고 단순히 HTML 태그의 문법과 기능적인 내용만 보는게 아니라 구조와 카테고리에 대한 메타데이터가 사용되는 것 입니다.
meta 태그
위의 HTML head에는 meta 태그가 있습니다. 이들 meta 태그들도 검색엔진에게 문서의 성격을 알려주는 것 입니다. 이것은 모바일에 최적화되어 있다. 특정의 브라우저에 호환이 된다. UTF-8(유니코드 인코딩 방식)이 적용된다. 하나씩 다 의미가 있습니다. 보통은 스켈레톤의 디폴트 값을 사용하고 모바일 호환성을 강화한 반응형 웹을 만들 때 손을 조금 볼 때가 있습니다. (웬만하면 반응형에 관한 부분은 CSS에서 처리함)
p태그
p태그는 문단입니다. 주로 본문을 나타낼 때 사용합니다. CSS의 속성과 함께 하나씩 배우겠지만 p 태그는 블록 형태입니다. 블록(block)은 태그가 끝나면 다음 칸으로 내려가는 형태로 이와 반대인 인라인(inline) 속성은 옆으로 쭈욱 갑니다.
처음 HTML을 접했다면 아직 머리속에 개념이 그려지지 않을테니 일단 p 태그는 문단, 본문 내용을 적는 곳이다. 라고 알아두면 좋습니다. h 태그를 제목으로 쓰고 p 태그 안에 본문을 채워넣는 형태라고 생각하면 됩니다. 우리가 글쓰기 할 때 제목 쓰고 내용적는 것 처럼 HTML 도 그렇게 한다고 보면 됩니다. 실제 티스토리나 네이버 블로그를 작성해서 에디터에서 글을 쓰면 제목과 본문에 적용되는 태그가 다릅니다. 제목에는 보통 h1 태그가 붙고 본문에는 p 태그 블록쌓기로 html 을 만드는 블로그들이 많습니다. 그 이유도 마찬가지로 시멘틱 웹에 기본적으로 맞추려고 하기 때문입니다.
요약
HTML 을 시작하면서 가장 첫번째로 알아야 할 h 태그와 p 태그를 다뤄봤습니다. h 태그를 구현하는 것은 쉽습니다. 하지만 아무 곳에나 h 태그를 남발하면 검색엔진에게 좋은 문서가 아닙니다. 목차가 정리안된 책처럼 사람이 봐도 별로길 겁니다. 그래서 h1 의 기능과 함께 사용하는 법을 알아야 합니다. 이런 내용은 주로 해외 워드프레스 강의에 잘 나와 있는데 우리나라에서는 네이버 블로그를 다들 많이 해서 상대적으로 덜 알려진 내용입니다.
가장 기초적인 태그들이라 별로 할 이야기가 없을 수도 있고 그냥 쉽다고 넘길 수 있는 내용입니다. 그게 아니라 웹사이트나 웹앱 등을 기획할 때는 어떤 태그를 어디에 써야 최적의 효과를 낼 수 있는지 좀 생각해 볼 필요가 있습니다.
참고문서
HTML, CSS, JS Online Compiler & Interpreter – Replit
<h1>–<h6>: HTML 구획 제목 요소 – HTML: Hypertext Markup Language | MDN (mozilla.org)