HTML5 본격적인 시작과 주석달기
지난 시간까지는 HTML > head 부분에 대해서 알아 보았습니다. 보이지는 않지만 중요한 부분이 head 부분이라고 말씀을 드렸습니다.
이제부터 본격적인 HTML인 body 부분을 진행하도록 하겠으며, HTML 보다는 HTML5 문법을 중심으로 하겠습니다.
HTML, HTML5는 대소문자를 구분하지 않지만, DOCTYPE를 제외한 태그는 가능한 소문자로 입력을 하는 것이 좋지 않을까 생각합니다.
-- 문서명 xxxx.html --
<!DOCTYPE html>
<html>
<head>
<title>HTML5 문서의 제목</title>
<meta charset="문자인코딩">
<meta name="description" content="현재 문서 간략 설명">
<meta name="keywords" content="키워드...">
<meta name="author" content="작성자">
<script>
</script>
<style>
</style></head>
<body>
</body></html>
HTML문서 작성시에는 위와 같은 스타일로 먼저 코딩을 한 후 추가해 나가는 것이 용이합니다. 위의 코드는 거의 바뀌지 않는 부분으로 자바스크립트, 스타일시트를 입력하지 않는다고 하여도 에러가 발생하지 않기 때문에 많은 문서를 작성시에는 위와 같은 패턴을 만들고 시작하는것이 편리합니다. ( 타이틀과 메타태그의 content는 페이지에 맞게 바꾸어야 하겠지만요. charset는 거의 UTF-8을 입력하면 되구요. )
주석달기( Comment )
주석은 코멘트라고 하며, HTML 문서에 글자를 입력하지만, 실제 브라우저에서는 나타나지 않지만, HTML 문서 작성시 문서를 효과적으로 작성이 가능하도록 도움을 줍니다.
태그(Tag)
<!-- 여기에 주석이 들어갑니다. -->
예를 들면,
<!DOCTYPE html>
... 중간 생략 ...
<body>
<!-- 바디 부분 시작 -->
<h1>qOOp의 HTML5</h1>
<p>HTML5는 다른 웹 언어에 비하여 배우기 쉽고....</p>
<!-- 바디 부분 끝 -->
</body>
</html>
바디 부분 시작, 바디 부분 끝이 주석입니다. 웹브라우저에서는 나타나지 않으며, 코딩을 보다 용이하게 하기 위해 사용합니다. HTML코드가 길지 않을 경우에는 주석을 사용하지 않아도 쉽게 알수 있지만, 코드가 길어지면, 주석을 사용하여 HTML 파일 수정시에도 용이합니다.
위와 같이 주석을 입력을 하면, 브라우저에서는 아래와 같이 나타납니다.
바디 부분 시작, 바디 부분 끝이라는 글자는 브라우저에서 나타나지 않습니다.
웹페이지를 혼자 개발하지 않고, 2명 이상이 공동으로 개발을 하는 경우, 주석은 상대방에게 많은 도움도 될수 있습니다.
조건부 주석 (Conditional Comment)
<!-- [if IE 8]>
태그, 내용 ...
<![endif] -->
위의 경우에는 익스플로러 8의 경우에만 실행이 되며, 그 외의 브라우저에서는 주석 처리 됩니다.
왜 이런한 것이 생겨났을까요?
브라우저가 조금씩 다르게 해석을 하기 때문입니다. javascript, css 등을 인식하는 브라우저가 익스플러러, 크롬, 사파리, 오페라 등이 코드를 조금씩 다르게 인식을 하기 때문입니다.
'Web > Html' 카테고리의 다른 글
| [HTML5강좌] 레이아웃 설정하기 (layout) (2) | 2015.01.19 |
|---|---|
| [HTML강좌] 헤드의 마지막 자바스크립트와 CSS (1) | 2015.01.12 |
| [HTML강좌] 헤드 메타태그 종합 name, content ... (0) | 2015.01.08 |
| [HTML강좌] 메타태그, 글자가 깨어진다면 Charset를 확인하라 (1) | 2015.01.05 |
| [HTML강좌] DOCTYPE 이란? (2) | 2015.01.04 |