HTML 문서 및 CSS 그리고 Javascript 파일을 이용하여 개발을 하는데
항상 가깝게 파일을 다루면서도 한 번도 정확하게 판단하지 않은 그냥 습관적으로 검색해서 복사해서
사용하거나 했던 것을 요번에 정확하게 공부했던 내용을 상기시키면서 기록을 남겨본다.
HTML의 기본 문서
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
</body>
</html>
첫 번째 줄에 시작하는 <! DOCTYPEP html> 이 것은 문서 유형 선언 부분인데,
문서 유형 선언은 웹 브라우저가 HTML 사양에 따라 "표준 모드"에서
문서를 "렌더링"(표시)할 수 있도록 모든 HTML 문서의
첫 번째 줄 시작 부분에 나타내야 한다.
<! DOCTYPE HTML> 문서 유형 선언
<! DOCTYPE HTML>, <! DOCTYPE html>, <! Doctype Html>, <! doctype html>
이런 식으로 대소문자가 섞어있다거나,
아니면 아예 대문자 혹은 소문자로 되어 있는 것을 봐 왔을 건데
기능적으로 아무런 문제가 없다.
그냥 자신이 보기 편할 대로 적어서 사용하면 된다.
<html lang="kr"> 언어 선언
이제 html 태그 시작 부분에 사용할 언어를 선언하는 부분이다.
<html lang="kr">, <html lang="en"> 등등.. 각 나라에 맞는 코드는 아래 사이트 가면 각 나라별로
사용하는 코드를 확인할 수 있다.
https://www.w3schools.com/tags/ref_language_codes.asp
HTML ISO Language Code Reference
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
HTML 페이지의 언어를 선언해야 하는 이유는 HTML 코드의 언어 사양은
검색 엔진이 다른 국가의 사용자에게 올바른 검색 결과를 표시하는데 도움이 되기 때문이다.
페이지의 언어가 HTML 코드에 명시적으로 지정되지 않은 경우
검색 엔진은 다른 요소를 기반으로 언어를 결정하려고 시도해서 이러한 이유로 잘못된 해석으로 이어질 수 있다.
번역 서비스 작업을 용이하게 하기 위해 HTML 페이지 내에서 언어 선언은 하는 게 좋다.
<meta charset="utf-8"> 문서의 character 인코딩 선언
https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
head 태그에는 무엇이 있을까? HTML의 메타데이터 - Web 개발 학습하기 | MDN
HTML의 head는 페이지를 열 때 웹 브라우저에 표시되지 않습니다. head는 <title> 같은 페이지나, CSS의 링크(HTML 컨텐츠를 CSS로 스타일링하기를 원한다면), 파비콘(favicon), 그리고 다른 메타데이터(작
developer.mozilla.org
저 사이트에 말을 인용하면
이 요소는 문서의 character—문서에서 허용하는 문자 집합(character set)— encoding에 대해서 간단히 표시하고, utf-8 은 전 세계적인 character 집합으로 많은 언어들을 문자들을 포함한다고 한다.
이는 웹 페이지에서 어떤 문자라도 취급할 수 있다는 것을 의미하고,
따라서 작성할 모든 페이지에서 character 집합을 utf-8로 지정하는 것이 좋다.
<meta name="viewport" content="width=device-width, initial-scale=1"> 뷰포트
이 메타 태그도 상당히 많이 봐왔을 거다.
이 메타태그를 정의하자면,
화면에 보이는 영역을 제어하는 기술로 미디 워 쿼리로 수많은 기기의 화면 크기를 감지해야 할 때 필요한 것.
데스크톱은 사용자가 지정한 해상도에 따라 보이는 영역이 결정되지만
스마트기기는 기본 설정값이 자동으로 보이는 영역으로 설정되기 때문에 미디어 쿼리를 사용해도
스마트기기에서 화면의 크기를 정확하게 감지하지 못하여
스마트기기의 보이는 영역을 기기의 실제 화면 크기로 변경하여 미디어 쿼리가 기기의 화면 크기를 정확하게
감지할 수 있도록 하기 위해 뷰포트라는 기술을 이용.
<title></title> 해당 문서의 제목을 적는 곳
해당 문서에 맞게 알맞은 제목을 넣어서 정의하면 된다.
필요 없다면 안 써도 무방하다.
<body></body> 해당 문서의 실질적인 내용이 들어가는 곳
바디 태그 안에는 실질적인 콘텐츠의 내용이 들어가는 곳이다.
여기에다가 구현하고 싶은 내용들이 들어가면 된다.
▶느낀점◀
이렇게 기본 문서에 대해 알아봤는데 그냥 이렇게 사용해서
다른 사람들이 이렇게 해와서 라는 이유로 써왔었는데, 개발자로서 너무 무심했었던 거 같다.
이렇게 어려운 내용이 아니었음에도 정확하게 알아서 사용하는 것과 그냥 사용해왔으니깐
그냥 쓰는 것과 지금이 너무 다르게 느낀다.
반성하고 제대로 된 공부를 하고, 이 지식을 꾸준히 남기도록 해야겠다.
'web 언어 > HTML5 & CSS & Javascript' 카테고리의 다른 글
| 웹 페이지(html 시멘틱) 구획 요소 태그 (tag), 웹접근성, 랜드마크 ARIA - 2 (0) | 2022.02.16 |
|---|---|
| 웹 페이지(html 시멘틱) 구획 요소 태그 (tag) - 1 (0) | 2022.02.15 |
| 자바스크립트 - 자동으로 유형이 변환되는 경우(자동 유형 변환) (0) | 2022.02.12 |
| 함수 호이스팅(Hoisting) (0) | 2022.02.10 |
| var 키워드는 사용하지 말자 (0) | 2022.02.10 |