기본 ! : mdn html elements 공식 문서 참고할것
html파일 기본 뼈대
1 2 3 4 5
<!DOCTYPE html> <html> <head></head> <body></body> </html>
- DOCTYPE : DTD 최신의 HTML5버전으로 작성된 문서임을 선언한다. 브라우저는 quirks mode인지 standards mode인지 확인하기 위해 html 파일의 맨 위에 작성된 DOCTYPE을 사용한다.html 파일이 완전한 standards mode임을 명확하게 알려주기 위해
<!DOCTYPE html>을 써줘야함. - quirks mode 와 standards mode : Quirks_Mode_and_Standards_Mode mdn 공식문서 quirks mode 는 Navigator 4 와 IE 5브라우저에서 표준적이지 않은 layout을 생성한다. DOCTYPE이 명시된 완전한 standards mode에서는 (아마도 ?!) HTML과 CSS 사양에 맞는 웹페이지가 표시된다.
- head 내부에는 웹 문서에 대한 메타 데이터, body 내부에는 웹 문서에 들어갈 내용 쉽게 말하면 화면에 보여지는 모든 콘텐츠를 보여주는 부분이 body, 웹 문서에 대한 중요한 정보는 head에 작성한다.
- DOCTYPE : DTD 최신의 HTML5버전으로 작성된 문서임을 선언한다. 브라우저는 quirks mode인지 standards mode인지 확인하기 위해 html 파일의 맨 위에 작성된 DOCTYPE을 사용한다.html 파일이 완전한 standards mode임을 명확하게 알려주기 위해
title, link
- title : SEO 에 가장 중요한 역할
- link : CSS 스타일 시트를 첨부하는 태그 link MDN 공식 문서
- rel : relationship 의 준말 css 파일이라면 stylesheet, 아이콘이라면 icon
- media : media type을 작성한다. media condition이 참일때만 로드된다.
1 2 3 4 5 6 7 8 9 10 11 12 13
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="" href="./style.css" /> </head> <body> <h1></h1> </body> </html>
meta
- viewport : 화면의 사이즈 viewport mdn 공식문서
예시 : layout이 최소 넓이 500 px를 요구할때의 viewport. 화면이 500 px 이상으로 넓어질 경우 브라우저가 viewport를 넓인다.
1
<meta name="viewport" content="width=500, initial-scale=1" />
name :
- author : 작성자 명
- keywords : 웹 페이지의 키워드 , 검색시 이 키워드들로 검색이 가능하도록 함
- description : 콘텐츠에 대한 설명
- html meta tag 관련 mdn 공식 문서
1 2 3 4 5 6 7 8 9 10 11 12 13
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="author" content="jooheekim" /> <meta name="keywords" content="javascript, html, css" /> <meta name="description" content="" /> <title>Document</title> </head> <body></body> </html>
Comments powered by Disqus.