이번 글은 지금까지 html 코드를 짜면서 계속 봐 왔던 html 코드의 기본 틀에 대해 설명하는
시간을 갖도록 하겠습니다.
atom과 같은 편집기에서 html의 자동 완성을 쓰면,
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
이렇게 html 코드의 기본 틀이 나오게 됩니다.
지금까지 포스팅을 하면서 자연스럽게 써 왔었는데 이 코드들에 대해 설명하겠습니다.
- <!DOCTYPE html>
먼저 맨 위에 뜨는 이 코드입니다.
이 Doctype은 html 태그는 아니지만 html 코드상 맨 위에 있는 이유는 이 doctype 선언은 html 버전을
의미하기 때문입니다.
현재 html은 여러 버전을 거쳐 html5까지 온 상태이며, 이 !DOCTYPE html을 선언함으로써 우리가
작성하려는 페이지가 html5 버전이라는 것을 알려주는 역할을 한다고 생각하시면 됩니다.
(html은 버전별로 지원하는 태그가 조금씩 다르기 때문에 이 역할은 중요합니다.)
예를 들어,
HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
이렇게 버전별로 선언하는 코드가 다 다른 것을 볼 수 있습니다.
그럼 현재 쓰는 저 코드는 우리가 작성하는 페이지가 html5 버전이라는 것을 알려주는 코드라는 것을
알 수 있겠습니다.
- <html lang="en" dir="ltr">
이 태그에서의 lang="en" 속성은 웹 접근성에 관련된 태그라고 일단 이해하면 됩니다.
한국형 웹 콘텐츠 접근성 지침(KWCAG) 2.1에는 웹페이지 안에 기본 언어 선언을 규정하고 있다는
지침이 있을 정도로 필히 명시해 줘야 할 속성입니다.
이 속성의 대표적인 것으로는 스크린 리더(화면 낭독 프로그램)기가 인식하는 값이 lang의 속성값이
되는데, TTS(텍스트 음성 변환) 엔진에 따라 다르긴 하지만 보통 en으로 속성값을 넣으면 스크린 리더가
한글을 인식하지 못하는 등의 문제가 발생하고는 합니다.
(쉽게 말해 스크린리더의 기본 문자셋)
그래서 페이지의 내용에 맞게 lang값을 지정하여 웹 접근성 규칙을 준수하는 것이 좋습니다.
그 다음의 dir="ltr" 속성인데, 이 속성은 요소의 쓰기 방향을 나타내느 열거형 특성입니다.
여기서 사용된 ltr 값은 우리가 보통 사용하는 언어의 왼쪽 > 오른쪽을 뜻하고, 아랍어 등에 사용되는
오른쪽 > 왼쪽은 rtl 값을 넣어주면 됩니다.
또한 auto는 기본적인 알고리즘으로 문자를 분석하여 알아서 결정해 줍니다.
- head 태그
지금까지의 html의 코드를 보면 css를 나타내는 style이라던지 페이지의 제목값을 나타내는 title 태그
등이 이 head 태그에 감싸져 있고, 아래의 body 태그 안에는 페이지 안에 들어갈 내용들이 들어가는
것을 볼 수 있습니다.
이런 정보들을 문서들의 메타데이터(문서 정보)라고 하며, 코드를 실행시켰을 때 기계가 식별할 수 있는
메타데이터들이 이 head 태그 안으로 들어가는 것입니다.
그럼 어떤 것들이 들어가는지 위의 예시 코드를 통해 한 번 살펴볼까요?
1. meta charset
이 태그는 일단 말하자면 html 파일의 인코딩을 알려주는 태그입니다.
쉽게 말해서 브라우저에게 text를 어떻게 그려달라는지 표시해 주는 태그인데, 이 태그가 없으면
한글이나 특수문자들이 깨져서 나올 수 있습니다.
여기서 인코딩이란, 쉽게 말해 컴퓨터의 HTML 파일을 웹브라우저에서 표시될 수 있도록 변환하는
처리작업을 이야기하는데, 상황 이해를 위해 저 meta charset 태그를 넣었을 때와 없앴을 때 실행
결과를 보도록 하겠습니다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
안녕하세요.
</body>
</html>
meta charset 태그를 넣었을 때 정상적으로 출력되는데,
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title></title>
</head>
<body>
안녕하세요.
</body>
</html>
meta charset 태그가 없으니 글자가 깨져서 보이게 됩니다.
여기서 utf-8은 문자 인코딩 방식 중 하나로, 가장 많이 사용되는 방식입니다.
2. title 태그
이 태그는 예시를 보면 바로 이해가 되니 예제 코드를 작성해 보겠습니다.
이렇게 위의 코드처럼 title값을 넣지 않은 상태로 실행되었을 때, 브라우저 위에는 이렇게 해당 코드의
파일 경로가 제목 대신 나오게 됩니다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>HELLO</title>
</head>
<body>
안녕하세요.
</body>
</html>
하지만 이렇게 title 태그에 값을 넣으면, 그 값이 제목으로 표시되게 됩니다.
이렇게 해당 페이지에 대한 정보들(메타데이터)이 담기는 부분이 바로 head 태그인 것이고,
아래의 "안녕하세요" 텍스트와 같은 페이지에 나타나는 내용들이 담기는 부분이 바로 body 태그가
되는 것입니다.
오늘은 html 코드의 기본 틀에 대해서 알아보는 시간을 가졌습니다.
에디터를 사용하면 자동완성으로 기본 틀 코드가 짜여지지만, 한 번 쯤은 이게 이런 의미를 갖고 있구나,
라는 것도 생각해보시면 좋겠다는 마음으로 이번 글은 마무리 짓겠습니다.
'웹 개발 > 주요 태그, 속성들' 카테고리의 다른 글
| css line-height 속성 (0) | 2021.12.17 |
|---|---|
| css position 속성 (0) | 2021.12.17 |
| css 미디어쿼리(ft.반응형 웹) (0) | 2021.12.17 |
| display grid 속성 (0) | 2021.12.17 |
| display flex 속성 (0) | 2021.12.17 |
댓글