사회생활이나 무언가 일을 할때에 몇 가지 지켜야 할 사항이 있기 마련입니다. 일을 할때에도 주의사항 같은 것이 있으며 준수하지 않으면 불이익이 오기도 합니다. 프로그램 개발을 할 때도 마찬가지입니다. 프로그램을 만들 수 있는 개발언어는 각 언어마다 문법이 있습니다. 이것을 지키지 않고 개발하기는 불가능합니다. 그래서 무엇을 하든 몇 가지 사항을 습득하고 임해야 할 것입니다. HTML을 하면서 지금부터 설명할 몇 가지 사항을 지키지 않아도 크게 문제가 없지만 여러명과 공동으로 개발을 진행하거 가독성을 높이기 위해서는 이 사항을 지키는 것이 좋습니다. 아울러 이런 습관을 기른다면 다른 언어를 공부 할때도 기초가 튼튼해 질 것입니다. 참고로 저는 에디트플러스를 사용하여 HTML을 작성하였습니다. 저와 같이 따라해보고 실행하는 방법도 많은 도움이 될것입니다. 그럼 저와 함께 HTML을 하면서 기억해야 할 몇 가지 사항을 알아 보겠습니다.

에디트플러스를 사용하는 방법을 알고 싶으면 읽어보세요.

1. 태그는 소문자로 씁니다.

HTML태그는 대소문자를 구별하지 않습니다. 종종 다른 사람이 작성한 HTML소스코드를 보면 대소문자가 섞여 있는것을 볼 수 있습니다. 하지만 HTML태그를 소문자로만 쓰는것이 바람직합니다.

좋은 HTML태그

위의 그림을 보시면 모든 HTML태그가 소문자로 되어 있은 것을 알 수 있습니다. 이렇게 HTML태그를 소문자로 작성하는 것이 옳바른 방법입니다.

나쁜 HTML태그

위의 그림을 보면 HTML태그가 대소문자가 섞여 있는 것을 알 수 있습니다. 이것은 옳바른 방법이 아닙니다.

2. 여는 태그와 닫는 태그를 정확히 입력합니다.

HTML태그는 여는 태그와 닫는 태그가 존재하며 여는 태그는 있어도 닫는 태그가 없는 것도 있습니다. 먼저 여는 태그와 닫는 태그를 살펴보겠습니다.

그림을 보면 안녕하세요가 보일 것입니다. 는 여는 태그 즉 시작 태그  태그는 닫는 태그 즉 끝 태그를 의미합니다. 만약 와 같이 여는 태그를 작성한 상태에서 와 같이 닫는 태그를 작성하지 않으면 태그를 만날 때까지 태그 이후의 모든 내용은 태그 문법을 따르게 되는 오류를 범하게 됩니다. 매우 중요하므로 잘 알아야 합니다. 다음으로 여는 태그만 있는 경우를 살펴 보겠습니다.

그림을 보시면 <img src="book">책 이렇게 되어 있는 것을 볼 수 있는데요. 여기서 <img>태그는 여는 태그만 있고 닫는 태그는 없는 경우입니다. 이럴때에는 여는 태그 하나만 사용해야 합니다.

3. 적당한 들여쓰기를 적용합니다.

HTML태그를 작성하면서 띄어쓰기를 하는 경우는 종종일어 납니다. 그러나 아무리 띄어쓰기를 연속으로 해도 HTML태그에서는 한 칸의 공백으로 인식합니다. 그래서 HTML 소스를 작성할 때는 포함 관계는 필히 존재하게 되는데 이때 단계별로 들여쓰기를 하기위해 띄어쓰기를 여러번 입력하게 됩니다. 이것은 가독성을 높여주는 좋은 방법입니다. 그림으로 살펴 보겠습니다.

위의 그림을 보면 안녕하세요 이 부분에서 적당히 띄어쓰기가 되어 있는 것을 알 수 있습니다. 안녕하세요는 <div id="header"></div>태그 안에 포함되어 있습니다. 이 처럼 적당한 띄어쓰기를 하면 포함 관계를 쉽게 찾을 수 있습니다.

4. 인코딩 방식은 utf-8로 지정

웹 문서에 한글을 표시할 수 있도록 하려면 문자세트를 지정해 주어야 합니다. 이것을 문자 인코딩이라고 하는데, 주로 euc-kr 방식을 많이 사용했습니다. euc-kr은 영문과 한글은 표현할 수 있었지만 그 외의 언어는 표현 할 수 없었습니다. utf-8 방식은 한글과 영문뿐만 아니라 모든 언어를 표시할 수 있습니다. 하지만 꼭 utf-8만 고집하는 것은 아닙니다. euc-kr로 처리할 경우 용량을 적게 차지하므로 아직도 많이 사용되고 있지만 앞으로 한글과 영문뿐 아니라 다른 언어도 사용할 수 있는 경우가 생기므로 인코딩 방식을 utf-8로 지정하는 것이 좋습니다. 인코딩 방식을 어떻게 지정하는지 살펴 보겠습니다.

위의 그림처럼 <head></head>태그 안에 <meta charset="utf-8">를 작성하면 인코딩 방식을 지정한 것입니다. 지금까지 HTML태그를 작성할때 반드시는 아니지만 지켜야 할 사항을 몇 가지 알아 보았습니다. 단독으로 간단한 프로그램은 개발이 가능하지만 큰 규모의 프로젝트에서는 단독으로는 불가능하며 많게는 수십명이서 공동으로 개발하는 경우가 많습니다. 이때 모두가 지켜야 할 사항을 만들어 적용한다면 프로젝트 개발에 편리 할 것이라 봅니다. 지금까지 HTML 태그를 작성할 때 지켜야할 사항 몇 가지가 이에 해당됩니다. 이상으로 HTML5 문서를 만들기 전에 기억해야 할 몇 가지 사항을 마치겠습니다. 긴 글 읽어주셔서 감사합니다.

HTML이 무엇인지 알고 싶다면 도움 될 내용입니다.

HTML이 무엇이며 파일 형식 웹브라우저 알아보기

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

'프로그램 언어 > HTML5' 카테고리의 다른 글

HTML 주석 달아보기 HTML5 (0)	2020.06.24
HTML 텍스트 단락 만들기 <p> 태그 HTML5 (0)	2020.06.24
HTML 제목 표시하기 <hn> 태그 HTML5 (0)	2020.06.23
HTML 특수 문자 특수 기호 사용하기 HTML5 (0)	2020.06.23
HTML5 HTML이 무엇이며 파일 형식 웹브라우저 알아보기 (0)	2020.06.14