HTML5 기본 문서
HTML 기본 문서의 <html> 요소는 <head>와 <body> 요소로 구성되어 있으며, <head> 요소 안에는 <meta>, <title>,
<link>, <style>, <script> 등의 요소들이 올 수 있습니다.
| 요소명 | 설명 |
|---|---|
| <meta> | HTML 문서의 설명, 키워드, 문서의 작성자 등을 지정합니다. |
| <title> | HTML 문서의 제목을 지정합니다. |
| <link> | 외부의 CSS 파일을 HTML의 문서에 연결할 때 사용합니다. |
| <style> | HTML 문서 내에서 스타일(CSS)을 정의합니다. |
| <script> | 자바스크립트를 HTML 문서 내부에서 정의하거나 외부에서 자바스크립트 파일을 불러올 때 사용합니다. |
예시1-1에서 <html lang="ko">나 <meata charest="URF-8">처럼 태그 내부에 부가적인 설정값을
선언하는 것을 속성(attribute)이라고 합니다.
lang 속성은 HTML 문서에서 사용하는 언어를 말하며 lang="ko"는 한국어, lang="en"은 영어를 의미
lang 속성이 중요한 이유는 시각 장애인들이 사용하는 스크린 리더 (음성낭독 프로그램) 에서 언어 설정에
따라 다르게 읽어 주기 때문입니다.
예를 들어 1, 2, 3의 경우 lang="ko"로 설정하였다면 '일, 이, 삼' 으로 읽어주며, lang="en"으로 설정하였다면
원, 투, 쓰리로 읽어 줍니다. 이러한 이유 때문에 lang 속성은 HTML 문서에서 꼭 정의해야하는 속성
중에 하나입니다. 만약, 주 언어를 "ko"로 설저하였는데 특정 부분에서 언어를 바꾸고 싶다면 해당하는 부분에만
iang 속성을 다른 언어로 지정할 수 있습니다.
<i lang="de">Ich liebe dich</i>
<meta> 태그의 charest 속성의 값 UTF-8을 '문자 인코딩(charest)' 방식이라고 하는데 UTF-8의 경우
거의 대부분의 문자를 처리 할 수 있기 때문에 HTML5의 문자 인코딩 방식을 주로 사용
또, <meta> 태그에서 알아 두어야 할 속성 중에는 name 속성과 content 속성이 있는데, 나중에
학습하게 될 CSS 파트에서 반응형 웹 기술을 사용하기 위한 속성입니다.
<meta charest=utf-8>
<meta name="viewport"
content=""width=device-width, initial-scale=1.0.minimum-scale=1.0.maximum-scale=1.0.user
scalable=no">
보통 뷰포트라고 하는데 모바일 해상도 (가로, 세로 보기)에 맞게 HTML 문서를 조절해 주는 속성들이라고 생각하면 된다.
참고로 HTML5 이전에 많이 사용한 XHTML 1.0 Transitional 버전의 DOCTYPE은 다음과 같습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/Xhtml1
/DTD/xhtml-transitional.dtd">
XHTML 1.0버전의 경우 HTML5 보다 문법적으로 조금 더 엄격합니다.
<meta name = "veiwport"/>
뷰포트는 문서를 조절 해주는 속성이다.
<style name = "veiwport"/>
<meta>태그의 charset 속성의 값 UTF-8을 문자 인코딩(charest) 방식이라고 하며, UTF-8을 주로 사용한다.