태그의 정리
- lang="en" : 현재 문서가 영어로 작성된다는 뜻. 한국어의 경우 lang="ko"로 수정하기.
- <title></title> : 문서 제목. 아래와 같은 부분을 나타냄.
- <h1></h1> : 제목
- <br> : 줄 변경
* 웹문서 소스에서 텍스트를 추가할 때 <br>태그를 사용하지 않으면 줄바꿈 없이 모두 한줄로 입력된다. - <img src=""> : 이미지 삽입
HTML 문서 기본 구조 살펴보기
- <!doctype html> - 문서의 유형을 지정하는 선언문
- 현재 문서가 HTML5로 언어로 작성된 웹 문서라는 뜻.
- '문서 유형(document type)을 지정한다. 웹 브라우저에게 '이제부터 처리할 문서는 HTML 문서이고 어떤 유형을 사용했으니 그 버전에 맞는 방법으로 해석하라.' 라고 알려주는 것.
- <html> ~ </html> - 웹 문서의 시작을 알리는 태그
- 웹 문서의 시작과 끝을 나타냄.
- 웹 브라우저가 <html> 태그를 만나면 </html>까지의 소스를 읽어 HTML 문법에 맞추어 브라우저에 표시.
- <html> 태그는 웹 문서가 시작된다는 뜻이고, </html>태그는 웹 문서가 끝났다는 뜻.
- 따라서 </html>태그 다음에는 아무 내용도 없다.
* 두 자리 국가별 언어 코드는 ISO 639-1 표준에 정해져 있다.
* 두자리로 표기한 주요 국가별 언어 코드
| 코드 | de | en | fr | ja | ko | zh |
| 언어 | 독일어 | 영어 | 프랑스어 | 일본어 | 한국어 | 중국어 |
* 굳이 언어를 사용하는 이유 : 특정 언어로 제한해 검색할 때 그 대상이 될 수 있기 때문이다.
또한 lang=en으로 지정하고 문서를 열면 한글을 입력했음에도 '번역'이 뜬다.
- <head> ~ </head> - 브라우저에게 정보를 주는 태그
- 웹 브라우저가 웹문서를 해석하기 위해 필요한 정보들을 입력하는 부분.
- 웹 브라우저 화면에서는 보이지 않는다. 스타일 및 스크립트 등이 포함되어 있다.
- <head> ~ /<head> 사이에 들어가는 주요 태그들은 다음과 같다.
① <title> 태그 : 문서제목
②<meta> 태그 : 문자 세트를 비롯한 문서 정보
- 웹 브라우저 화면에는 보이지 않지만 웹 문서와 관련된 정보들을 지정
- 문자 세트 지정하기
ㄴ 화면에 글자를 표시할 때 어떤 인코딩 방법을 사용할 지정하는 것
ㄴ 웹 서버는 영어를 기본으로 하기 때문에 영어 이외의 문자를 화면에 표시하기 위해 미리 약속된 문자 세트를 사용해야 하는데, 이때 HTML5에서는 <meta>태그를 사용해 'utf-8/이라는 문자세트를 사용한다고 웹 브라우저에게 알려준다.
<meta charset="UTF-8">
- 모바일 기기 고려하기
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- 인터넷 익스플로러 브라우저 고려하기
ㄴ인터넷 익스플로러는 최신 웹 기술이 사용된 웹 문서를 제대로 해석하지 못함.
ㄴ 그래서 <meta>태그를 사용해서 현재 웹 문서를 최신 표준 모드로 해석하라고 알려줌.
<meta http-equiv="X-UA-Compatible" content="ie-edge">
- 검색 엔진 고려하기
<meta name="keywords" content="html5, 공부"> : 해당 문서의 키워드
<meta name="description" content="html5 공부하기"> : 해당 문서의 설명
<meta name="author" content="HIEMS"> : 해당 문서의 소유자 또는 제작자
- <body> ~ </body>
- 실제 웹 브라우저 화면에 나타날 내용. HTML 태그들은 대부분 <body> 안에 들어간다.
- 웹 문서에서 특수 문자 및 특수 기호 사용하기
- HTML 문서의 특성상 여러 개의 공백을 입력하더라도 한 칸만 인식
- 따라서 여러 개의 공백을 나타내려면 공백을 나타내는 특수 기호를 여러 개 입력해야 한다.
- 엔티티 이름이나 엔티티 코드 뒤에 오는 세미콜론(;)은 꼭 붙여야 한다.
'코딩 관련' 카테고리의 다른 글
| #3_텍스트 관련 태그들 (0) | 2020.09.16 |
|---|---|
| #1_HTML 기본 (0) | 2020.09.13 |