HTML의 특징
(1)HTML은 마크업 언어입니다. 마크업 언어(markup 言語, markup language)란 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지입니다.
(2)또 다른 말로 표현하면, 우리가 보는 웹 페이지가 어떻게 구조화되어 있는지를 브라우저로 하여금 알 수 있도록 하는 언어입니다.
(3)HTML은 프로그래밍 언어가 아닙니다.
HTML의 요소
예시를 하나 보겠습니다.
<p>You are better</p>
<p> : 여는 태그 (Opening Tag), 요소의 이름(p)과 열고 닫는
꺽쇠 괄호로 구성됩니다.
</p> : 닫는 태그 (Closing Tag), 요소의 이름 앞에 슬래시(/)가 있습니다.
사용한 요소가 닫는 태그를 필요로 할 때에는 닫아줍니다.
You are better : <p></p>사이에 들어가 있는 문구로, 요소의 내용입니다. 단순한 텍스트를 작성했다고 보시면 됩니다.
요소의 이름은 대소문자를 구분하지 않지만 가독성에 있어서 소문자로 작성하는 것을 권장합니다.
즉,<HTML></HTML>보다는 <html></html>로 사용합니다.
VisualStudioCode에서 html 파일을 생성해보겠습니다.
html 단어를 치면서 자동완성 기능이 실행되는데, (1)html, (2)html5, (3)html:xml 중 선택할 수 있습니다.
(1)html
html5를 클릭하면 아래와 같이 완성됩니다. 조금 더 업그레이드된 버전입니다. 여러 태그가 함께 들어가 있습니다.
(2)html5
(3)html:xml
예시
위 사진은 VisualStudio Code에서 작성한 html5 예시입니다.
예시 설명
<!DOVTYPE html> : html5 시작을 알리는 선언입니다.(형식상 사용합니다.)
<html lang = "ko"> : 한국형 웹 컨텐츠 접근성 지침에서 웹 페이지의 head요소 안에 페이지의 기본 언어 선언을 규정하고 있습니다. 따라서 화면 낭독 프로그램이 언어를 인식하여 자동으로 음성을 변환
하거나, 해당 언어에 적합한 발음을 제공 할 수 있도록 하기 위해 정의하는 부분입니다.
<mata charset = "UTF-8"> : charset 웹 부라우저는 문서를 표시할 때 변환하는 처리작업입니다.
즉, 인코딩을 하게 되고 파일이 '어떤 언어로 되어 있는지 지정'이 필요합니다. 이를 charset이라고 한다.
인코딩 방식이 서로 맞지 않으면 문자가 깨질 수 있으며, 전 세계의 다양한 웹 페이지 인코딩 방식은 대부분 UTF-8이고(그래서 보통 한글 깨짐 수정시 UTF-8로 설정합니다.), 다국어를 지원하기 때문에 개발시 UTF-8인코딩 방식으로 개발합니다. 한국어는 MS949, UTF-8, ECU - KR 등 많은 인코딩이 지원하지만,
완성형과 조합형의 구분으로 인해 조합형인 UTF-8을 default로 사용하는 것이 좋습니다.
<mata name = "description" content = "페이지설명, 45자이내">
검색엔진이 페이지 내용을 파악할 때 기본으로 사용하는 데이터이므로, 제목과 설명은
페이지를 잘 표현할 수 있도록 페이지마다 고유하게 작성합니다.
<title>태그
해당 페이지의 타이틀 태그입니다. 브라우저로 실행시 나타나지는 않는 부분입니다.
<h>태그
기본적인 문구 및 문장을 작성해서 브라우저로 실행시 나타나는 부분입니다. (나중에 더 자세히 포스팅합니다.)