※ 본 포스팅은 책 <실전프로젝트 반응형 웹퍼블리싱>의 내용을 토대로 작성하였음
XHTML
만약 잘못된 구조로 마크업을 한다면 CSS(디자인)와 Javascript(동작)를 적용 할 때 어려움이 있을 뿐 아니라, 잘 적용한다 하여도 제 기능과 역할을 수행하지 못하는 부실한 웹페이지가 나올 수 밖에 없다.
<p>, <span>, <a> 등과 같이 명령어의 형태가 '<>(각 괄호)'로 되어있는 것을 태그(tag) 라 하며,
<p> ~ </p> 와 같이 태그의 (<>)과 끝(</>)을 하나의 요소(element) 라고 한다.
이러한 요소들을 이용하여 웹 문서의 기본 구조를 작성하는 것을 마크업(markup) 이라고 한다.
XHTML의 문법 규칙
1. 요소는 제대로 중첩되어야 한다.
<p>중첩된 요소가 있을 때는 <strong>바르게</strong> 표현해야 한다.</p> (O)
<p>중첩된 요소가 있을 때는 <strong>바르게</p> 표현해야 한다.</strong> (X)마지막에 정의한 태그를 가장 먼저 닫아야 함
2. 요소 및 속성 이름은 소문자여야 한다.
<p><a href="index.html">첫페이지</a></p> (O)
<P><A href="index.html">첫페이지</A></P> (X)<a> 요소에서 'href'와 같은 것을 속성(attribute) 이라고 부르며 '=' 다음에 오는 것을 값(value) 이라고 부른다.
3. 요소는 항상 닫아야 한다.
<p>요소는 <strong>항상 닫아야</strong> 합니다.</p> (O)
<p>요소는 <strong>항상 닫아야 합니다. (X)그런데 한 쌍의 태그(<>~</>)요소로 이루어져 있지 않고 하나의 태그로 되어있는 요소도 있다.
이러한 요소를 빈 요소(empty element) 라고 한다.
빈 요소의 경우도 다음과 같이 '/'로 닫아 주어야 함.
요소는 항상<br /> 닫아야 합니다. (O)
요소는 항상<br> 닫아야 합니다. (x)
<img src="image/today.gif" alt="오늘" /> (O)
<img src="image/today.gif" alt="오늘"> (X)자주 쓰는 빈 요소에는 <br />, <ht />, <img />, <input />, <area />, <meta />, <link /> 등이 있다.
4. 속성값에는 인용 부호를 붙여야 한다.
<img src="image/today.gif" alt="오늘" /> (O)
<img src="image/today.gif" alt="오늘"> (X)보통 '='다음에 오는 것을 값(value)이라고 하는데 값에는 인용 부호(" ")를 붙인다.
5. 속성은 속성값과 함께 써야 한다.
<input disabled="disabled" /> (O)
<input disabled /> (X)
<option selected="selecterd"></option> (O)
<option selected></option> (X)속성은 속성값과 같이 선언해야 하며 생략하면 안 된다.
6. img와 area 요소에는 alt 속성이 있어야 한다.
<img src="imges/today.gif" alt="오늘" /> (O)
<img src="imges/today.gif" /> (X)
<area shape="rect" coords="0,0,0,72" alt="오늘" href="today.html" /> (O)
<area shape="rect" coords="0,0,0,72" href="today.html" /> (X)<img> 요소에 alt를 주어야 하는 이유는 문법적으로도 필요하지만 이미지를 볼 수 없는 환경에서도 충분히 그 이미지에 대한 정보를 제공 해 주어야 하기 때문이다.
7. 특수문자를 쓸 때는 Entity Name 또는 Entity code를 사용해야 한다.
<p>you & me</p> (O) -> &는 특수문자'&'의 Entity Name
<p>you & me</p> (O) -> &는 특수문자'&'의 Entity code
<p>you & me</p> (X)특수문자 '&'를 출력하기 위해 그냥 '&'를 쓰게 되면 Entity Name이나 Entity code 맨 앞에 오는 &로 오인하여 문법적 오류가 발생한다. 따라서 이러한 문제들을 발생시키지 않으려면 특수문자의 경우 Entity로 변환하여 기술해야 함.
※ http://emtity.com 에 가면 Entity code 에 대한 더 많은 정보를 얻을 수 있다.
8. 주석처리 방법
주석은 일반적으로 협업(공동작업)시 다음 작업자가 현재 작업한 내용을 쉽게 알아볼 수 있도록 도와주는 설명문이라고 보면 됨.
주석 내용을 브라우저 화면에 출력되지 않으며 처리 방법은 다음과 같다.
<!--주석내용-->
<!--여기서부터 공지사항입니다.-->※작성한 웹 문서의 '문법 유효성 검사'는 http://validator.w3.org 에서 할 수 있다.
기본 문서 구조
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<meta name="description" content="Responsible Web Project" />
<meta name="keywords" content="xhtml, css, html5, css3, javascript, jquery" />
<meta name="author" content="icons" />
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>반응형 웹</title>
<link rel="stylesheet" type="text/css" href="main.css" />
<script type="text/javascript" src="main.js"></script>
<style type="text/css">
body{font-size:12px;}
</style>
</head>
<body>
반응형 웹이란...
</body>
</html><!DOCTYPE>은 현재 문서 타입이 무엇인지를 브라우저에게 알려줌.<html>요소 안에는<head>요소와<body>요소로 구성되어 있다.<head>요소 안에는<meta>, <title>, <link>, <script>, <style>등과 같은 요소들이 올 수 있는데, 내용을 정리하면 다음과 같다.<meta>: 문서의 설명, 키워드, 저자 등을 지정<title>: 문서의 제목 지정<link>: 일반적으로 외부의 CSS 파일을 연결할 때 사용<script>: 주로 자바스크립트를 선언할 때 사용<style>: 문서 내에서 직접 스타일(CSS) 정의
- XHTML은 '네임 스페이스'라는 것을 꼭 지정해 주어야 하는데
<html>태그 안에 있는 xmlns="http://www.w3.org/1999/xhtml" 속성이 바로 '네임 스페이스'부분이다. 옆에 있는 lang="ko" xml:lang="ko"는 '언어는 한국어(한글)이다'라는 뜻. <meta>태그를 보면 'charset=UTF-8'로 지정한 부분이 있다. 'charset'은 'character set'의 약어로 '문자 조합'을 의미한다. 'UTF-8'은 모든 언어 문자 및 특수 문자를 표현할 수 있어 다국어 환경에 적합하다. 또한 여기에서 중요한 점은 charset을 UTF-8로 설정할 경우, 문서를 저장할 때에도 반드시 인코딩 옵션을 'UTF-8'로 지정하고 저장해야 한다는 것이다. 그렇지 않으면 글자가 깨지는 현상이 일어난다.
