티스토리 뷰

1. 개념
html5 이란?
html5정해진 형식이 있음
아무리 짧은 소스를 입력하더라도 반드시 필요한 구조가 포함되어 있어야 함
반드시 필요한 구조 4가지 : <!doctype> , <html> , <head> , <body>
2. 태그
html5 기본 구조
html5 코드
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//문서 유형을 지정하는 부분
<! DOCTYPE html>
//웹 문서의 시작을 알리는 부분
<html lang = "kr" >
//웹 브라우저 알아야 하는 정보를 담은 부분
<head>
<meta charset = "utf-8" >
<meta name = "viewport" content = "width=device-width,initial-scale=1.0" >
<title> 키보드와 하루 </title>
</head>
//실제 브라우저에서 표시되는 부분
<body>
<h1> h1 테스트 입니다 </h1>
<p> p 테스트 입니다 </p>
</body>
</html>
결과 화면

h1 테스트 입니다

p 테스트입니다

코드 설명
<! DOCTYPE html>
위 부분은 문서 유형을 지정하는 부분인데 유형을 지정하는 것이란 웹 브라우저에게 처리해야 할 문서는 HTML이니 여기에 맞는 방법으로 해석하라는 것을 지정해 주는 것입니다.
<html lang = "kr" > ......... </html>
실제 문서 정보와 내용이 시작되는 끝나는 부분을 정의하는 태그입니다.
lang사용할 언어를 지정하는 것입니다.
언어 지정이 중요한 이유는 검색 사이트에서 특정 언어로 제한해서 검색할 때 적용이 됩니다.
또한 음성으로 웹브라우저를 읽어 줄 때 언어가 명시되면 그 언어에 맞게 발음이나 억양 등을 설정해 주기 때문입니다.
<head> ......... </head>
실제로 웹 브라우저에는 보이지 않지만 웹 브라우저가 알고 있어야 하는 정보는 모두 여기에 입력해 줍니다.
<title> 키보드와 하루 </title>
모든 웹 브라우저에서 제목 표시줄에 표시될 내용 입니다.
<meta charset = "utf-8" >
meta 태그웹 브라우저에게 웹 문서와 관련된 정보를 알려줍니다.
기본적으로 웹 서버는 영어를 사용하기 때문에 영어 이외의 문자를 화면에 표시하고자 인코딩 방법을 알려줘야 합니다.
그래서 여기서 charset으로 utf-8을 사용한다고 알려준 것입니다.
<meta name = "viewport" content = "width=device-width,initial-scale=1.0" >
위 태그는 스마트폰 기기에서 웹 문서를 제대로 표시 할 수 있도록 웹 브라우저에게 알려줍니다.
<meta http-equiv = "X-UA-Compatible" content = "ie=edge" >
익스플로러는 예전 브라우저라서 최신 웹 기술이 사용된 문서를 제대로 해석하지 못할 때가 있습니다.
그래서 익스플로러를 사용하는 사람들까지 고려해야 할 경우에 현재에 있는 문서를 최신 표준 모드로 해석하라고 설정을 해주는 부분입니다.
<body> ......... </body>
이 부분은 실제로 웹 브라우저에서 표시되는 부분입니다.
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday