먼저 HTML 세팅하면 아래와 같이 나온다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Document</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
</body>
</html>
<html lang="ko">해당 웹페이지가 어떤 언어로 만들어져 있는지 지정한다.
위 언어를 사용하는 이유는?
웹접근성 향상을 위해 필요하다.
문서에 txt가 있을 경우 시각 장애인이 페이지에 접근 했을 때 보조 수단을 통해 정보에 접근해야하기 때문에
(스크린리더기, 점자정보단말기 등)
주언어(lang="ko")가 명시되어 있으면 해당 언어에 알맞게 번역(점자, 소리)되어 올바른 해석으로 전달이 된다.
| 언어 코드의 대표 종류 | |
| 한국어 | ko |
| 영어 | en |
| 일본어 | ja |
| 중국어 | zh |
가끔 웹페이지를 보다가 lang="en-US" 이렇게 되어 있는 사이트도 봤었는데 이건 뭔가해서 찾아봤는데
<html lang="en -US ">
...
</html>en : 언어코드 (소문자사용)
US: 국가코드(대문자사용)
언어코드
http://www.w3bai.com/ko/tags/ref_language_codes.html
국가코드
http://www.w3bai.com/ko/tags/ref_country_codes.html
head 내부 순서 : title -> meta -> link -> script
01. title
: 문서의 제목을 넣는 태그
<title>Document</title>02. meta
: 웹페이지의 추가 정보를 전달
<meta name="viewport" content="width=device-width, initial-scale=1.0">device-width : 사용자 기기의 너비
device-height : 사용자 기기의 높이
initial-scale : 확대 비율(사용자 기기를 늘리거나 줄일수 있다)
user-scalabel=no : 화면 축소가능 여부
minimun-scale : 최소축소
maximum-scale =2.0 : 최대축소
++21.12.29 추가
: open graph
facebook이 만든 og메타태그 (카톡이나 페북에 공유하면 나타나는 간략한 창 만들때 사용)
사용 예시
<head>
<meta property="og:image" content="/이미지 경로.확장자명(.jpg)">
<meta property="og:description" content="사이트 설명">
<meta property="og:title" content="사이트 제목">
</head>
03. link
: 웹페이지에 다른 파일을 추가
link 태그의 첨부 순서: 중요한 파일일수록 덮어씌울 때 아랫줄로 보내서 기재한다
(나중에 link된 파일이 우선순위를 가진다)
<head>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="common.css">
<link rel="stylesheet" href="main.css">
</head>
<!--제일 높은 우선순위: main > common > reset 순이 된다.-->
04. script
: 웹페이지에 스크립트 추가
🎇스크립트 태그는 <head>영역과 </body>끝나기 전에 위치할 수 있다.
04-1. <head>영역 안에 넣기
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Document</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="외부링크를 불러올 수도 있다."></script>
<script>
여기에 스크립트 코드를 인터널방식으로 넣을 수 있다.
</script>
</head>
<body>
</body>
</html>04-2. </body>끝나기 전에 넣기
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Document</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script src=""></script>
<script>
</script>
</body>
</html>
컴퓨터는 순서대로 읽기 때문에 script를 head안에 넣을 경우 script를 모두 다 읽은 뒤 HTML로 넘어간다.
이에 브라우저 작동이 느려질 수 있다.
그래서 body가 끝나는 지점 전에 script를 삽입해 HTML, CSS가 먼저 작동된 뒤 script를 수행하는 것이
빠르게 느껴질 수 있다.
참고자료
http://tcpschool.com/html-tags/meta
https://blog.naver.com/pjh445/220012102876
'MarkUp > HTML' 카테고리의 다른 글
| [HTML] form 태그 이해하기 (0) | 2021.07.21 |
|---|---|
| [HTML] h1~h6 제목 태그의 역할과 개념 (0) | 2021.07.20 |
| [HTML] meta charset="UTF-8" 선언이유? (0) | 2021.07.13 |
| <!DOCTYPE html>은 왜 해야할까? (0) | 2021.07.13 |
| [HTML] 시멘틱마크업 (0) | 2021.01.06 |