홈페이지 만들기 HTML 강좌 2 - 설정 및 기본 구조

웹 프로그래밍은 크게 소스코드를 작성할수 있는 '웹 편집기'와 결과화면을 볼 수 있는 '웹 브라우저'로 나누어져 있습니다. 웹 편집기와 웹 브라우저는 한 가지로 고정되어 있는 것이 아니라 종류가 정말로 다양합니다. 우리는 이 중에 각각 하나를 택해 소스코드를 작성하고 결과 화면을 볼 것입니다.

# HTML 환경설정 및 기초

웹 브라우저

네이버, 구글, 페이스북 등등 우리가 접속하고 싶은 사이트를 쉽게 접근할 수 있도록 도와주는 프로그램을 웹 브라우저라고 하는데요. 웹 브라우저는 웹 편집기로 작성한 웹 문서를 화면에 표시해 주는 역할을 합니다. 현재 많은 브라우저가 존재하며 그중 사용자가 많은 대표적인 웹 브라우저만 정리해보았습니다.

각 브라우저마다 장단점이 존재하지만 2018년을 기준으로 사용 현황을 보면 크롬이 압도적으로 1위이네요. 제 포스팅 또한'크롬'을 기준으로 설명드리려고 합니다. 기본으로 내장되어 있는 개발자 도구나 확장 프로그램을 통해 개발자에게 친절하기 때문입니다. 만약 크롬이 설치되어 있지 않으시다면 <구글 검색>-<크롬>에서 설치를 진행해 주시길 바랍니다.

웹 편집기

웹 편집기는 웹 문서를 만들 때 HTML 태그를 입력하는 프로그램을 말합니다. HTML 소스를 웹 편집기에 입력하고 html확장자로 저장한 후 웹 브라우저로 실행하면 바로 결과창을 확인할 수 있는데요. 사실 HTML 소스를 작성하는 데에는 복잡한 프로그램이 필요하지 않습니다. 윈도에 기본으로 포함되어 있는 메모장으로도 이용 가능한데요. 어떤 프로그램이든 텍스트를 입력할 수만 있다면 모두 가능합니다.

제 포스팅에서는 웹 편집기인 'notepad++'을 기준으로 설명할 것입니다. 자동완성뿐만 아니라 색으로 태그들을 구분 지어 주는 프로그램입니다. 또한 프로그램 용량이 크지 않아 쉽게 다운로드하여 사용할 수 있습니다. notepad++ 설치 경로는 네이버에 notepad++검색 후 사이트에서 <download>에서 다운로드한 뒤 설치하시면 됩니다.

HTML 기본 문서 구조 - 태그

HTML은 웹 문서에 마크업 하는 언어입니다. 어디가 텍스트고, 어디가 비디오고, 어디가 이미지인지 표시하는 것을 마크업이라고 하는데요. 마크업 시 사용하는 약속된 표기법을 '태그'라고 합니다. 태그는 웹 문서를 화면에 표시하기 위한 가장 기본적인 언어이기 때문에 정확히 알아야 합니다.

태그는 <와 >를 이용해 구분한다 - 태그를 사용하겠다는 선언은 꺽쇠 표시입니다. 예를 들어 <img>라는 태그는 이미지를 표시하겠다는 선언이고 <p>는 문단을 삽입하겠다는 선언입니다. 꺽쇠 표시 안의 내용이 화면에 무엇을 표시할지를 결정합니다.

태그는 소문자를 쓴다 - HTML은 대소문자를 구별하진 않지만 태그와 태그 안의 내용물들은 모두 소문자를 사용할 것을 권장합니다.

여는 태그와 닫는 태그 - 대부분의 태그는 [<p>,</p>],[<body>,</body>] 처럼 여는 태그를 선언했다면 닫는 태그가 붙기 마련입니다. 물론 <img>나 <br> 태그처럼 닫는 태그가 없는 경우도 있지만 대부분의 태그는 이 법칙이 적용됩니다.

들여 쓰기 - 모든 언어의 공통된 사항입니다. HTML언어 또한 소스코드이기 때문에 개발자가 유지보수를 위해서라도 가독성 있게 작성하여야 합니다. 태그 간의 구별을 위해 들여 쓰기는 필수인데요. 소스를 들여 쓸 때 Tab키를 이용합니다.

태그는 속성과 함께 사용할 수 있습니다. - 태그는 단순히 태그 하나만 사용될 뿐만 아니라 여러 기능을 추가할 수 있습니다.

포함관계 명확히 한다 - 태그 안에 다른 태그가 포함될 경우 여는 태그 닫는 태그를 정확히 기입하여 포함관계를 명확히 해야 합니다.

위 6가지가 가장 기본이 되는 사항입니다. 꼭 숙지해야 합니다! 웹 문서를 많이 작성하다 보면 익숙해지실 겁니다

다음 포스팅에서는 HTML 문서 기본 구조를 살펴보겠습니다.

저작자표시 비영리 변경금지

'개발 > HTML_CSS' 카테고리의 다른 글

html 강좌 7 표(테이블) 관련 태그 정리, 간단하게 만들자 (0)	2020.01.11
html 강좌 6 목록 관련 태그 정리 (0)	2020.01.10
html 강좌 5 텍스트 관련 태그 정리 (0)	2020.01.09
홈페이지 만들기 html 강좌 4 - 기본 문서 구조 (0)	2020.01.08
홈페이지 만들기 HTML 강좌 1 - 웹 프로그래밍에 대해서 (0)	2019.03.26