<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title></titile>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
문서의 타입을 html로 지정한다. 웹브라우저가 html5에 맞게 문서를 해석한다.
<html></html>
html의 시작과 끝을 알린다.
- lang="ko" : 이 문서에서 한국어를 사용함을 알린다. 언어를 제한하여 검색하거나, 화면낭독기를 사용할 때 필요하다. 영어는 en, 일본어는 ja, 중국어는 zh로 쓸 수 있다.
<head></head>
화면에는 보이지 않지만 웹브라우저에서 필요한 정보는 head에 작성한다.
<body></body>
화면에 나타나는 정보들을 작성한다.
<title>html 제목</title>
브라우저 상단의 페이지 제목을 나타낸다. 문서 내용을 짐작할 수 있는 간단한 제목을 붙이는 것이 좋다.
<meta>
메타 데이터를 작성한다.
charset="UTF-8": 인코딩 방식을 결정한다. html은 영어가 기본이기에 다른 언어를 사용하려면 인코딩 방식을 알려줘야한다. UTF-8은 한글을 인코딩하는 대표적인 방법이다.name="keywords" content="html5, website": 키워드를 작성한다. content에 키워드 내용을 작성한다. (content는 name과 http-equiv의 내용을 작성한다.name="description" content="html5 기본 구조입니다.": 페이지의 설명을 적는다.name="author" content="helo": 문서의 제작자, 소유자를 적는다.
name - content는 검색엔진이 참조하여 검색 결과를 보여줄 때 사용한다.
-
name="viewport" content="width=device-width, inital-scale=1.0": 모바일 웹이나 반응형 웹을 사용할 때 화면의 크기를 지정한다.- width : 뷰포트의 너비
- height : 뷰포트의 높이
- user-scalable : 확대 축소 가능여부(yes,1,no,0)
- initial-scale : 초기 확대 축소값(1~10)
- minimun-scale : 최소 확대 축소값(0~10)
- maximum-scale : 최대 확대 축소값(0~10)
- interactive-widget : Interactive UI widget의 사용에 따른 viewport의 변화 여부(resizes-visual - 뷰포트의 화면에 나타나는 부분의 크기 변화, resizes-content: viewport의 크기 변화, or overlays-content: 변화 없음)
-
name="application-name" content="website: 웹 어플리케이션의 이름을 표시한다. -
name="generator" content="Dreamweaver CS5.5": 문서 작성에 사용한 저작 도구를 사용한다. -
http-equiv="content-type" content="text/html; charset=utf-8": 콘텐츠의 문자 인코딩 방식을 지정한다.meta charset="UTF-8"와 이것 중 하나만 사용해야한다. -
<meta http-equiv="default-style" content="base">: link의 stylesheet가 여러개일 때 link의 title 속성과 같은 content(여기선 base)를 기본 스타일시트로 지정한다. -
http-equiv="refresh" content="60",http-equiv="refresh" content="60; url=example.html": 60초마다 페이지를 새로고침한다. url을 작성하면 새로고침 후 해당페이지로 이동한다. -
http-equiv="content-security-policy" content="default-src https:": XSS를 방지하는 콘텐츠 제한 정책. 자세한 것은 이곳 참조.
http-equiv="X-UA-Compatible" content="ie=edge">: 인터넷 익스플로어에서 최신 표준 모드를 해석하라 알려준다.
특수문자 사용하기
html5에서 <와 같은 특수문자를 사용하면 html 문법에서 사용하는 것으로 생각한다. 따라서 이러한 특수문자를 사용하고 싶으면 엔티티표 사이트에서 참고하여 그대로 작성하면 된다. 예를 들어, ⦰를 보여주고 싶으면 bemptyv; 이라 작성하면 된다.
이런 유용한 정보를 나눠주셔서 감사합니다.