Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

3일만에 끝내는 HTML, CSS, JS 기초

h31. HTML5 페이지 코딩 규칙 본문

HTML

h31. HTML5 페이지 코딩 규칙

눈의나라북범 2016. 6. 5. 15:38

HTML5 페이지 코딩 규칙

HTML5 표준을 잘 지킨 페이지를 하나 만들어 봅니다. HTML 에서 코딩할 때 종종 규칙이 불확실한 경우가 있습니다. 

아래 예에서 HTML5 를 위한 코딩 규칙을 주석으로 입력하였습니다.
<!DOCTYPE html>
<html lang="ko">

	<!-- 문서 타입을 명시-->
	<!-- 언어 선언은 화면 읽어주는 소프트웨어나 검색 엔진에게 도움이 됨.
	한편 html 태그나 body 태그를 생략하지 말 것.
	생략시 DOM 또는 XML 소프트웨어에서 충돌이 날 수 있음.
	head 태그는 생략할 수 있음.-->

<title>HTML5 페이지 코딩 규칙</title>
<meta charset="utf-8" />

	<!-- 문자셋은 utf-8 로 설정하고,
	맨 끝의 슬래쉬 (/) 는 XHTML 및 XML 에서 요구하므로 기입할 것
	코딩 번역이 빨리 끝나고 검색엔진이 인덱싱을 정확하게 하려면,
	언어설정과 문자셋 인코딩이 가급적 문서의 상단에 위치해야 합니다.-->

<link rel="stylesheet" href="styles.css">

	<!-- 스타일 시트를 링크할 때 타입 속성이 필요하지 않습니다.-->


<!--[if lt IE 9]>
<script src="http ://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->



<style>
body {
font-family:굴림체;
}
header,footer,section,article {
border:1px solid green;
margin:5px;margin-bottom:10px;padding:5px;
background-color:gray;
}
header,footer {
color:white;background-color:#777;margin-bottom:5px;
}
section {
background-color:#eee;
}
nav ul {
margin:0;padding:0;
}
nav ul li {
display:inline; margin:5px;
}
</style>
<body>

	<!-- body 태그를 생략하지 말 것. IE9 이전 버전에서 오류 날 수 있음-->


<header>
<h1>신출귀몰 오랑우탄의 하루</h1>

	<!-- 태그 및 속성 이름 모두 소문자로 기입하고, 닫음 태그 생략 금지-->

</header>

<nav>
<ul>
<li>사는 곳</li>
<li>먹는 것</li>
<li>하는 것</li>
</ul>
</nav>

<section>
<h2>섹션 : 오랑우탄 사는 곳</h2>

<article>
<h2>첫번째 아티클 : 오랑우탄 가족의 여행</h2>
<p>이러저러한 곳에서 사는 오랑우탄 가족이...</p>
<p>밀림을 지나 커다란 호수에 다다랐는데...</p>
<p>이러저러한...</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/a/af/Zoo_z02.jpg" alt="오랑우탄" style="width:220px;height:165px">

	<!-- alt 속성으로 이미지에 대한 정보를 제공할 것-->
	<!-- 이미지 사이즈 정보를 기입하여 이미지 로드되기 전에 브라우저에게 크기를 알려줄 것-->

</article>

<article>
<h2>두번째 아티클 : 새로운 곳에 정착</h2>
<p>호수에 빛친 달 빛이 그윽하여...</p>
<p>물맛에 또한번 반해서...</p>
<p>결국 눌러 살다 지금의 아시아 오랑우탄이 되었다...</p>
</article>

</section>

<footer>
<p>&copy; 2016 ... All rights reserved.</p>
</footer>

</body>
</html>
여기에서 <article> <section> 그리고 <div> 의 차이에 대해 알아보아야 하겠습니다. 

이 세가지 태그들은 HTML5 표준에서 그다지 큰 차이는 사실 없습니다.

다만 HTML5 표준에서는, <section> 태그는 관련된 태그들의 블록을 정의한다는 것이고,

<article> 태그는 그 자체로 하나의 완전한 블록이 된다는 점이 다릅니다.

<div> 태그는 그에 딸린 태그들을 묶어 하나의 블록으로 정의합니다.

위의 예제로 설명하자면 <section> 태그를 하위에 <articles> 태그를 담는 그릇(블록)으로 사용한 것을 볼수 있습니다. 

그렇지만 반드시 이런 것은 아니고, <article> 도 다른 <article> 이나 <section> 을 담는 그릇이 될 수 있습니다. 또는 <article> 태그내에 <div> 태그가 들어 갈수도 있으므로, 이들은 상호 서로를 담을 수 있는 그릇인데 다만, 사람이 구별할 수 있도록 종류가 마련된 정도로 이해 할 수 있겠습니다.
HTML 코딩시 기타 주의사항에 대해 알아봅니다.

자바 스크립트에서 HTML 태그를 지정할 때 대소문자에 주의하여야 합니다. 아래 두개의 자바스크립트 들은 다른 결과를 보이게 됩니다.

	var obj = getElementById("tagID")
	var obj = getElementById("TagID")

리눅스에서 아파치 같은 대부분의 웹 서버들은 파일이름의 대소문자를 구별합니다. 

반면 Microsoft 사의 IIS 서버는 그렇지 않습니다. 그러므로 대소문자를 혼재해서 사용할 경우 일관되게 사용하여야 할 것입니다.

서로 다른 서버로 웹 서비스를 옮길 때 문제가 생길 수 있으므로, 가능하면 가급적 파일이름은 소문자로 사용하는 것이 좋습니다.
파일 확장자는 .htm 또는 .html 을 사용하는데, 둘은 어떤 웹 브라우저나 웹 서버에서도 잘 동작합니다.

	.htm 은 초창기 DOS 시절 때 확장자가 3 자로 제한되던 시절의 흔적일 것입니다.
	.html 은 유닉스 운영체제가 제한이 없었으므로 이에 기인하는 것 같습니다.

기술적으로는 URL 에다 파일 이름을 입력하지 않는 경우에 (http://www.example.com/), 그 서버는 기본 파일 이름을 찾아서 응답해 줍니다. 

일반적인 기본 파일 이름은 index.html, index.htm, default.html, default.htm 및 index.php 등이 됩니다.

다만 서버 환경설정에 이런 파일들이 기본 파일 이름으로 설정되어 있어야 하는데, .html 확장자는 거의 모든 서버에서 기본 파일로 등록되어 파일이름을 생략해도 문제없이 호출될 수 있습니다.
[광고] Udemy 동영상 강의로 보기


저작자표시 비영리 변경금지

'HTML' 카테고리의 다른 글

h33. HTML5 벡터 그래픽  (0) 2016.06.05
h32. HTML5 캔버스 그래픽  (0) 2016.06.05
h28. HTML5 태그  (0) 2016.06.05
h27. HTML5 개요  (0) 2016.06.05
h26. HTML 폼 태그  (0) 2016.06.05
'HTML' Related Articles more