티스토리 뷰

HTML 문서를 새로 만들때마다 <!DOCTYPE html> 부터 </html>을 작성하는게 보통 귀찮은 일이 아니다.

보통 비슷한 양식으로 작성이 되는데 나는 쓸때마다 기본 양식으로 정해놓고 복붙(Ctrl+C > Ctrl+V) 한다.


기본적인 HTML 형태는 다음과 같다.


<!DOCTYPE html> // DTD 선언 : 이 문서의 종류를 선언한다.

<html> // HTML 문서의 시작을 알리는 태그

<head> // 문서의 제목, 스크립트, 스타일, 메타태그 등을 정하는 영역
   
<title>문서 제목</title> // 문서의 제목

</head>

<body> // 문서의 내용을 작성하는 영역
   
</body>

</html> // HTML 문서가 끝났다는것을 알리는 태그




DTD(Document Type Definition) : 문서 종류 선언하기



HTML 문서 제일 위에 작성되는 것으로 이 문서가 어떤 규칙에 의해서 작성 되었는지를 브라우저에게 알려주는 역할을 하며 브라우저는 DTD 선언에 따라서 문서의 해석을 다르게 한다.


선언을 하지 않아도 브라우저는 알아서 태그를 해석하여 보여주지만 경험상 DTD를 바꾸면 문서의 내용이 깨지는 경우를 본적이 있다.


DTD의 종류


DTD는 많은 외우기에는 너무 많은 종류가 있다. Strict, Transitional, Frameset 그리고 HTML 4.01, XHTML 1.0 등등 이해하려면 다 이해할 수 있겠지만 야매코딩에선 HTML5 만 알면 된다.


HTML5의 DTD는 다음과 같다.


<!DOCTYPE html> // 겁나 쉽다. 외워서 적으라고 해도 적겠다.


이렇게만 써도 해당 HTML 문서는 브라우저에서 표준으로 동작한다. 왜냐하면 표준이기 때문이다.





<HTML> 에서 lang="ko"를 쓰는 이유



lang은 이 문서가 어떤 언어로 작성되었는지를 알려주는 언어설정이다. DTD 선언에 따라 달라지지만 HTML5 에서는 저것만 알면 된다. 특별히 없어서 문제가 되는 것은 없지만 어려운게 아니니 써넣으면 된다.





<head> 안에는 뭐가 들어가야 할까?



일반적으로 <head> 안에는 CSS파일, JS파일의 링크, 이 문서가 검색결과에 노출되거나 카카오톡 등에 공유되었을때 표시되는 메타태그(사이트의 제목, 내용, 키워드, 표시 URL 등), 반응형웹에서는 꼭 필요한 뷰포트 등이 들어간다.



문자셋 지정


<meta charset="utf-8" /> // 한글이 정상으로 표시되게 한다.



뷰포트


<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />



CSS 링크


<link href="/css/style.css" rel="stylesheet" type="text/css" />



JS 링크 


제이쿼리와 같은 라이브러리의 JS만 <head> 내에 작성하고 기능적인 JS 파일은 <body>영역 제일 아래에 작성하는것이 페이지 로딩 속동 개선에 효과적이다. (브라우저는 소스코드의 위에서 아래로 읽어내기 때문)


<script src="http://code.jquery.com/jquery-latest.min.js"></script>



기타 유용한 메타태그


<meta name="theme-color" content="rgb(255,255,255)" /> // 크롬 모바일에서 주소 표시줄의 색을 지정한다.
<meta name="apple-mobile-web-app-capable" content="yes" /> // iOS 바로가기에서 UI 숨김.
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> // iOS 상태바 색상을 지정한다.




이제 <body>안에 내용을 채워 넣으면 된다. 설명을 이렇게 길게 했지만 결국 기본적으로 자주 사용하는 양식으로 저장해 두고 복붙 형태로 사용하는게 제일 쉽다. 내가 주로 사용하는 양식을 아래와 같다. 


<!DOCTYPE html>
<html>

<head>
    <meta name="theme-color" content="rgb(255,255,255)" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>제목입력</title>
    <link href="/css/base.css" rel="stylesheet" type="text/css" />
    <link rel="icon" sizes="192x192" href="/icon.png" />
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>

<body>

</body>

</html>


위 내용이 복잡하다면 그냥 이걸 복사해서 붙여넣는걸 추천한다.





저작자표시 비영리 변경금지 (새창열림)

'HTML & CSS & Jquery' 카테고리의 다른 글

[Jquery] 팝업 알럿창 띄우기  (0) 2016.10.18
[JQuery] 스크롤에 따라 슬라이드 되는 헤더 만들기  (0) 2016.04.20
[Jquery] 제이쿼리를 이용해 슬라이드 메뉴 만들기  (19) 2016.04.07
[Laravel] 라라벨 블레이드로 프론드엔드 뷰페이지 만들기  (0) 2016.04.04
[CSS] CSS 초기화 하기  (0) 2016.04.01
공유하기 링크
댓글