출처 : http://blog.naver.com/ieiec?Redirect=Log&logNo=140123733935
웹 표준 스팩 소개
1) (X)HTML(eXtensible Hypertext Markup Language)
HTML(Hypertext Markup Language) 는 웹페이지를 표시하는데 기본 언어로서 사용된다.
최신의 HTML 표준은 4.01이지만 HTML을 XML과 결합한 XHTML이 권고안으로 나와있다.
HTML2/3와 달리 최신 XHTML표준은 <font>, <b>, <i> 같은 표현 요소들을 배제하고,
태그를 모두 닫도록 권고하는 등정확한 문서 규격을 요구하고 있다.
이것은 전문적인 저작 도구를 사용함에 따라 구조적인 HTML템플리트를 생성하고 스타일(CSS)을
관리함으로서 비 전문 설계자도 웹 페이지를 손쉽게 제작 관리 할 수 있게 해준다.
2) CSS(Cascading Style Sheets)
CSS는 사용자 정의의 디자인 속성, 즉 글꼴, 크기, 색상, 이벤트 등을 지정할 수 있으며
CSS를 사용한 모든 페이지는 기존 버전과의 호환성 되게 어떤 브라우저에서도 내용을 열람할 수 있다.
CSS를 이용하여 설계자는 서로 다른 화면 해상도와 브라우저 상에서, 테이블 없이도 동일하게 보여질 수
있는 페이지를 생성할 수 있다.
단, IE4.0 이하와 넷스케이프4 이하의 오래된 웹브라우저에서는 CSS를 지원하지 못한다.
3) XML(eXtensible Markup Language)
XML(eXtensible Markup Language)은 HTML이나 CSS로서 표현되지 못하는 영역을 DTD를
이용하여 정의하여 사용자 정의의 태그를 생성하여 제작할 수 있는 메타 마크업 언어이다.
XML이 고려되는 애플리케이션은
사용자가 필요한 정보를 얻기 위해 하나 이상의 데이터베이스와 상호 작용할 필요가 있는 경우,
작업이 사용자에게 전달되어 사용자가 자신의 기록 혹은 문서에 액세스할 것이 예상되는 경우,
서로 다른 세트의 데이터가 서로 다른 사용자에게 디스플레이 되어야 하는 경우,
정보 검색 및 디스플레이와 관련하여 사용자 선호 프로파일을 구축해야 할 필요가 있는 경우,
각 개인이 스타일 시트를 사용하여 다양한 포맷으로 문서를 갱신해야 할 필요가 있는 경우
에 사용 가능하다.
4) DOM(Document Object Model)
DOM(Document Object Model)은 웹페이지에 표현되는 모든 속성에 대해 객체화하여 이를
자유자재로 사용할 수 있도록 만든 것이다.
document, form, window 등 각각의 속성을 객체화하여 트리 구조로 형상화하여 이에 대한
이벤트 처리 같은 것이 가능하다.
DOM에는 크게 W3C DOM, MS DOM이 있는데, IE6.0 이전 브라우저를 제외하고는 모든 브라우저가
표준 W3C DOM을 지원한다.
5) ECMAScript
자바스크립트는 W3C 표준으로 제정되지 않았으며, 또한 모든 웹 브라우저 사용자가 자바스크립트를
볼 수 있는 것은 아니다. 특정 방화벽은 자바 스크립트가 통과하는 것을 허용하지 않는다.
그럼에도 자바스크립트는 DOM이 표준화되면서 웹 브라우저에 널리 쓰이고 있다.
주의할 점은 클라이언트 측 스크립트는 여러 브라우저에서 폭 넓게 검사되어야 한다.
핵심 기능은 자바 스크립트에 의해서만 제공되어서는 안된다.
또 자바스크립트는 주석 코드를 사용하여 비 호환성의 웹 브라우저로부터 숨겨져야한다.
자바스크립트는 HTML문서의 Head내에 위치해야 제대로 동작한다. 따라서 문서의 Body 내에 자바스크립
트를 위치시키는 것은 피해야한다.
자바스크립트의 경우, 넷스케이프사가 ECMA라는 표준 기구로 제안하여 채택된 바 있어 ECMA-262표준안
을 공부하면 된다. ECMAScript는 IE6.0, Firefox 1.0, Safari1.0, Opera 8에서 거의 100% 지원하고 있다.
웹 표준 홈페이지 방법론
HTML의 태그들은 구조(structure)를 나타내는 것과 표현(presentation)을 나타내는 것으로 분류할 수 있다.
구조(structure) : H1, H2, UL, DL, OL, LI, LINK, ADDRESS, STRONG, BLOCKQUOTE, CODE, Q, DIV, P 등
단순한 모양(표현)을 위해 태그를 사용하는 것이 아닌, "의미"를 가지고 태그를 사용해야 한다.
( 예를 들면, H1이라는 마크업을 사용하면 보통은 글자 크기가 커지고 두꺼워진다. 그렇다고 H1을 단순히 글자를 키울
목적으로 사용하는 것은 잘못된 것이다.
H1은 문서의 가장 중요한(또는 가장 상위의) 제목 부분을 표시하라는 "의미"를 가지고 있는 것이지, 그냥 글자를 키울
목적으로 제공되는 것이 아니기 때문이다.
이에 반해 B, FONT, I, BR 등은 문서의 표시 방법을 결정하는 표현 요소들이다. 즉 이것들은 아무런 의미는 없지만 단지
시각적으로 표현하는 방법만 결정한다. )
1) 구조와 표현의 분리
ㄱ. 그냥 표현한것. ㄴ. 구조적으로 표현한것.
ㄱ. 그냥 표현한 것. |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
ㄴ. 구조적으로 표현한 것. |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" * { line-height: 138%;} <ol> |
ㄱ. 구조와 표현과 내용이 한데 얽혀 있으면 나중에 소스를 관리하고 수정하기가 매우 어려울 뿐만 아니라, 컴퓨터가 이
문서의 구조를 파악하기도 매우 힘들다.
예를 들어 위의 문서에서 가장 큰 문서의 구조는 서론, 본론, 결론의 세 가지 항목으로 이루어졌다고 사람은 알 수 있는데,
컴퓨터는 글자 색깔이 어떻고, 크기가 어떻고 하는 것이 의미가 없으므로 시각 장애인이 사용하는 음성 브라우저엣도 위와
같은 글자 크기가 어떻고 하는 것은 거의 의미가 없다.
ㄴ. 컴퓨터나 검색 엔진이 문서의 의미적인 구조를 파악하기가 쉽고, 기계를 통해 문서의 구조에 쉽게 접근할 수 있다.
이것은 브라우저 이미 언급한 하위 버전 호환성뿐만 아니라 향후 미래에 나올 브라우저에 대한 상위 버전 호환성(Forward Compatibility)로 매우 중요하다는 점이다.
2) 구조와 동작(Behavior)의 분리
실전 XHTML 가이드(1)
W3C는 HTML 4.0을 표준으로 발표한 바로 직후, 더 큰 모듈성, 유연성, 성능이 필요함을 절감하게 되었다.
웹 사용자들의 끝도 없는 요구에 응답하면서 HTML 4.0은 끊임 없이 확장해서 새로운 기술을 수용해야만 했는데
이를 위해 XHTML이 등장 했다.
1) XHTML이란 ?
eXtensible HyperText Markup Language
HTML은 정해진 태그 집합만을 사용하는 정적인 마크업 언어라면,
XHTML은 XML(Extensible Markup Language: 확장 마크업 언어)로 정의된 단 하나의 집합만을 사용.
XML은 웹이 성장 및 확장할 수 있는 플랫폼이며 XHTML은 XML을 사용하여 HTML을 혁신한 것으로
XML이 사용되는 모든 새로운 툴에 XHTML을 결합해 준다.
2) 왜 XHTML을 사용해야 하는가?
호환성 및 확장 가능성
XHTML은 단순히 HTML4를 업그레이드한 것이 아니라 XML애플리케이션을 가장 폭넓게 사용하는 웹 페이지에
적용할 수 있다는 데에서 의미를 찾을 수 있다 : 기계가 이해할 수 있는 언어라는 것이다.
유지 비용의 감소 및 재생산성 확대
일반적인 관습대로 작성된 HTML문서는 내용과 디자인, 문서 구조가 모두 뒤범벅 되어있다.
이는 매우 효율성이 낮은 반복 작업과 막대한 수정 비용을 요구하는 것이다.
XHTML과 CSS 기반 사이트는 이러한 수고를 덜고 유지비용이 감소한다.
경량의 로딩 속도
XHTML 규격을 따르면 저절로 "구조화된" 문서로 만들어진다. "구조화된" 문서의 특징은 "가독성"이 높아지게 되는데
단지 생성된 코드를 사람이 읽기 편하다는 뜻뿐만 아니라, 다른 기계나 프로그램도 읽기 수월해 진다.
디자인 부분을 CSS 파일로 분리해낸다면 훨씬 더 간단해진다.
문서 내 디자인 요소들은 파일의 용량이 키움에 따라, 웹페이지의 로딩과 렌더링 속도를 느리게 하고 있다.
3) XHTML 문서 구조
올바른 DOCTYPE 사용
웹페이지를 표현하는 방식을 제대로 표현하기 위해 웹 브라우저가 적절한 문서 형태를 표기하도록 할 필요가 있다.
즉, 문서의 루트 요소 앞에는 공백 없이 DOCTYPE 선언이 있어야 하며,
이 선언은 XHTML에 대한 세 DTD(Document Type Definition)파일 (strict, transitional, frameset) 중 하나를
참조해야 한다.
올바른 문서 형식 선언을 해주는 것은 다양한 브라우저에 따른 렌더링 차이를 최소화 할 수 있기 때문에 매우 중요하다.
HTML 버전에 따라 해석되는 방식이 브라우저에 따라서 다르기 때문에 이를 지정해 주는 것은 매우 중요하다.
HTML 2.0
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
HTML 3.2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
표준 문서 구조
표준 문서 형식(Doctype)을 기반한 웹페이지에 대한 정확한 사용법은 다음과 같다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko-KR">
<head>
<title> ... </title>
</head>
<body>
...
</body>
</html>
가장 흔히 사용하는 DOCTYPE 코드는 일반형식(Transitional)과 엄격한 형식(Strict)으로 나누어지게된다.
HTML 4.01 Transitional 은 예전에 있었거나 없어진 태그도 지원하며, <font> 스타일도 제대로 표현하여 준다.
HTML 4.01 Strict 은 HTML을 엄격하게 적용한다. <font>태그에 적용된 스타일 보다는 CSS파일에서 지정된
스타일을 지켜 표현 해야 한다.
DOCTYPE을 규정하는 가장 좋은 방법은 Strict 형식을 사용하는 것이다. 이것은 CSS를 통해 모든 HTML 태그의 속성을
모두 자유 자재로 규정할 수 있기 때문이다.
즉, b{font-weight: normal;} 라고 적는다면 더 이상 <b>는 굵은체로 표시되지 않는다.
그러나, 아직 브라우저 호환성 때문에 현재 상태에서 가장 최상의 브라우저 호환성을 제공해 주는 문서 형식은 XHTML1.0
Transitional을 사용하는 것이다.
4) XHTML 일반 문법 준수
정확한 문서 구조 준수
문서의 루트 요소는 html 이 되어야 하며, 이 html 요소는 XHTML 네임스페이스를 지정해야 한다.
<html xmlns="http://www.w3.org/1999/xhtml">
표준 문서에는 head, title 및 body 구조 요소가 포함되어야 한다.
프레임 세트 문서에는 head, title 및 frameset 구조 요소가 포함되어야 한다.
모든 요소는 완벽하게 중첩되어야 한다.
<p>This is a <i>bad example.</p></i>
<p>This is a <i>good example.</i></p>
모든 속성 값은 인용 부호("나 ')로 묶어야 한다.
<a href=http://sample.com>틀린 경우</A>
<a href="http://sample.com">맞는 경우</a>
모든 요소와 속성은 소문자여야 한다.
XML은 대소문자를 구별하므로 필수적이다.
<A HREF="http://sample.com">틀린 경우</A>
<a href="http://sample.com">맞는 경우</a>
모든 요소는 닫아야한다.
빈 요소에는 종료 태그가 포함되거나 시작 태그가 />로 끝나야 한다.
예를 들어, <br>은 잘못된 것이며, <br></br>또는 <br />이 올바른 형식이다.
빈요소 : area, base, basefont, br, col, frame, hr, img, input, isindex, link, meta, param
또한, XML을 사용할 수 없는 이전 브라우저와의 호환성을 위해 /> 앞에 공백이 있어야 한다.
(예:<br/>이 아니라 <br />)
<img src="http://sample.com/wrong.jpg">
<img src="http://sample.com/right.jpg" />
모든 속성값은 속성이 함께 선언되어야 한다.
모든 속성은 최소화되어 표기되면 안된다. XML은 속성이 최소화를 지원하지 않는다. 속성 값의 짝들은 모두 작성
되어야 한다.
a, applet, form, frame, iframe, img, map 등의 요소에는 name 속성뿐만 아니라 id속성도 있어야 한다.
<a name="intro">Introduction</a> 는 잘못된 것.
<a id="intro">Introduction</a> 또는 <a id="section1" name="intro">Introduction</a>가 맞는 표현.
또한 <td nowrap>은 잘못된 것. <td nowrap="nowrap">이 올바른 형식이다.
최소화 될 수 없는 속성으로는 checked, compact, declare, defer, disabled, ismap, multiple, noresize,
noshade, nowrap, readonly, selected 가 있다.
<option value="wrong" selected>틀린 경우</option>
<option value="right" selected="selected">맞는 경우</option>
모든 script 및 style 요소에는 type 속성이 포함되어야 한다.
<script type="text/javascript” language="javscript"></script>
<style type="text/css"></style>
모든 img 및 area 요소에는 alt 속성이 포함되어야 한다.
코드를 생성하거나 XHTML을 정리할 때 코드에서 이들 속성을 설정하고, 찾을 수 없는 alt 속성을 보고한다.
모든 SCRIPT 내의 태그는 Escape 시켜야 한다.
자바스크립트 내에 데이터는 CDATA 형식으로 간주되기 때문에 HTML태그가 들어가게 되면 오류를 내게 되어 있다.
<script type="text/javascript">
<!--
// 틀린 표현!
document.write("</P>");
// -->
</script>
<script type="text/javascript">
<!—
// 맞는 표현!
document.write("<\/P>");
// -->
</script>
HTML4에서는 SCRIPT내에 데이터 중 시작 태그나 코멘트 부분은 인식이 안되지만 종료 태그는 인식이 되기 때문에 이를 역슬래로 표시해야 한다.
XHTML에서, 스크립트와 스타일 요소들은 #PCDATA 컨텐트를 갖는 것으로 선언된다.
결과적으로, <과 &는 마크업의 시작으로 처리되고, <과 &와 같은 개체(entities)들은 XML 프로세서(processor)에 의해 각각 <과 &로의 개체 참조로서 인식되므로 CDATA로 마크업 하여 표시하는 게 좋다.
<script type="text/javascript">
<![CDATA[
... <h1>데이터</h1> ...
]]>
</script>
모든 문서 내 URL에서 &를 쓰면 안 된다.
&가 XML 엔티티의 시작으로 인식하기 때문에 생기는 문제이다.
기존 웹브라우저는 이러한 에러를 복구해 주고 있지만 유효성 검사기에서는 에러를 내게 된다.
<!—에러! --> <a href="foo.cgi?chapter=1§ion=2">...</a>
<!—적합! --> <a href="foo.cgi?chapter=1&section=2">...</a>
HTML 문서 내에서만 &를 & 로 바꾸어야 하며 브라우저 주소창이나 이메일 본문에서는 &를 써야 한다.
웹 서버에서는 &가 아니라 &만을 인식하기 때문이다.
실전 XHTML 가이드(2)-구조적 XHTML 사용 방법
1) 잘못 사용하고 있는 태그
무분별한 테이블 사용
<table width="640" cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="25" valign="top">
<img src="title_01.gif">
</td>
</tr>
<tr>
<td>
레이아웃에 table element 를 사용하는 이유는 아마도 쉽기 때문일 것이다. 쉽다는
것 보다는 "익숙해서" 가 더 큰 이유일지도 모른다. 대다수의 사람들은 처음부터 아주
당연하게 table 을 사용해 왔고 그렇게 되어 있는 사이트를 더 많이 봤을 것이다.
</td>
</tr>
</table>
<table>은 행과 열이 있는 2차원의 데이터를 표시하는데에 사용되는 태그이다.
그러나 위와 같이 단순히 제목과 문단을 구분하는 데에도 표를 사용한다.
이와 같은 데이터는 표가 아니기 때문에 <table>태그를 사용해서는 안되고
의미에 맞는 <h1>이나 <p>와 같은 태그를 사용해주어야 한다.
잘못된 위치, 태그, 스크립트 사용
<table cellpadding="0" cellspacing="0">
<form action="/search/" method="get">
<tr>
<td>
<select>
<option>제목</option>
<option>내용</option>
<option>작성자</option>
</select>
</td>
<td>
<input type="text" size="10" class="type-text" />
</td>
<td>
<a href="javascript
</td>
</tr>
</form>
</table>
<form>의 위치
<form>을 사용해서 제작하다 보면 디자인상에서 나타나서는 안되는 공백이 생기는 것을 볼 수 있다.
이와 같은 현상을 피하기 위해서 많은 사람들이 <form>태그를 <tr>태그 사이에 넣는다.
하지만 이와 같은 사용은 잘못된 문법 오류이다.
<form>의 여백을 없애기 위해서 스타일을 사용하면 된다.
form { margin: 0; }
<form>의 summit
<form>의 summit을 자바스크립트로 하는 것은 잘못된 xhtml 사용이다.
<form>의 summit을 하기 위해서는
<input type="submit"> 또는 <input type="image">를 사용하면 된다.
<img>태그를 이용해서 이미지 버튼을 삽입하고 이것에 <a>태그와 자바스크립트를 이용해서 summit을 하게되면 자바스크립트가 작동하지 않는 상황에서는 summit이 일어날 수 없어 접근성을 떨어뜨린다.
href
href는 하이퍼텍스트 주소를 값으로 할 수가 있는데 위에서 사용된 "javascript
불필요한 <table>의 사용
위의 경우 <select>와 텍스트를 입력받는 <input>, 그리고 summit 버튼으로 이루어져 있는데 이를 각각 <td>안에 넣는 것도 불필요한 <table>사용이다.
<form action="/search/" method="get" onsubmit="validation(this)">
<div class="search">
<select>
<option>제목</option>
<option>내용</option>
<option>작성자</option>
</select>
<input type="text" size="10" class="type-text" />
<inpyt type="image" src="button_search.gif" alt="검색" />
</div>
</form>
2) 그룹 요소 : div, span
페이지를 제작할 때에는 각각의 의미를 갖고 있는 컨텐츠를 묶거나 표시를 해줄 필요가 있다.
이럴 때 사용하는 태그가 <div>와 <span>이다. 의미에 맞는 태그를 사용해서 페이지를 제작한 다음에 <div>나 <span>을 이용해서 단위별로 구분을 해 주어야 한다.
block 과 inline
<div>와 <span> 둘다 그루핑에 사용되는 엘리먼트지만, <div>는 block이고 <span>은 inline이라는 큰 차이점이 있다.
block과 inline은 화면에서 엘리먼트들이 랜더링 되는 기본 모양을 지칭한다.
block과 inline은 이 엘리먼트 뒤에 개행이 이루어지는지로 구분할 수 있다.
<div>를 이용하면 뒤에 개행이 이루어지고 <span>을 이용하면 개행이 이루어지지 않는다.
<div class="name">홍길동</div> <div class="age">24 세</div>
"홍길동" 다음에 줄이 바뀌어서 "24세" 라고 나온다.
<span class="name">홍길동</span> <span class="age">24 세</span>
"홍길동" 뒤에 개행이 되지 않고 한줄에 "홍길동 24세" 와 같이 나온다.
<div>, <form>, <ul>, <ol>, <li>, <dl>, <dt>, <dd> 등이 block들이고 <a>, <img>,
<select>, <input> 등이 대표적인 inline 엘리먼트들 이다.
표제(Heading)
제목을 표시할 때에 사용한다. <h1>~<h6> 까지 heading 태그가 있다.
가장 중요한 제목을 <h1>으로 묶어주게 되고 그 아래의 중요도를 갖는 것은 <h2>, <h3>등을 이용해서 제목을 표기한다.
※ <h1>의 하위 heading은 <h2>여야지 <h3>나 <h4>와 같이 단계를 건너뛰는 것은 좋지않다.
문단(paragraph)
<p>태그는 문단을 나타낼 때에 사용한다.
브라우저 별로 <p>태그의 간격이 다르기 때문에 간격을 CSS로 제어하게 되면 브라우저와 상관없이 일관된 디자인을 유지할 수 있다.
<p>를 사용할 때에는 반드시 닫는 태그도 사용해주어야 한다.
하나의 문단을 <p>와 </p>로 감싸는 식으로 작성을 해야 한다.
<p>첫번째 문단</p>
<p>두번째 문단</p>
<p>세번째 문단</p>
※ <p>는 하위에 block 요소를 포함할 수 없다. 텍스트나 이미지와 같은 inline요소만을 하위에 포함할 수 있기 때문에 주의해야 한다.
구문(em, strong, dfn, code, samp, kbd, var, cite, abbr, acronym)
강조(strong, em)
<em>,<strong>은 문장안에서 강조를 나타낸다.
<em>은 이탤릭으로, <strong>은 볼드체로 나타난다.
문장안에서 중요도가 있을 때에는 <em>,<strong>을 사용하고, 단지 이탤릭이나 볼드를 표현하고자 할 때에는 <i>,<b>를 사용해야 한다.
정의
<dfn>태그
코드
<code>는 컴퓨터 코드를 나타내는 태그이고, <samp>는 코드의 결과 출력물을 나타낼 때에 사용한다.
값의 표시
<kbd>는 유저의 키보드 입력을 나타내고, <var>는 프로그램에서의 변수를 나타낸다.
<kbd>Enter</kbd>키를 누트세요
출처
<cite>는 인용이나 출처를 밝힐 때에 사용한다.
축약
<abbr>는 축약어를 나타내고 <acronym> 은 두문자어를 나타낸다.
보통 약어를 그대로 발음하는 것은 <acronym>을 사용하고 한글자씩 읽는 것은 <abbr>을 사용한다.
인용(blockquote, q)
다른 인용문을 표시할 때에 사용한다.
<blockquote>는 block 요소의 인용문이고 <q>는 inline요소의 인용을 나타낸다.
<blockquote>는 인덴트를 해서 보여주게 되고 <q>는 인용문 앞 뒤로 따옴표를 나타내 준다.
첨자(sup, sub)
위첨자나 아래첨자를 나타내고자 할 때 사용한다.
x<sup>2</sup> + 4x + 4 = (x+2)<sup>2</sup>
형식을 가지고 있는 컨첸츠 (pre)
미리 형식을 가지고 있는 내용을 나타내고자 할 때 <pre>태그를 사용한다. 이 태그를 사용하게되면 공란도 갯수에 맞게 나오고 글자폭이 일정한 폰트로 화면에 나오게된다. 소스 코드등을 나타날 때에 많이 사용한다.
단, 자동 줄바꿈이 되지 않기 때문에 너비가 제한적일 때에는 주의해서 사용해야 한다.
<pre class="code">function menuOn(imgEl)
{
imgEl.src = imgEl.src.replace(".gif",
"_on.gif");
}
function menuOut(imgEl) {
imgEl.src = imgEl.src.replace("_on.gif",
".gif");
}</pre>
추가 및 삭제 (ins, del)
문서에 추가된 내용이나 삭제된 내용을 명시할 때에 사용한다.
<ins>새로추가</ins> : 밑줄로 표현
<del>삭제된 내용</del> : 취소선으로 표현
목록 (ul, ol, dl)
Unordered List
<ul>은 하위로 <li>엘리먼트를 갖게 되고 각 <li>엘리먼트의 앞부분에는 불렛이 나타나게된다.
Ordered List
<ol>은 하위로 <li>엘리먼트를 갖게 되고 각 <li>엘리먼트의 앞부분에는 자동적으로 숫자가 나오게 된다.
Definition List
<dl>은 하위로 <dt>와 <dd>엘리먼트를 갖게 되고 <dt>는 term을 <dd>는 definition을 나타낸다. 실전 CSS 레이아웃(1) 1) CSS 개념 및 소개 CSS는 문서의 구조와 디자인을 분리할 수 있게 해줌으로써 웹 제작이나 유지관리를 간단하게 해 준다. 또한 미디어 별로 스타일을 적용할 수 있기 때문에 각 기기별로 다른 스타일이 적용된 모습을 만들 수 있다. 위의 사이트들은 전혀 다른 사이트 같지만 실제적으로는 동일한 사이트이다. 동일한 HTML을 사용하면서 CSS만 바꿔서 사이트의 디자인을 다르게 표현한 것이다. 내용의 구조와 디자인이 완벽하게 분리되어 있기 때문에 디자인 요소인 CSS만 바꾸어도 다른 사이트처럼 보이게 할 수 있다. CSS의 선언 p.text { CSS의 선언(rule)은 선택자(selector)와 선언부로 이루어져 있다. 위의 rule에서 "p.text"부분이 바로 selector이고 그 뒤에 나오는 {}안의 내용이 선언부이다. p.text, selector들은 ,(comma)를 이용하여 구분할 수 있다. "p.text"와 "span.name"은 ,(comma)로 구분되어 있다. 이경우 "text"라는 class를 갖는 <p>엘리먼트와 "name"이라는 class를 갖는 <span>엘리먼트는 둘다 폰트의 색이 rgb #666666으로 나타나게 된다. 2) CSS 선택자(Selector) 일반선택자 공용선택자(*) : 모든 태그를 지정 타입선택자(A) : 태그 A를 지정 클래스선택자(.A) : 클래스가 A인 태그를 지정 ID선택자(#A) : 아이디가 A인 태그를 지정 *(공용 선택자) : 모든 엘리먼트를 선택한다. * { <h1>,<h2>,<p>,<form>,<blockquote>등의 브라우저 기본 마진과 패딩을 갖고 있는 엘리먼트들의 여백이 없어지게 된다. div.search * { div.search안의 모든 엘리먼트가 세로로 가운데 정렬이 된다. E(타입 선택자) : E엘리먼트를 선택한다. "body"와 같이 사용하면 body 엘리먼트를, "div"와 같이 사용하면 div엘리먼트를 선택한다. .E(클래스 선택자) : class는 하나의 페이지에서 여러번 사용할 수 있기 때문에 반복적으로 나오는 스타일의 경우 class로 지정해서 정의하여 사용하게 된다. #E(아이디 선택자) : descendant selector와 같이 사용하면 우선순위의 조정에 많이 사용된다. 복합 선택자 하위 선택자(A B) : 태그 A로 감싸져 있는 태그 B를 지정 자식 선택자(A>B) : 태그 A로 감싸져 있는 태그 B중 한 단계 밑에 것을 지정 인접 선택자(A+B) : 태그 A와 B가 연속으로 나와 있는것을 지정 E F (하위 선택자) : E 엘리먼트의 하위에 있는 F 엘리먼트들을 선택한다. 보통 ID Selector와 함께 사용하여 중복 선언을 피하고자 할 때 많이 사용한다. 또한 불필요하게 class를 많이 적어주지 않아도 많은 하위 엘리먼트를 한번에 선택할 수 있기 때문에 유용하다. <ul id="list"> 위와 같은 코드에서 a 엘리먼트에 스타일을 적용하고자 할 때 일일이 a 엘리먼트에 class를 기입하지 않아도 아래와 같이 하면 모든 하위 a 엘리먼트에 스타일을 적용할 수 있다. ul#list a:link, E>F (자식 선택자) : E 엘리먼트의 자식 엘리먼트인 F 엘리먼트를 선택한다. <ul class="depth1"> 위의 코드에서 ul.depth1과 ul.depth2의 <li>에 스타일을 적용할 경우 ul.depth1 li { 이렇게 정의하게 되면 ul.depth2의 <li>까지 스타일이 적용된다. ul.depth1>li { 이때 child selector를 사용해주면 depth1의 <li>만 선택을 해서 스타일을 적용할 수 있게 된다. E+F (인접 선택자) : E와 F엘리먼트가 서로 근접해 있는 형제관계일 경우를 선택한다. 제목 바로 아래의 문단에만 특정 스타일을 적용하는 경우와 같이 다른 엘리먼트가 디자인 적으로 영향을 미칠 때에 유용하게 사용할 수 있다. <h2>브라우져 워</h2> 제목 바로 다음에 나오는 문단의 첫글자를 크게 나타내고자 할 경우 이 셀렉터를 이용하면 별도의 추가 마크업 없이 쉽게 구현할 수 있다. h2+p:first-letter { 별도의 코드 없이 타이틀 바로 다음의 "웹" 이라는 글자와 "우"자를 선택하여 스타일이 적용된다. 가상 클래스 선택자 first-child 선택자 (A:first-child) - 태그 A로 감싸져 있는 가장 처음 태그를 지정 언어 선택자 (A:lang(B)) - 태그 A중 언어가 B로 설정된 것을 지정 링크 선택자 (A:link) - 태그 A중 링크가 걸려있으면 지정 (A:visited) - 태그 A중 링크가 걸렸고 사용자가 이미 클릭한 태그를 지정 동적 선택자 (A:active) - 태그 A중 사용자가 마우스를 누르고 있는 태그를 지정 (A:hover) - 태그 A중 사용자가 마우스 포인터를 위에 올려 놓은 태그를 지정 (A:focus) - 태그 A중 사용자의 키보드 입력을 받는 태그를 지정 E:first-child(:first-child 수도 클래스) : E 엘리먼트 중에서 맨처음 나오는 E엘리먼트를 선택한다. E:lang(c)(언어 수도 클래스) : 언어가 c인 E엘리먼트를 선택한다. E:link, E:visited ( 링크 수도 클래스) : 링크가 E엘리먼트와 방문한 E링크 엘리먼트를 선택한다. E:active, E:hover, E:focus (동적 수도 클래스) : 사용자 액션이 active, hover, focus인 E엘리먼트들을 선택한다. 동적 선택자 :first-line 선택자 (A:first-line) : 태그 A의 문단 중 첫번째 줄을 지정 :first-letter 선택자 (A:first-letter) : 태그 A의 문단 중 첫번째 글자를 지정 :before 선택자 (A:before) : 태그 A의 문단 앞을 지정 :after 선택자 (A:after) : 태그 A의 문단 뒤를 지정 3) CSS 선언 방법 외부선언 (external css) <link rel="stylesheet" type="text/css" href="myCss.css" /> HTML <head> 엘리먼트에 위와 같이 선언하여 외부에 별도의 파일로 되어 있는 CSS 정의를 불러온다. 여러 HTML 파일이 하나의 CSS파일을 공유할 수 있어서 표현에 일관성을 갖게 해준다. 우선 순위는 가장 낮다. 문서 안에 포함 (embeded css) <head> HTML <head> 엘리먼트 안에 <style>엘리먼트를 사용하여 하나의 문서 안에 CSS를 정의한다. 엘리먼트에 직접 선언 (inline css) <div style="padding: 10px; border: 1px solid #eee;"> HTML 엘리먼트에 style 속성을 이용하여 직접 선언하는 방법이다. 사용자 정의 스타일(user defined css) 가장 우선 순위가 높은 선언으로 웹페이지 제작자가 선언하는 것이 아니라 웹사이트를 이용하는 사용자가 직접 자신에게 맞는 스타일을 선언하는 방법이다. 4) CSS 적용의 체크 포인트 4가지 첫째, XHTML이 표준 문법이어야 한다. W3C의 Markup Validation Service(http://validator.w3.org)를 이용 둘째, XHTML 문서가 의미와 구조적으로 구성되어야 한다. 셋째, CSS가 표준 문법이어야 한다. 주석구문 : CSS /* comment */ HTML <!-- comment --> or // comment 단위표기 : CSS의 값들 중에 0을 제외한 모든 값들은 단위를 표기해야 한다. <td style=”padding: 15 20 10 30;”> (X) <td style=”padding: 15px 20px 10px 30px;”> (O) 반드시 단위를 기입해주고 세미콜론(;)으로 구문의 끝을 표시해야 한다. 잘못된 컬러값 사용 : 컬러의 이름을 넣는 방법 - color : red; #rrggbb 방법 - color : #ff0000; (=color : #f00;) rgb(r,g,b) 방법 - color : rgb(255,0,0); (=color:rgb(100%,0%,0%);) 넷째, CSS를 표준대로 잘 구현한 브라우저를 이용해야 한다. [출처] [웹표준] 06. 실전 CSS 레이아웃(1)|작성자 anne
CSS는 구조적으로 짜여진 문서(HTML, XML)에 style(글자, 여백, 레이아웃) 등을 적용하기 위해서 사용하는 language이다.
[css zengarden (http://csszengarden.com) 사이트]
margin: 0;
}
span.name {
color: #666;
}
margin: 0;
padding: 0;
}
vertical-align: middle
}
<li><a href="list.html?id=34&type=blah">item 34</a></li>
<li><a href="list.html?id=35&type=blah">item 35</a></li>
...
...
<li><a href="list.html?id=99&type=blah">item 99</a></li>
</ul>
ul#list a:visited {
color: #999;
}
ul#list a:hover,
ul#list a:active {
color: #000;
}
<li>
<a href="about.html>Company</a>
<ul class="depth2">
<li>
<a href="overview.html">Overview</a>
</li>
<li>
<a href="ceo.html">Ceo.html</a>
</li>
</ul>
</li>
</ul>
background: #f9f9f9;
border-bottom: 1px solid #ddd;
}
background: #f9f9f9;
border-bottom: 1px solid #ddd;
}
<p>웹스탠다드를 보다 잘 이해하기 위해서는 브라우져 워에 대해서 짚어볼 필요가
있습니다. 초창기에는 많은 브라우져들이 있었고 그중 사용자가 가장 많은 표준
브라우져는 넷스케이프 네비게이터(이하 NN)였습니다. 그리고 이 시장에
마이크로소프트(이하 MS)가 진입을 했습니다. 초기 windows(win95?) 사용자는
윈도우를 설치 하더라도 … 즉 많은 브라우져가 있었고 IE 에 의한 독점이 이루어지지
않고 서로 시장 점유율을 높이려고 노력하던 시대를 Browser War 라고 합니다.</p>
<h2>브라우져 독점의 폐단과 우리의 웹시장</h2>
<p>우리의 웹시장이 IT 에 대한 지원과 더불어 엄청난 속도로 발전을 했다는 것은
모든 사람이 아는 사실입니다. 그리고 그러한 발전이 양적인 발전이지 질적인 발전은
떨어진 다는 것도 대부분의 사람들이 인식하고 있는 사실입니다. …그리고 약간
비약하자면 이러한 현상에 브라우져의 독점 현상이 일조를 했습니다. 사람들은 MS 의
IE 에서 돌아가는 javascript 를 구현하고 MS 에서 제시하는 방법론을 아무 저항없이
받아 들였습니다.</p>
float: left;
font-size: 2.2em;
}
<style type="text/css">
body {
margin: 0;
padding: 0;
}
</style>
</head>
<p>contents</p>
</div>
[출처] [웹표준] 05. 실전 XHTML 가이드(2)|작성자 anne
[출처] [웹표준]04. 실전 XHTML 가이드(1)|작성자 anne
[출처] [웹표준] 03. 웹 표준 홈페이지 방법론|작성자 anne
[출처] [웹표준] 02. 웹 표준 스펙|작성자 anne
