Web Standard Guide 2005 Appendix1. ์ค์ ์น ํ์ค ๊ฐ์ด๋
์ค์ ์น ํ์ค ๊ฐ์ด๋
The Practice Guide for Development
based on Web Standards
2005.12
ํ๊ตญ์ํํธ์จ์ด์งํฅ์
-1- 2. ์ค์ ์น ํ์ค ๊ฐ์ด๋
Web Standard Practice by KIPA
Edited by Seokchan Yun, Jungsik Shin, Hyeonseok Shin, Sungno Lee
Copyright โ 2005 KIPA. All rights reserved.
This book is restricted by the confidential policy of KIPA. Anyone cannot
distribute or copy this book without acceptance of the company.
์ด ๊ฐ์ด๋์ ๋ด์ฉ์ ๋ํ ๋ชจ๋ ์ ์๊ถ์ ํ๊ตญ์ํํธ์จ์ด์งํฅ์์ ์์ผ๋ฉฐ, ๋ณธ
์ ๋ฌธ์ ์ ์ฑ
๋ฐ ์ ์๊ถ๋ฒ์ ๋ฐ๋ผ ๋ณดํธ ๋ฐ๋ ์ ์๋ฌผ์ด๋ฏ๋ก ๋ฌด๋จ ์ ์ฌ์ ๋ณต์ ๋ฅผ
๊ธํฉ๋๋ค.
-2- 3. ์ค์ ์น ํ์ค ๊ฐ์ด๋
๋ชฉ์ฐจ
๋ชฉ์ฐจ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 3
๊ทธ๋ฆผ ๋ชฉ์ฐจยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 7
์ ์ ์๊ฐยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 10
์๋ก ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 11
์ด ๊ฐ์ด๋์ ๋ชฉ์ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 12
์น ํ์ค์ ๋ํ ์คํดยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 16
์น ํ์ค์ด๋ ๋ฌด์์ธ๊ฐ?ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 17
์น ํ์ค ์คํ ์๊ฐ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 19
์น ํ์ค ํํ์ด์ง ๋ฐฉ๋ฒ๋ก ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 23
์ฐ๋ฆฌ ๋๋ผ ์น ํ์ค ํ์ค ๋ฐ ๊ณผ์ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 30
์ค์ XHTML ๊ฐ์ด๋ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท36
XTHML ์๊ฐยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 37
XTHML์ด๋ ๋ฌด์์ธ๊ฐ? ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 37
์ XTHML์ ์ฌ์ฉํด์ผ ํ๋๊ฐ? ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 38
XTHML ๋ฌธ์ ๊ตฌ์กฐ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 39
XHTML ์ผ๋ฐ ๋ฌธ๋ฒ ์ค์ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 41
๊ตฌ์กฐ์ XHTML ์ฌ์ฉ ๋ฐฉ๋ฒ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 44
์๋ชป ์ฌ์ฉํ๊ณ ์๋ ํ๊ทธ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 44
๊ทธ๋ฃน ์์: div, spanยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 46
ํ์ (Heading) ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 46
๋ฌธ๋จ(paragraph)ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 46
๊ตฌ๋ฌธ(em, strong, dfn, code, samp, kbd, var, cite, abbr, acronym)ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 47
ํ์์ ๊ฐ์ง๊ณ ์๋ ์ปจํ
์ธ (pre) ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 48
์ถ๊ฐ ๋ฐ ์ญ์ (ins, del) ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 48
๋ชฉ๋ก (ul, ol, dl)ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 48
์ค์ CSS ๋ ์ด์์ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท50
CSS ์ ๋๋ก ์ฌ์ฉํ๊ธฐ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 51
CSS ๊ฐ๋
๋ฐ ์๊ฐ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 53
CSS(Cascading Style Sheet)๋ ๋ฌด์์ธ๊ฐ? ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 53
CSS ์ ํ์(Selector)ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 54
CSS ์ ์ธ ๋ฐฉ๋ฒ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 65
CSS ์ ์ฉ์ ์ฒดํฌ ํฌ์ธํธ 4๊ฐ์ง ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 66
CSS ๋ ์ด์์(LAYOUT) ๊ธฐ์ด ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 70
-3- 4. ์ค์ ์น ํ์ค ๊ฐ์ด๋
ํ
์ด๋ธ ๋ ์ด์์ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 70
CSS ๋ ์ด์์์ด๋?ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 70
๊ธฐ๋ณธ ๋ ์ด์์ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 72
์ปฌ๋ผํ ๋ ์ด์์ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 77
๋ชฉ๋ก(List)ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 81
๋ฐ์ค ๋ชจ๋ธ(Box Model)ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 83
ํ
์ด๋ธ(Tables)ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 90
CSS Hackยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 93
์ค์ ์์ ๋ฅผ ํตํ CSS ๋ ์ด์์ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 95
์ ์ฒด์ ์ธ ๊ตฌ์กฐ์ ๋งํฌ์
ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 95
์๋จ ๋ถ๋ถ(#head) ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 97
์ข์ธก ์์ญ (#sub)ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 101
๋ณธ๋ฌธ ์์ญ (#body) ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 105
ํ๋จ ์์ญ (#foot)ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 107
์๋ฃยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 109
๊ณ ๊ธ CSS ๋ ์ด ์์ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 110
CSS๋ฅผ ์ด์ฉํ ๋์์ธ ํ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 110
CSS ๊ฐ๋ฐ ๋ฐ ๊ฒ์ฆ ๋๊ตฌ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 115
์ค์ DOM/Script ๊ฐ์ด๋ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท122
ํ์ค DOM ๊ธฐ๋ฐ ๊ฐ๋ฐ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 123
W3C DOM vs. MS DOM ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 123
DOM ๊ธฐ๋ณธ ๊ธฐ๋ฅ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 125
DOM ํธํ ๊ธฐ๋ฅ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 128
์ด๋ฒคํธ(Events) ๊ธฐ๋ฅ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 131
XML ๊ธฐ๋ฅ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 133
ํ์ค JAVASCRIPT ์ฌ์ฉ ๋ฐฉ๋ฒ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 136
ECMAscript vs. Jscript?ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 136
์คํฌ๋ฆฝํธ ๊ฐ๋ฐ์ ์ ์์ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 137
๋๋ฒ๊น
๋ฐ ํ์ง ๊ด๋ฆฌ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 143
๊ธฐ๋ณธ ๋๋ฒ๊น
๋ฐฉ๋ฒ๋ก ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 143
๋๋ฒ๊น
๋๊ตฌ ์ด์ฉ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 144
์ฌ๋ฐ๋ฅธ ํ๋ฌ๊ทธ์ธ(PLUGIN) ์ฌ์ฉ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 149
์ธ๋ถ ๊ฐ์ฒด ์ด์ฉ ๋ฐฉ๋ฒยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 149
ActiveX์ ๋์ Plugin ๊ธฐ์ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 152
๋ธ๋ผ์ฐ์ ๋ด์ฅ ๊ธฐ์ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 156
์น ์ดํ๋ฆฌ์ผ์ด์
ํ์คํ ๋ํฅ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 158
-4- 5. ์ค์ ์น ํ์ค ๊ฐ์ด๋
์ค์ ํ์ค ์น ํ๋ก๊ทธ๋๋ฐ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท162
ํ์ค MIME ํ์
์ค์ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 163
Apache์์ ์ค์ ๋ฐฉ๋ฒ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 165
IIS์์ ์ค์ ๋ฐฉ๋ฒ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 167
PHP์์ ์ค์ ๋ฐฉ๋ฒ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 168
Apache Tomcat์์ ์ค์ ๋ฐฉ๋ฒ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 168
Perl/Python ๋ฑ์ผ๋ก ์ด CGIยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 170
ํ์ค ๋ฌธ์ ์ธ์ฝ๋ฉ ์ง์ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 171
๋ฌธ์์์ ์ง์ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 173
์น ์๋ฒ ํ๋ก๊ทธ๋จ์์ ์ง์ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 175
์ฐธ๊ณ ๋ฌธํยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 179
์ค์ ์น ํ์ค ๊ฐ๋ฐ ํ๋ก์ธ์ค ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท181
๊ธฐ์กด ์น ๊ฐ๋ฐ ํ๋ก์ธ์ค ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 182
ํ์ฌ ํ๋ก์ธ์ค ์๊ฐ(Waterfall ๋ฐฉ์)ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 182
์ญํ ์ ์ค์ฌ์ผ๋ก ํ ๊ฐ๋ฐ ๊ณต์ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 187
๊ฐ์ ๋ ๋ชจ๋ธ(ํผ๋ธ๋ฆฌ์
์ค์ฌ) ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 192
์๋ก์ด ๊ฐ๋ฐ ํ๋ก์ธ์ค ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 195
๊ธฐํ/๋ถ์/ํ์ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 195
๊ธฐํ์ ๊ณต์ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 196
ํผ๋ธ๋ฆฌ์
๊ณต์ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 199
๋์์ด๋ ๊ณต์ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 209
ํ๋ก๊ทธ๋๋จธ ๊ณต์ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 210
๋งบ์๋งยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 213
๋ถ๋ก. ์น ํ์ค ๋ธ๋ผ์ฐ์ ํธํํ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท214
์น ๋ธ๋ผ์ฐ์ ํํฉ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 215
์ธํฐ๋ท ์ต์คํ๋ก๋ฌ7 ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 215
๋ชจ์ง๋ผ(Mozilla) ๊ณ์ด ์น๋ธ๋ผ์ฐ์ : ํ์ด์ดํญ์คยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 216
์คํ๋ผ ๋ธ๋ผ์ฐ์ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 217
์ฌํ๋ฆฌ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 218
์ฅ์ ์ธ ์น ์ ๊ทผ์ฑ ์ฒดํฌ ๋ฆฌ์คํธ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 220
HTML ๋ธ๋ผ์ฐ์ ํธํํ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 223
์๋์ฐ์์ ์ฃผ์ ์น๋ธ๋ผ์ฐ์ ๋ณ HTML ์ง์ ๋ด์ญ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 223
๋ธ๋ผ์ฐ์ ๋ณ HTML3/4 ์ง์ ์ผ๋ํ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 224
ํ์ค HTML4.01/XHTML ๋ธ๋ผ์ฐ์ ํธํ ์ฐจํธ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 228
-5- 6. ์ค์ ์น ํ์ค ๊ฐ์ด๋
HTML 4.01 ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 228
XHTML 1.0ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 241
XHTML 1.1ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 241
ํ์ค CSS ๋ธ๋ผ์ฐ์ ํธํ ์ฐจํธยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 243
CSS 2.1 Unit ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 243
CSS 2.1 Importanceยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 245
CSS 2.1 At-rules ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 245
CSS 2.1 Selectors ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 245
CSS 2.1 Pseudo-classesยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 246
CSS 2.1 Pseudo-elements ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 246
CSS 2.1 Basic propertiesยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 246
CSS 2.1 Print propertiesยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 261
CSS 2.1 Voice propertiesยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 261
CSS 2.1 Conformance ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 264
CSS 3 Units ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 265
CSS 3 At-rules ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 268
CSS 3 Selectors ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 270
CSS 3 Pseudo-classesยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 270
CSS 3 Pseudo-elements ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 272
CSS 3 Basic propertiesยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 272
CSS 3 Print properties ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 275
ํ์ค DOM 2/3 ๋ธ๋ผ์ฐ์ ํธํ ์ฐจํธ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 277
DOM Level 3 Core ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 277
DOM Level 2 Events ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 281
DOM Level 2 HTML ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 283
DOM Level 3 Load and Save ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 293
DOM Level 2 Style ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 294
DOM Level 2 Traversal and Range ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 300
DOM Level 3 Validation ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 301
DOM Level 2 Views ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 302
์ฐธ๊ณ ์ฌ์ดํธ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 303
๊ฐ ์น ํ์ค ๋ธ๋ผ์ฐ์ ๋ณ ํธํ ์ฌ๋ถ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 303
๊ตญ๋ด ์น ํ์ค ์ปค๋ฎค๋ํฐ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 303
-6- 7. ์ค์ ์น ํ์ค ๊ฐ์ด๋
๊ทธ๋ฆผ ๋ชฉ์ฐจ
๊ทธ๋ฆผ 1 ์ญ์ฌ์์ ์น ๋ธ๋ผ์ฐ์ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 11
๊ทธ๋ฆผ 2 ์น ํ์ค์์ ๊ตฌ์กฐ, ํํ, ํ๋์ ๋ถ๋ฆฌ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 13
๊ทธ๋ฆผ 3 W3C HTML Validator์ ์คํ ๋ชจ์ต ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 15
๊ทธ๋ฆผ 4 ์น ํ์ค์ ์ ์ ํ๋ ํ์คํ ๊ธฐ๊ตฌ, ์น ์ปจ์์์(http://w3.org) ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 18
๊ทธ๋ฆผ 5 ์น ํ์ค์ด ์ ํด ์ง๋ ์์ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 18
๊ทธ๋ฆผ 6 ์น ์ ๊ทผ์ฑ ํ๊ฐ ๋๊ตฌ, KADO-WAH ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 23
๊ทธ๋ฆผ 7 ๊ตฌ์กฐ์ ์ผ๋ก ํํํ๊ฒ๊ณผ ํ๊ทธ๋ก๋ง ํํํ ํ์ด์ง ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 24
๊ทธ๋ฆผ 8 ๊ตฌ์กฐ์ ํํ์ ๋ถ๋ฆฌ๋ฅผ ํตํด ๋์์ธ ๋ฐ ์ ๊ทผ์ฑ์ด ํ๋ณด๋ ์น ํ์ด์ง (1)์ ๊ธฐ๋ณธ ์คํ์ผ ์์, (2)
๋ ๊ตฌ์กฐ์ ๋งํฌ์
์ ํตํ HTML์์ค (3)์ ์คํ์ผ์ ๊ฑท์ด ๋์ ๋ ์๋งจํฑ ๋ด์ฉ๋ง ์๋ ๋ชจ์ต ยทยทยทยทยทยท 27
๊ทธ๋ฆผ 9 ํจ๋ ๋ฒํธ๋ฅผ ๋๋ฅด๋ฉด ๋ด์ฉ์ด ๋ฐ๋๋ ์์ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 28
๊ทธ๋ฆผ 10 CSS Zen Garden์ ํ๋์ HTML์ ์คํ์ผ ๋ณ๊ฒฝ ๋ง์ผ๋ก ๋ค์ํ ๋์์ธ์ ์ ๋ณด์ด๊ณ ์๋ค.
ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 53
๊ทธ๋ฆผ 11 ์ผ๋ฐ ์ ํ์ ๊ฐ๋
๋ (์ถ์ฒ: http://andsite.net)ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 55
๊ทธ๋ฆผ 12 ๋ณตํฉ ์ ํ์์ ์ข
๋ฅ (์ถ์ฒ: http://andsite.net/)ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 56
๊ทธ๋ฆผ 13 ์ธ์ ์ ํ์ ์ฌ์ฉ ์์ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 59
๊ทธ๋ฆผ 14. ๊ฐ์ ํด๋์ค ์ ํ์ ์ข
๋ฅ (์ถ์ฒ: http://andsite.net/) ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 59
๊ทธ๋ฆผ 15 ๋์ ์๋ ํด๋์ค ์ฌ์ฉ ์์ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 60
๊ทธ๋ฆผ 16 ๋์ ์ ํ์ ์ข
๋ฅ (์ถ์ฒ: http://andsite.net/) ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 61
๊ทธ๋ฆผ 17 focus ์๋ ํด๋์ค ์ฌ์ฉ ์์ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 62
๊ทธ๋ฆผ 18 :first-child ์๋ ํด๋์ค ์ฌ์ฉ ์์ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 63
๊ทธ๋ฆผ 19 first-line, first-letter ์๋ ํด๋์ค ์ฌ์ฉ ์์ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 64
๊ทธ๋ฆผ 20 ์ฌ์ฉ์๊ฐ ์คํ์ผ์ ์ ํ ๊ฐ๋ฅํ๋๋กํ ํ์ค ๊ธฐ๋ฐ ์์ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 66
๊ทธ๋ฆผ 21 W3C CSS Validator ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 67
๊ทธ๋ฆผ 22 ์ผ๋ฐ์ธ๋ค์๊ฒ ํ์ค ์น ๋ธ๋ผ์ฐ์ ๋ฅผ ํ๋ณดํ๋ BrowseHappy ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 69
๊ทธ๋ฆผ 23์นํ์ด์ง๋ฅผ ๊ทธ๋ฆฌ๋๋ก ๋ฐ๋ผ๋ณด๊ณ ์ ๊ทผํ ๊ฒ(์ข์ธก)๊ณผ ๊ตฌ์ฑ์์๋ก ๊ตฌ๋ถํ์ฌ ์ ๊ทผํ ์ธก๋ฉด(์ฐ์ธก) ยท 71
๊ทธ๋ฆผ 24 CSS ๋ฐ์ค ๋ชจ๋ธ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 83
๊ทธ๋ฆผ 25 ๋ผ์ด๋ ๋ฐ์ค ํํ์ ์ํ ๋ฐฐ๊ฒฝ ๋ถ๋ฆฌ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 110
-7- 8. ์ค์ ์น ํ์ค ๊ฐ์ด๋
๊ทธ๋ฆผ 26 Wired.com์ ํตํด ๋ณธ CSS ํ์ผ ์์ ์ฌ๋ก ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 112
๊ทธ๋ฆผ 27 ์ ๋ณดํต์ ๋ถ์ ํ
์คํธ, ์๊ฐ ์ฅ์ ์ธ, ๋ชจ๋ฐ์ผ ํ์ด์ง ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 113
๊ทธ๋ฆผ 28 ์คํ์ผ ๋ณ๊ฒฝ์ผ๋ก ๋ ์ด์์ ๋ณ๊ฒฝ ์ฌ๋ก (http://PhonoPhunk.phreakin.com) ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 115
๊ทธ๋ฆผ 29 ๋๋ฆผ์๋ฒ MX 2004๋ฅผ ํตํด ๋ณธ CSS ๋ ์ด์์ ๊ธฐ๋ฅ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 116
๊ทธ๋ฆผ 30 HTML Tidy๋ฅผ ํตํ ์ ํจ์ฑ ๊ฒ์ฌยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 121
๊ทธ๋ฆผ 31 ๋ค์ํ ์น ๋ธ๋ผ์ฐ์ ๋ฅผ ํ๋ฒ์ ๋์ ํ
์คํธ ํ๋ ๋ชจ์ต ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 144
๊ทธ๋ฆผ 32 IE ๊ฐ๋ฐ์ ํด๋ฐ๋ฅผ ํตํ DOM ์คํฌ๋ฆฝํธ ๋๋ฒ๊น
ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 145
๊ทธ๋ฆผ 33 Venkman์ ํตํ ์คํฌ๋ฆฝํธ ๋๋ฒ๊น
ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 146
๊ทธ๋ฆผ 34 DOM Inspector๋ฅผ ํตํ DOM ๋๋ฒ๊น
(Firefox ๋ด์ฅ) ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 147
๊ทธ๋ฆผ 35 Firefox ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ์์ ํตํ ๋๋ฒ๊น
ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 148
๊ทธ๋ฆผ 36 ํ์ด์ดํญ์ค์์ ์๋์ฐ ๋ฏธ๋์ด ํ๋ ์ด์ด ์กํฐ๋ธX๊ฐ ์คํ๋๋ ๋ชจ์ตยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 154
๊ทธ๋ฆผ 37 XUL๋ก ๊ฐ๋ฐํ ์๋ง์กด ์๋น์ค ๋ธ๋ผ์ฐ์ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 155
๊ทธ๋ฆผ 38 Flex์ ์๋น์ค ํ๋ซํผ ๊ตฌ์กฐ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 156
๊ทธ๋ฆผ 39 Ajax๋ก ๊ตฌํํ Google Maps ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 157
๊ทธ๋ฆผ 40 Canvas๋ฅผ ์ด์ฉํ 3D ๊ฒ์ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 158
๊ทธ๋ฆผ 41 XForm๊ณผ WebForm์ ๊ด๊ณ๋ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 160
๊ทธ๋ฆผ 42 W3C์ ์น ์ดํ๋ฆฌ์ผ์ด์
ํฌ๋งท ์ํน ๊ทธ๋ฃน ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 161
๊ทธ๋ฆผ 43 ๊ธฐ์กด ์น ๊ฐ๋ฐ ๊ณต์ ํ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 183
๊ทธ๋ฆผ 44 ํ์
์ ์ด๋ฃจ์ด ๋ด์ง ๋ชปํ๋ ๊ฐ๋ฐ ๊ณต์ ํ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 184
๊ทธ๋ฆผ 45 ์์กด์ ์ธ ์คํ ๋ฆฌ ๋ณด๋์ ์ ํ์ ์ธ ์ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 185
๊ทธ๋ฆผ 46 ๋์์ด๋ ์ค์ฌ ๊ฐ๋ฐ ๊ณต์ ํ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 189
๊ทธ๋ฆผ 47 ๊ฐ๋ฐ์ ์ค์ฌ ๊ฐ๋ฐ ๊ณต์ ํยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 190
๊ทธ๋ฆผ 48 ๊ธฐํ์ ์ค์ฌ ๊ฐ๋ฐ ๊ณต์ ํยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 191
๊ทธ๋ฆผ 49 ๊ฐ์ ๋ ๊ฐ๋ฐ ๊ณต์ ๋ํ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 193
๊ทธ๋ฆผ 50 ์คํ ๋ฆฌ ๋ณด๋ ์์ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 197
๊ทธ๋ฆผ 51 CSS ์คํ์ผ ๊ฐ์ด๋ ์์ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 205
๊ทธ๋ฆผ 52 Opera์ ๋ด์ฅ๋ ๋๋ฒ๊ฑฐ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 207
๊ทธ๋ฆผ 53 Firefox Web Developer Extensions์ ์ด์ฉํ ๋๋ฒ๊น
ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 208
๊ทธ๋ฆผ 54 ๋ค์์ปค๋ฎค๋์ผ์ด์
์์ ์ฌ์ฉํ๋ UI ๊ฐ์ด๋๋ผ์ธ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 209
-8- 9. ์ค์ ์น ํ์ค ๊ฐ์ด๋
๊ทธ๋ฆผ 55 ๋น์ง๋์ค ๋ก์ง ๋ถ์๋ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 210
๊ทธ๋ฆผ 56 MVC ๋ชจ๋ธ ์ค๋ช
๋ ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 211
๊ทธ๋ฆผ 57 ๋ธ๋ผ์ฐ์ ์์ฅ ์ ์ ์จ (2005.10ํ์ฌ) ยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท 215
-9- 10. ์ค์ ์น ํ์ค ๊ฐ์ด๋
์ ์ ์๊ฐ
์ค์์ฐฌ (E-mail) channy@gmail.com (Blog) http://channy.creation.net/blog
์ ํ์ (E-mail) hyeonseok@gmail.com (Blog) http://hyeonseok.com/blog
์ด์ฑ๋
ธ (E-mail) eouia0819@gmail.com (Blog) http://eouia0.cafe24.com/blog
์ ์ ์ (E-mail) jshin@i18nl10n.com
- 10 - 11. ์ค์ ์น ํ์ค ๊ฐ์ด๋
์๋ก
1993๋
4์ 22์ผ ๋ฏธ๊ตญ ์ผ๋ฆฌ๋
ธ์ด ๋ํ์์ ์ผ๋จ์ ํ์๋ค์ด ๊ฐ๋ฐํ ๋ชจ์์ดํฌ(Mosaic)๋ผ๋
์์ ๊ณต๊ฐ ์ํํธ์จ์ด ์น๋ธ๋ผ์ฐ์ ๋ ์ค๋๋ ์น์ด ์ ์ธ๊ณ์ ์ํฅ์ ๋ผ์น๊ฒ ํ๋ ํ๋ช
์ ์ธ
์ฒซ ์ถ๋ฐ์ด์๋ค. ์ด ์น๋ธ๋ผ์ฐ์ ์ ๊ทผ๋ณธ ์์ด๋์ด๋ฅผ ๊ธฐ์ด๋ก ๋ง์ดํฌ๋ก์ํํธ์ ๋ท์ค์ผ์ดํ์ฌ
๋ฑ์์ ๊ฐ๋ฐํ ์ ์์ ์น๋ธ๋ผ์ฐ์ ๋ค์ด ๋์ ๊ฐ์ถ์ ๋ฒ์ด๊ณ , ์ด์ ๋ ๋ท์ค์ผ์ดํ ๋ค๋น๊ฒ์ด
ํฐ๊ฐ ์์ฅ ์ ์ ์ ์คํจํ๋ฉด์ MS์ฌ์ ์ธํฐ๋ท ์ต์คํ๋ก๋ฌ๊ฐ ์์ฅ ์ง๋ฐฐ์ ์ธ ์์น์ ๋ค์ด์
์๋ค.
๋ธ๋ผ์ฐ์ ์์ฅ์ ์ ์ ์ ๋์ ์๋ก๊ฐ์ ์น๋ธ๋ผ์ฐ์ ์ ๋ฐฐํ์ ์ธ ๊ธฐ์ ์ ๋์
ํ๋ ๋๋จธ์ง
๋ ๊ฐ์ ์นํ์ด์ง๊ฐ ๋ค๋ฅด๊ฒ ๋ณด์ด๊ณ ์๋ก์์ ๊ตฌํํ์ง ๋ชปํ๋ ๊ธฐ์ ๋๋ฌธ์ ๋ง์ ํผ๋์
๊ฒช์ด ์๋ค. ์ด๋ฌํ ์ํธ ํธํ ๋ฏธ์ฑ์์ผ๋ก ๋ง๋ฏธ์์ ์น๊ธฐ์ ์ด ํผ๋ ์ํ์ ์์ด ์๋ ๊ฒ์ด
์ฌ์ค์ด๋ค. ํ์ฌ์๋ ์ด๋ฏธ ๋ง์ดํฌ๋ก์ํํธ๊ฐ IE๋ก ์์ฅ ์ง๋ฐฐ๋ ฅ์ ๋ํ๊ณ ์๋ ์ด ์์ ์ธ
๋ฐ๋ค ๋ ์ด์ ์น๋ธ๋ผ์ฐ์ ๊ฐ ์ ๊ธฐํ ๋๊ตฌ์ด์ง ์๊ธฐ ๋๋ฌธ์, ๋ค์ํ ์ธํฐ๋ท ํ๊ฒฝ์์ ์ด๋ ํ
์น๋ธ๋ผ์ฐ์ ๊ฐ ๊ฐ์ฅ ์ต์ ์ ๊ตฌํ์ ์ ๊ณตํ๋๋๊ฐ ๊ด๊ฑด์ด ๋์๋ค.
๊ทธ๋ฆผ 1 ์ญ์ฌ์์ ์น ๋ธ๋ผ์ฐ์
๊ทธ๋ฌ๋ ๋ท์ค์ผ์ดํ์ฌ๊ฐ ์์ฌ์ ์น๋ธ๋ผ์ฐ์ ์์ค๋ฅผ ๊ณต๊ฐ ์ํํธ์จ์ด๋ก ์ ํ์ํค๋ฉด์ ํ์
ํ ๋ชจ์ง๋ผ(Mozilla) ์ฌ๋จ์ ์ ์ธ๊ณ ๊ฐ๋ฐ์๋ค์ ๋
ธ๋ ฅ์ ํ์
์ด ๊ฒฝ๋์ ์คํ ์์ค ์น๋ธ๋ผ
์ฐ์ ์ธ ํ์ด์ดํญ์ค(Firefox) 1.0์ ๋ด ๋์ผ๋ฉด์, ์ถ์ ๋์ง ๋ช ๊ฐ์ ๋ง์ ์ธํฐ๋ท ์ต์คํ๋ก
๋ฌ์ ๋ธ๋ผ์ฐ์ ์ ์ ์จ์ 90% ์๋๋ก ๋์ด ๋ด๋ฆฌ๊ณ ๋ท์ค์ผ์ดํ ์ดํ ์ฌ์ ์ต์ด๋ก 10% ์
์ ์จ์ ๋ฐ๋ผ๋ณด๊ณ ์๋ค. ๋
ธ๋ฅด์จ์ด์ Opera ๋ธ๋ผ์ฐ์ ๋ ๊ฐ๋ณ๊ณ , ๊ฐ์ข
OS ํ๋ซํผ๊ณผ ํ์ค ํธ
ํ์ฑ์ด ๋ฐ์ด๋ ๊ธฐ๋ฅ์ ๋ฌด๊ธฐ๋ก ์์ฅ์ ๊ฐ์ฒํด ๋๊ฐ๊ณ ์๋ค. ๋ฟ๋ง ์๋๋ผ ์ ๋์ค ๊ธฐ๋ฐ ์คํ
์์ค ํ๋ก์ ํธ KDE(K Desktop Environment)์์ ๊ฐ๋ฐํ KHTML ๋ธ๋ผ์ฐ์ง ์์ง์ ์
ํ์ด ์ฌํ๋ฆฌ ๋ธ๋ผ์ฐ์ ์ ์ฑํ๋์๊ณ PDA ๋ฐ Embedded Linux ๋ฑ ์ํ ๊ธฐ๊ธฐ์ ํ์ฌ๋
์ ์๋ ๊ฐ๋ฅ์ฑ์ผ๋ก ์น ๋ธ๋ผ์ฐ์ ์ ๋ค์ํ ์์ง ์ ์์ด ์๊ณ ๋๊ณ ์๋ค.
์ด๋ฌํ ํ์ฌ ์ํฉ์ ๋๊ณ ๋ง์ ์น ์๋น์ค ๊ฐ๋ฐ์๋ค์ด ๋ง์น 90๋
๋ ์ค๋ฐ์ ๋ธ๋ผ์ฐ์ ์ ์
์ค์ ์์๋ ๋นํธํ์ฑ์ ๊ณ ๋ คํด์ผ ํ๋ ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ง ๋ฌธ์ ๊ฐ ๋ค์ ๋๋๋๋ ๊ฒ ์๋๊ฐ
์ผ๋ คํ๊ณ ์๋ค. ์ฆ, ๋ค์ํ ๋ธ๋ผ์ฐ์ ์ง์์ด ๊ฒฐ๊ตญ ์๊ฐ๊ณผ ๋น์ฉ์ ๋ค์ฌ์ผ ํ๋ ๋ฌธ์ ์ด๋ฉฐ ์
์ ๋ธ๋ผ์ฐ์ ์ ๊ตณ์ด ๋น์ฉ์ ํฌ์ฌํ ํ์๊ฐ ์๋๊ฐ ํ๋ ์คํด๊ฐ ์กด์ฌํ๋ ๊ฒ์ด๋ค.
๋ณธ ๊ฐ์ด๋์์๋ ํ๋ ์น๋ธ๋ผ์ฐ์ ๋ค์ด ๊ณผ๊ฑฐ์๋ ๋ฌ๋ฆฌ ์น ํ์ค์ ์ค์ํ๊ณ ์๊ณ ๊ณ์์ ์ผ
๋ก ์ด๋ฅผ ์ง์ํ๊ธฐ ์์ํ๊ธฐ ๋๋ฌธ์ ์ด๋ฅผ ๋ฐฐ์ฐ๊ณ ๋ฐ๋ฅด๊ธฐ๋ง ํ๋ฉด ๋ณด๋ค ์ ๋ ดํ ๋น์ฉ์ผ๋ก ํ
- 11 - 12. ์ค์ ์น ํ์ค ๊ฐ์ด๋
ํ์ด์ง๋ฅผ ๊ตฌ์ถ ๋ฐ ์ ์ง ๋ณด์ ํ ์ ์๋ค๋ ๊ฒ์ ๋ณด์ฌ ์ค ์ ์์์ ๋ณด์ฌ ์ฃผ๊ณ ์ ํ๋ค. ๋
ํ, ์น์ ๊ทผ๋ณธ์ ์ธ ๋ชฉํ์ธ ๊ธฐ๊ธฐ ๋ฐ ์ด์ ์ฒด์ ๋
๋ฆฝ์ ์ธ ๋ณดํธ์ ์ธ ์น์ ๋ง๋ค ์ ์๋๋ก ํ
๊ณ ์๋ค. ์ ์ธ๊ณ์ ๋ง์ ์น์ฌ์ดํธ๋ค์ด ์ด๋ฏธ ์น ํ์ค์ ๊ธฐ๋ฐํ ํํ์ด์ง ์ ์ ๋ฐฉ์์ ๋์
ํ๊ณ ์์ผ๋ฉฐ ์ด๋ฅผ ํตํด ๋งค์ฐ ํจ๊ณผ์ ์ธ ์น์๋น์ค ์ฒด๊ณ๋ฅผ ๊ฐ์ถ๊ธฐ ์์ํ๊ณ ์๋ค.
์ด ๊ฐ์ด๋์ ๋ชฉ์
1989๋
์น(World-wide Web)์ ์ฒ์ ๋ฐ๋ช
ํ ํ ๋ฒ๋์ค ๋ฆฌ(Tim Berners-Lees)๋ CERN
์ฐ๊ตฌ์์ ์ ์ฒ๋ช
์ฐ๊ตฌ์๋ค์ด ์ด๊ธฐ์ข
OS์ ๊ฐ๋ฐ ํ๊ฒฝ์์ ์ ๋ณด๋ฅผ ๊ณต์ ํ ์ ์๋๋ก ๊ธฐ์ข
์ด๋ ํ๊ฒฝ๊ณผ ์๊ด์์ด ์ด๋ค ์ปดํจํฐ์์๋ ์ ๋ณด ์์์ ์ ๊ทผํ ์ ์๋ ์น์ ๋ง๋ค๊ฒ ๋์
๋ค. ์ด๋ฌํ ์น์ ๊ทผ๋ณธ ์ทจ์ง์๋ ๋ณดํธ์ ๋์์ธ(universal design), ๋ณดํธ์ ์ ๊ทผ(universal
access) ๊ฐ๋
์ด ๋ฟ๋ฆฌ๋ด๋ ค ์์ผ๋ฉฐ ์น์ ์ฌ์ฉํ๊ณ ์ ํ๋ ๋ค์ํ ํ๊ฒฝ๊ณผ ์ฌ๋๋ค์ ์ํด ๊ณต
ํต์ ์ธ ์ ๋ณด ์ํต ํต๋ก๋ฅผ ๋ง๋๋ ๊ฒ์ ์ ๋ณด์ ๊ฐ์น์ ๋น๋กํ์ฌ ์ค์ํ๋ค๊ณ ํ๊ฒ ๋ค. ์ด๋ฌํ
๊ฟ์ ์ด๋ฃจ๊ธฐ ์ํด Tim๊ณผ CERN์ ์น์ ๋ฐ๋ช
ํ์ ์๋ฌด๋ ์ฌ์ฉํ ์ ์๋ ๋ฌด์ ํ์ผ๋ก ํน
ํ๋ฅผ ์ฌ์ฉํ ์ ์๋๋ก ํ์๋ค.
์ฐ๋ฆฌ๋ค ์ค์๋ ๋
ธ์ธ, ์ฅ์ ์ธ, ์ด๋ฆฐ์ด ๋ฑ์ ๋ค์ํ ๊ณ์ธต๊ณผ ์๋์ฐ, ๋งคํจํ ์, ๋ฆฌ๋
์ค ๋ฑ ๋ค
๋ฅธ OS, IE์ ํ์ด์ดํญ์ค, ์คํ๋ผ ๋ฑ ๋ค๋ฅธ ๋ธ๋ผ์ฐ์ ๋ฅผ ์ฌ์ฉํ๋ ์ฌ๋์ด ์กด์ฌํ๋ค. ๋ํ, ํฅ
ํ TV ๋ธ๋ผ์ฐ์ , PDA ๋ฑ์ ๋ค์ํ ํด๋ ๊ธฐ๊ธฐ๋ฅผ ์ฌ์ฉํ๋ ์ฌ๋๊ณผ ์๋ ฅ์ด ์ฝํด์ ํ๋ฉด์
ํ๋ํด ๋ด์ผ ํ๋ ์ฌ๋๋ค์ด ์๋ค. ๋ค์ํ ์ฌ์ฉ์๋ค์ด ์ด๋ป๊ฒ ํ๋ฉด ํธํ๊ฒ ์น์ ์ด์ฉํ ์
์์๊น? ์ด๋ป๊ฒ ํ๋ฉด ์ ๋น์ฉ์ผ๋ก ์ ๊ทผ์ฑ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ ์ ์์์ง๋ฅผ ๊ณ ๋ฏผํ์ฌ ์ค๋ง๋ฆฌ๋ฅผ
ํ์ด ๋๊ฐ์ผ ํ๋ค. ํน์ ํ๋ซํผ์ ์ฌ์ฉ์๋ง์ด ํฅ์ ํ ์ ์๋ ์น์ ๋ง๋ค๋ฉด ๋ง๋ค์๋ก ๋ ๋ง
์ ์ ๋ณด๊ฐ ์น์ผ๋ก ์์์ ธ ๋์ค๊ธฐ ๋๋ฌธ์, ์ฅ์ ์ธ, ๋
ธ์ธ, ์ธ๊ตญ์ธ, ๋งคํจํ ์ ์ฌ์ฉ์, ๋ฆฌ๋
์ค
์ฌ์ฉ์๋ ์ ์ ๋ ์์ธ ๊ณ์ธต์ผ๋ก ์ ๋ฝํ์ฌ ์ด๋ฅธ๋ฐ ์ ๋ณดํ์ ํํด๊ฐ ๋๋ฌ๋๊ฒ ๋๊ธฐ ๋๋ฌธ์ด
๋ค.
์ด๋ฌํ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํ ๊ตฌ์ฒด์ ์ธ ๋ฐฉ๋ฒ์ ๋ฌด์์ผ๊น? ๋ณธ ๊ฐ์ด๋์์ ์ค๋ช
ํ๊ณ ์ ํ๋
ํต์ฌ ์์ง๋ ์๋์์ ๋งํ๋ ์ธ ๊ฐ์ง๋ก ์์ฝ ํ ์ ์๋ค.
๋ฏธ์
1. ์น ํ์ค์ ์ง์ผ๋ผ
์ ์ธ๊ณ์ ์ธ ์น ๊ธฐ์ ํ์ค์ ์ฃผ๋ํ๊ณ ์๋ W3C์ HTML4.1, XHTML1.0, CSS1/2,
DOM ๋ฑ์ ๊ตฌํ ์คํ์ด ๋งค์ฐ ์์ธํ๊ณ ์ด๋ฅผ ์ง์ํ๋ ๋ธ๋ผ์ฐ์ ๋ค์ด ๊ณ์ ๋์ด ๋จ์ ๋ฐ๋ผ
๋ ์ด์ ์นํ์ด์ง๊ฐ ๋ค๋ฅด๊ฒ ๋ณด์ด๊ฑฐ๋ ๋์ํ์ง ์๋ ํ์์ ๊ฑฐ์ ์ฌ๋ผ์ง๊ฒ ๋์๋ค. ๋ค๋ง
์น๋ธ๋ผ์ฐ์ ๊ฐ ์ด์ข
๊ธฐ๋ฅ์ด ์์ง์ ์์กดํ๊ณ ์๊ณ ์์ ์ ๊ฐ๋ฐ๋์ด ์ฌ์ฉ๋ ์ค๋๋ ๋ธ๋ผ์ฐ
์ ์ฌ์ฉ์๋ค์ ๋ถํธํจ์ ๊ณ ๋ คํด ๊ฐ์ ๊ธฐ๋ฅ์ด๋ผ๋ ํธํ ๊ฐ๋ฅํ๋๋ก ํด ์ฃผ๋ ํ์ค์ ํตํ
์นํ์ด์ง ์ ์์ด ์๊ตฌ๋๊ณ ์๋ค.
๊ทธ๋ฌ๋ ์ด๊ฒ์ด ์น๋ธ๋ผ์ฐ์ ์์ ์ง์ํ๋ ๋ฒ์ ํธํ์ฑ ์ ์ง(backward compatibility)๋ผ๋
๊ดด๋ฌผ๊ณผ ์ถฉ๋ํ๊ฒ ๋๋ค. ์ผ๋ฐ์ ์ผ๋ก ํ๋ก๊ทธ๋จ์ ๊ฐ๋ฐํ ๋, ๋ฒ์ ์ด ์ฌ๋ผ๊ฐ๋ฉด ๊ฐ์๋ก ์๋ก์ด
๊ธฐ๋ฅ์ ์ถ๊ฐํ๊ณ ์ด์ ๊ธฐ๋ฅ์ ํ๊ธฐํ๊ฒ ๋๋ค. ๊ทธ๋ฌ๋ ์ฌ์ฉ์์ ์ธก๋ฉด์์๋ ์์ ๊ธฐ๋ฅ์ ๊ณ
์ ์ ์งํด ์ฃผ์ด ๊ฐ๋ฐ ํธํ์ฑ์ ์ ์งํด ์ค ํ์์ฑ์ด ์๊ธด๋ค. ์ฆ, ๋ฒ์ ํธํ์ฑ ์ ์ง๋ ์์
์ ์ฌ์ฉ๋๋ ๊ธฐ๋ฅ์ด๋ ํ๊ทธ๋ฅผ ๊ทธ๋๋ก ์ฌ์ฉํ๋๋ก ํด ์ฃผ๋๋ฐ ์ด ๋ ์ฌ์ฉ๋ ๋นํ์ค ๋ฌธ๋ฒ๋ค
์ด ๊ณ์ ํ๋ ์ฌ์์ฐ ๋์ด ๊ฒฐ๊ตญ ์ ๊ทผ์ฑ์ ์ฌ๊ฐํ ์ํด๋ฅผ ์ฃผ๊ฒ ๋๋ค. ์ฌ๊ธฐ์๋ ์ทจ์ฝํ ์ฐ๋ฆฌ
๋๋ผ ์น ์์ฐ ์์คํ
์ ๋ฌธ์ ๋ ์๋ค. ์ฃผ๋ก ๋๋ชจ ์น ์๋ํฐ, ๋๋ฆผ ์๋ฒ์ ๊ฐ์ ์ ์ ๋๊ตฌ์
- 12 - 13. ์ค์ ์น ํ์ค ๊ฐ์ด๋
์์กดํ์ฌ ํ์ค์ ๋ฌด์ํ๊ณ , ๊ทธ๋ฅ ๋จ์ ์ฝ๋๋ฅผ ๋ฐ๋ค๊ฐ ์ ๋นํ ์ต์คํ๋ก๋ฌ์์๋ง ๋๋ ค๋ณด๊ณ
๊ฐ๋ฐ์ ๋๋ด๋ ํํ ์ ๊ทธ๋ฐ ์ ๋ณด ๊ฐ๊ณต์๋ค์ ๊ณ์ ์์ฐ ํ๋ ๊ต์ก ์์คํ
์ ๋ฌธ์ ๊ฐ ์๋ค.
์ด์ ๋ฐ๋๋ก XHTML 1.x์ด๋ HTML 4.x ํ์ค์ ๋ง์ถ์ด์ง ๋ฌธ์๋ 99% ์ ๊ทผ์ฑ์ด ๋์
์ฌ์ดํธ๋ค์ด๋ค. ๊ธฐ์กด์ ํํ ์ฌ์ฉ๋๋ table ๊ตฌ์กฐ๋ฅผ div ๋ฐ๊พธ๊ณ font, b ๊ฐ์ ํ๊ทธ๋ค์ ์ค
ํ์ผ์ํธ(CSS)๋ก ์ฌ์ฉํ๊ฒ ๋๋ฉด, HTML ์ฝ๋ ์์ ์ฝ๊ฐ ๊ณผ์ฅํด์ ๋ฐ ์ดํ๋ก ์ค์ด๋ ๋ค.
๊ตฌ์กฐ์ ํํ์ด ์๊ฒฉํ ๋ถ๋ฆฌ๋๋ฉด, ์ฌ์ดํธ์ ๋ก๋ฉ ์๋๋ ๋นจ๋ผ์ง๋ฉฐ, ์ฝ๋ฉ๊ณผ ์ ์ง ๋ณด์์ ํจ
์จ์ฑ์ ๋ ๋ฐฐ๋ก ๋์ด๋๋ค. ํ์ค์ ์งํจ ์ฌ์ดํธ์์๋ ์คํ๋ ค ์ฝ๋์ ์์ด ์ค๊ณ ์๋๊ฐ ๋
์ด๋๋ฉฐ ์ฌ๊ฐ๋ฐ ํจ์จ์ฑ์ด ์ฆ๋ ๋๋ค.
๋ฏธ์
2. ๊ตฌ์กฐ์ ํํ, ๋์์ ๋ถ๋ฆฌํ๋ผ
์น ํ์ค์์ HTML๊ณผ ํจ๊ป ์ค์ํ ๋ ๋ค๋ฅธ ์์์ธ ์คํ์ผ์ํธ(CSS)๋ ๋จ์ํ ๋งํฌ์ ์
์, ๊ธ์ ๋ชจ์ ๋ฐ๊พธ๋ ์ ๋๋ง ํ ์ ์๋ ๊ฒ์ด ์๋๊ณ , ๋ฌธ์์ ๋ฐฐ์น, ์ฌ๋ฐฑ ์กฐ์ , ์๊น, ์
์ ์์ฒด์ ์ฑ๊ฒฉ ๋ณํ, ํด๋์ค๋ฅผ ํตํ ๋์์ธ์ ์ผ๊ด์ฑ ํ๋ณด, ์๋ก ๋ค๋ฅธ ๋ฏธ๋์ด์ ๋ฐ๋ฅธ ์ต
์ ํ๋ ๋์์ธ ํ
ํ๋ฆฟ ์ ์ฉ ๋ฑ ์ด๋ฃจ ๋งํ ์ ์์ด ๋ง์ ์ญํ ์ ํ ์ ์๋ค.
๊ทธ๋ฆผ 2 ์น ํ์ค์์ ๊ตฌ์กฐ, ํํ, ํ๋์ ๋ถ๋ฆฌ
HTML ์์๋ ์ฒ ์ ํ๊ฒ ๊ตฌ์กฐํ๋ ๋งํฌ์
๋ง์ ์ฌ์ฉํ๊ณ , ๋ชจ์์ด๋ ๋์์ธ์ ๊ดํ ๊ฒ์
CSS๋ก ์์ ํ ๋ถ๋ฆฌํจ์ผ๋ก์จ, ๊ตฌ์กฐ๋ ๋ณํ์ง ์์ ์ฑ ์ฌ๋ฌ ๊ฐ์ง ๋์์ธ์ ์ ์ฉํ๋ค๊ฑฐ๋,
์ํฉ์ ๋ฐ๋ผ ์ฝ๊ฒ ๋์์ธ์ ๋ณ๊ฒฝํ๋ ๊ฒ์ด ๊ฐ๋ฅํด์ง๋ค. ๋ํ, ๋๊ฐ์ ๋์์ธ ํ
ํ๋ฆฟ์ ๋ค
๋ฅธ ๋ด์ฉ์ ๋ด๋ ์ฌ๋ฌ ๊ฐ์ง ๋ฌธ์๋ฅผ ๋ง๋๋ ๊ฒ๋ ๊ฐ๋ฅํด์ง๋ค. ๋๋ ๋์์ธ์ ์ ํ ์ํฅ์ ์ฃผ
์ง ์๊ณ ๋ฌธ์์ ๋ด์ฉ์ ๋ฐ๊พธ๋ ๊ฒ์ด ์ฌ์์ง๊ธฐ ๋๋ฌธ์ ์ฅ์ ์ธ์ ์ ๊ทผ์ฑ์ ์์ฒญ๋ ๋์์
์ค๋ค. ์๋ฅผ ๋ค์ด, ํ ๊ฐ์ HTML ๋ฌธ์์ ์๊ฐ ์ฅ์ ์ธ์ฉ CSS์ ํ
์คํธ์ฉ CSS ๊ทธ๋ฆฌ๊ณ ๊ธฐ
์กด์ CSS ๋ฑ ์ธ ๊ฐ์ ์คํ์ผ์ํธ๋ฅผ ๋ง๋ค์ด ๋ณ๊ฒฝํด ์ค์ ๋ฐ๋ผ ๋ฌธ์์ ๊ตฌ์กฐ๊ฐ ๋ด์ฉ๊ณผ ์์ด
์ง ์๊ณ ์ ๊ณต ๋ ์ ์๋ค.
์ฐ๋ฆฌ๋๋ผ ๋๋ถ๋ถ์ ์น์ฌ์ดํธ๋ค์ด ๋ฌธ์์ ๊ตฌ์กฐ์ ์ธ ์์์ธ h1, ul, strong, blockquote, cite
๋ฑ ๋ณด๋ค๋ font, table, br ๋ฑ์ ์์๊ฐ ์๋ฏธ์ ์ธ ๋ด์ฉ๊ณผ ์์ฌ ์์ด ๋ฌธ์ ์ค์์ ๋๋์ฒด ์ด
- 13 - 14. ์ค์ ์น ํ์ค ๊ฐ์ด๋
๋ค ๊ฒ์ด ์ค์ํ ์ง, ์ ๋ชฉ์ ํด๋น๋๋ ์ง, ๊ฐ์กฐํ ๊ฒ๊ณผ ์ธ์ฉ๋ ๊ฒ์ด ์ด๋ค ๊ฒ์ด์ง ํ๋ ๊ฒ์
์ดํดํ ์ ์๊ฒ ๋๋ค. ๋ฌธ์์ ๋ด์ฉ์ด ๊ตฌ์กฐํ ๋์ด ์์ง ์๋ค๋ ๊ฒ์ ๊ฒฐ๊ตญ ์ฅ์ ์ธ์ฉ ๋ณด์กฐ
๊ธฐ๊ธฐ, ๋๋ PDA, TV, ์์ฑ ๋ธ๋ผ์ฐ์ ๋ฑ์ ํตํด์๋ ์ ๊ทผํ ์ ์๊ฑฐ๋, ์ ๊ทผํ์ ๋์ ๋ฐ
๋ฅธ ๊ฒฐ๊ณผ๋ฅผ ์ป์ด ๋ผ ์ ์๋ค๋ ์ด์ผ๊ธฐ๊ฐ ๋๋ค. ๋์์ธ ์์๊ฐ CSS๋ก ์์ ํ ๋ถ๋ฆฌ๋๋ฉด, ์
๋ฏธ ์๊ณ ๊ตฌ์กฐํ๋ ๋ด์ฉ๋ง ๋จ๊ฒ ๋๋ฉฐ, ๋ฌธ์์ ํํ์๋ ์ ์ฝ ์ฌํญ์ด ๋ฐ์ํ์ง ์๊ฒ ๋๋ ๊ฒ
์ด๋ค. ์ต์
์ ๊ฒฝ์ฐ, CSS๊ฐ ์ ๊ฑฐ๋์ด๋ ์๋ฏธ๋ฅผ ์ดํดํ๋ ๋ฐ์๋ ์๋ฌด๋ฐ ๋ฌธ์ ๊ฐ ์๊ฒ ๋๋ฉฐ
์ด๊ฒ์ด ์น ์ ๊ทผ์ฑ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๋๋ฐ๋ ๋์์ ์ค๋ค.
๋ํ, ๊ตฌ์กฐ์ ํํ์์ ํ๋์ ๋ถ๋ฆฌํ๋ ๊ฒ๋ ๋งค์ฐ ์ค์ํ๋ค. ์น ๋ฌธ์์ ๋ด์ฉ์ ์๋ฐ ์คํฌ
๋ฆฝํธ๋ฅผ ํตํด ๋์ ์ผ๋ก ์ฌ์ฉํ๊ณ , ์ฌ์ฉ์์ ๋ฐ์์ ์ฃผ๊ณ ๋ฐ๋ ํ๋(Behavior)๋ ์ค์ํ ๋ถ
๋ถ์ผ๋ก ์ธ์๋๊ณ ์๋ค. ์ด๋ฌํ ํด๋ผ์ด์ธํธ ์คํฌ๋ฆฝํ
์ ๊ธฐ๋ณธ์ผ๋กํ๋ ๋์ ์ธ ํ๋ ์์์ด
์ฌ์ค ์ ๊ทผ์ฑ ๋ฐ ์ฌ์ฉ์ฑ์ ์ ํดํ๊ณ ๋ฐ ๋ณต์ก์ฑ์ ๋์ด๋ ์์๋ก ์๊ฐ๋์ด ์๋ค. ๊ทธ๋ฌ๋, ์ต
๊ทผ ๊ตฌ์กฐ์์ ํ๋ ์์์ ๋ถ๋ฆฌํ๋ ๋ค์ํ ๋ฐฉ๋ฒ๋ก ์ด ์ ์๋๋ฉด์ ์ ๊ทผ์ฑ์ ํด์น์ง ์์ผ๋ฉด
์ ์ฝ๋๋ฅผ ๊ฐ๋จํ๊ฒ ํ๋ ๋ค์ํ ๋ฐฉ๋ฒ๋ค์ ์ ์ฉํ ์ ์๊ฒ ๋์๋ค. ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ํํ์ด
์ง์ ๋ง๊ตฌ ์ค์
๋ฃ๋ ๊ฐ๋ฐ ๋ฐฉ์์์ ๋ณํํ ์ ์๋ค๋ ๊ฒ์ด๋ค.
๋ฏธ์
3. ์ต์ํ์ ๋๋ฒ๊น
์ ๊ฑฐ์ณ๋ผ.
W3C์์ ์ ์ํ HTML ํน์ XHTML ํ์ค์ ์งํค๊ณ , CSS๋ฅผ ํตํด ๊ตฌ์กฐ์ ํํ์ ๋ถ๋ฆฌ
ํ์๋ค ํ๋๋ผ๋ ์ด๊ฒ์ ๊ฒ์ฆํด ๋ณผ ์ ์๋ ๋ฐฉ๋ฒ์ด ์๋ค๋ฉด ์ญ์ ๊ทธ ๋ฌธ์ ํด๊ฒฐ์ด ์ฝ์ง ์
์ ๊ฒ์ด๋ค. ๋คํํ W3C์์๋ ์ด๋ฌํ ๋ฌธ์ ๋ฅผ ๊ฒ์ฆ ํด์ฃผ๋ ์ ํจ์ฑ ๊ฒ์ฌ(Validation) ๋๊ตฌ
๋ค์ด ์ ๊ณต๋๊ณ ์๋ค. doctype์ ๊ท์ ๋ ๋ฌธ์ ํ์์ ๋ฐ๋ผ ์ ํจํ ์ฝ๋๊ฐ ์ฌ์ฉ๋์๋์ง๋ฅผ
์ ์ ์๊ฒ ํด์ค๋ค. (http://validator.w3.org)
HTML๊ณผ XHTML ๋ฌธ์๋ฟ๋ง ์๋๋ผ CSS ์ญ์ ์์ ์ด ์ฌ์ฉํ ํํ์๊ณผ ๋ฌธ๋ฒ์ด ์ ๋๋ก
๋์ด ์๋์ง ์๋ ค ์ฃผ๋ ๋๊ตฌ๊ฐ ์กด์ฌ ํ๋ค. ์ฒ์ ์ด ๊ฒ์ฌ๊ธฐ๋ฅผ ๋๋ ค ๋ณด๋ฉด ์ ๋ง์ ๋ฌธ์ ๋ค์ด
๋์ค๊ฒ ๋ ์๋ ์๋ค. ๊ทธ๋ฌ๋ ๋๋ถ๋ถ์ ๋ฌธ์ ๋ค์ ์์๋ฅผ ๋ฐ์ดํ ๋ฑ์ผ๋ก ๋ฌถ์ง ์์๊ฑฐ๋, ?,
& ๊ฐ์ ํน์ ๋ฌธ์๋ฅผ ํน์ ์ฝ๋๋ก ์ฐ์ง ์๋ ๋ฑ ๋ฐ๋ณต๋๋ ๋ช ๊ฐ์ง ์ค์๋ฅผ ํฌํจ ํ๊ณ ์์ผ
๋ฏ๋ก ๊ฐ๋จํ ์์ ๋ง์ผ๋ก ์ ํจ์ฑ ๊ฒ์ฌ๋ฅผ ํต๊ณผ ํ ์ ์๋ค.
๋ํ, ๋ฌธ์ ์์ ๋ค์ด ์๋ ์์๋ฅผ ๊ฐ์ฒดํ ์์ผ ์ฌ์ฉํ๋ DOM(Document Object
Method)๊ณผ ์ด๋ฅผ ์ด์ฉํ๋ ์๋ฐ ์คํฌ๋ฆฝํธ(JavaScript) ๋ฑ์ ์ฌ์ฉํ๋๋ฐ ์์ด๋ ํ์ค ๋ฌธ๋ฒ
์ ์ฌ์ฉํ๋์ง ํ์ธํ๋ ๊ณผ์ ์ด ํ์ํ๋ค. ์คํ์์ค ๋ธ๋ผ์ฐ์ ์ธ Mozilla Firefox์ ํ์ฌ๋
์๋ฐ ์คํฌ๋ฆฝํธ ๋๋ฒ๊ฑฐ ๋ง์ผ๋ก๋ ์ธํฐ๋ท ์ต์คํ๋ก๋ฌ์ ๊ณตํต์ผ๋ก ์๊ธฐ๋ ๋ฌธ์ ์ ์ ๋ฐ๊ฒฌ ํด
๊ฒฐํ ์ ์๊ณ , ๋นํ์ค์ผ๋ก ์ฌ์ฉ๋ ๋ฌธ๋ฒ์ ํ๋ณํด ๋ผ ์ ์๋ค. ๊ทธ๋ฌ๋ ์น์ฌ์ดํธ ๊ฐ๊ณต์๋ค์ด
์ด๋ฌํ ๋๋ฒ๊น
๊ณผ์ ์ ๋น ๋จ๋ฆฌ๊ณ ๋ฉํ์ ํ๊ฑฐ๋ ์์ฑํ๋ ๊ฒฝ์ฐ๊ฐ ๋๋ถ๋ถ์ด๊ธฐ ๋๋ฌธ์, ์น ์ฌ
์ดํธ ๊ด๋ฆฌ์๋ค์ด ๊ฒ์(Quality Assurance) ๊ณผ์ ์์ ์ด๋ฌํ ์ ํจ์ฑ ํต๊ณผ์ ํ์ค ๋ฌธ๋ฒ ์ฌ
์ฉ ๊ฒ์ฆ ๊ฒฐ๊ณผ๋ฅผ ์ฒจ๋ถํ๋๋ก ๊ฐ์ด๋ ํ๋ค๋ฉด ๋ณด๋ค ์ข์ ํ์ง์ ๊ฐ์ง ๊ฒฐ๊ณผ๋ฌผ์ ์ป์ ์ ์์
๊ฒ์ด๋ค.
- 14 - 15. ์ค์ ์น ํ์ค ๊ฐ์ด๋
๊ทธ๋ฆผ 3 W3C HTML Validator์ ์คํ ๋ชจ์ต
๋ฏธ์
4. ํจ์จ์ ์ธ ์น ๊ฐ๋ฐ ๋ฐฉ๋ฒ๋ก ์ ๊ฐ์ ธ๋ผ.
์น์ ์์ฐํ๋ ์์คํ
์์๋ ์น ๊ธฐํ์์ ์น ๊ฐ๋ฐ์๋ผ๋ ์ง๊ตฐ์ด ํจ๊ป ์กด์ฌํ๋ค. ์น ์์ฐ
๊ณต์ ์์ ์น ๋์์ธ๊น์ง ์ด๋ค์ ์ผ๊ฐ ๊ตฌ๋๋ฅผ ์ด๋ฃจ๊ณ ์์ผ๋ฉฐ, ์๋ก ๊ฐ์ ์
๋ฌด ์ญํ ์ด๋ ๊ด
์ฌ ์์ญ์์ ํ์ฐํ ์ฐจ์ด๊ฐ ๋๋ฌ๋๋ค. ๋ฐ๋ผ์ ์น์ฌ์ดํธ๋ฅผ ๋ง๋๋ ์ด๋ค์ด ์๋ก ํ๋ ฅํ์ง ์
๋ ๋ค๋ฉด ํ๋ก์ ํธ๋ ์ฐ์ผ๋ก ๊ฐ๋ฉฐ ๋ฐ๋ผ์ ์น์ฌ์ดํธ๋ ์ ๋๋ก ๋ ํ์ง์ ์งํฌ ์ ์๋ค.
์น์ฌ์ดํธ๋ฅผ ๋ง๋๋ ์ผ์ ๊ธฐํ->๋์์ธ->๊ฐ๋ฐ์ด๋ผ๋ ์ปจ๋ฒ ์ด์ด ๋ฒจํธ ์์ ๋์ ๋ฌผ๊ฑด๊ณผ ๊ฐ๋ค.
์ด๊ฒ ๊ณต์ฅ์ด๋ผ๋ฉด ์ปจ๋ฒ ์ด์ด ๋ฒจํธ๋ง ํต๊ณผํ๋ฉด ์์ฑํ์ด ํ๋ ๋์ค์ง๋ง, ๋ฌธ์ ๋ ์ด ์ปจ๋ฒ ์ด์ด
๋ฒจํธ์ ํ ๋ฌผ๊ฑด์ ์ฌ์ฉ์ ํ
์คํธ๋ ์๊ตฌ ์ฌํญ ๋ณ๊ฒฝ์ ๋ฐ๋ผ ์ด ์ปจ๋ฒ ์ด์ด ๋ฒจํธ๋ฅผ ๋ช ๋ฒ์ฉ
์ฎ๊ฒจ์ง๋ค๋ ๋ฐ ์๋ค. ์ด ๊ณผ์ ์์ ๋๊ฐ ์ปจ๋ฒ ์ด์ด ๋ฒจํธ์ ์๋ก ์ฌ๋ ค ๋์๋๋์ ๋ฐ๋ผ ์๋ก
๊ฐ์ ํผํด ์์์ด ์๊ธฐ๊ฒ ๋๋ค.
์๋ก๋ฅผ ํํ ์ ์๊ณ ๋ง์์ผ๋ก๋ง ์ญ์ผ ์ ๋ฐ์ ์๋ค. ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๋ ๋ฐฉ๋ฒ์ ์๋ก ์์ญ์
๋๋์ด ๊ณต๋ ์์
์ ํ๋ ๊ฒ์ด๋ค. ๋ง์น ์๊ณ์ ๋ถํ์ ๊ฐ์ ์์
ํด์ ์กฐ๋ฆฝ๋ง ๋ ์ ์๋๋ก
ํ๋ ๊ฒ์ด๋ค. ๊ทธ๋ฌ๊ธฐ ์ํด์๋ ์น ํ์ค์ ํตํ ๊ณต์ ์ด ๋งค์ฐ ์์ฐ์ ์ด๋ค.
์น ํ์ค์์ ๋งํ๋ ์น์ ๋ด์ฉ์ ๋ด๋ ๊ตฌ์กฐ(HTML, XHTML), ํํ(CSS), ์์(์๋ฐ์คํฌ
๋ฆฝํธ, ์๋ฒ ์ธก ๊ฐ๋ฐ)์ ๋ถ๋ฆฌ์์ผ ๊ฐ๋ฐํ๋๋ก ๊ถ์ฅํ๊ณ ์๋ค. ๊ตฌ์กฐ๋ ๋จ์ํ HTML๋ก ์ด
ํ์ด์ง์์ ๋ฃ๊ณ ์ถ์ ๋ด์ฉ๋ง์ ๊ฐ์ถ๋ฆด ์ ์๋ค. ๊ฐ๋จํ ํ
ํ๋ฆฟ์ ์ฌ์ฉํ๋ฉด ๊ธฐํ์๋ค์ด ์ฐ
๋ ์คํ ๋ฆฌ ๋ณด๋์ฒ๋ผ ๋ ์ด์์์ ๋ง๋๋ ๊ฒ์ด ๊ฐ๋ฅํ๋ค.
HTML์ ํํ๊ณผ ๋ด์ฉ์ ๋ถ๋ฆฌํ์ง ์๊ณ ๋ค ์ง์ด ๋ฃ๋ ํํ ๊ฐ ๋ฐ๋๋ฉด ๊ธฐํ์์ ๋์์ด๋,
๊ฐ๋ฐ์๊ฐ ๊ฐ์ ์๊ฐ์ ๊ฐ์ ์ผ์ ํ๋ ๊ฒ์ด ๊ฐ๋ฅํ๊ฒ ๋๋ค. ๊ธฐํ์๊ฐ ๊ธฐํ์์ ๋๊ธฐ๊ณ ๋ค
๋ฅธ ๊ธฐํ์ ํฌ์
๋๋ฉฐ ๋์์ด๋๋ ๋์์ธ๋ง ๋๊ธฐ๊ณ ๋ค๋ฅธ ํ๋ก์ ํธ์ ํฌ์
๋๊ณ , ๊ฐ๋ฐ์๊ฐ ์ฝ
๋ฉ๋ง ํ๊ณ ๋ค๋ฅธ ๊ฐ๋ฐ์ ํ๊ฒ ๋๋ ์ผ์ด ์์ด์ง๋ฉด ์ํธ๊ฐ ํ๋์ ํ์ผ๋ก์ ๊ฐ์ ์ผ์ ๊ฐ์
์์ ์ผ๋ก ๋ฐ๋ผ๋ณผ ์ ์๋ ๊ฒ์ด๋ค.
๊ธฐํ์์ ๊ฐ๋ฐ์, ๊ทธ๋ฆฌ๊ณ ๋์์ด๋๋ค์ ์๋ก ๋ค๋ฅธ ์ฌ๊ณ ๋ฐฉ์๊ณผ ์๊ฐ์ ๊ฐ์ง ์ฌ๋๋ค์ด๋ค.
๊ธฐํ์๋ค์ ๋น์ฆ๋์ค๋ฅผ ์๊ฐํ๊ณ ๋์์ด๋๋ค์ ์๊ฐ์ ์ธ ์์๋ฅผ ๋ ์ค์ํ๋ค. ๊ฐ๋ฐ์๋ค์
- 15 - 16. ์ค์ ์น ํ์ค ๊ฐ์ด๋
๊ทธ๋ค์ด ์ฌ์ฉํ๋ ๊ธฐ์ ์ ๊ด์ฌ์ด ์๋ ๊ฒ์ ๋๋งํ ๋์๊ฐ ์๋ค.
๊ทธ๋ผ์๋ ๋ถ๊ตฌํ๊ณ ๊ทธ๋ค์ ๋ชจ๋ ์ฎ๋ ๊ฒ์ ์น(Web)์ด๋ผ๋ ํ
๋๋ฆฌ์ด๋ค. ์น ๊ธฐํ์๊ฐ ์๋
๋ผ๋ฉด ๊ทธ๋ค์ด HTML์ ์ดํดํ ํ์๋ ์๊ณ , DB์ ์๋ฒ๋ฅผ ์ ํ์๋ ์๋ค. ๋ฐ๋ผ์ ์ด๋ฌํ
์ง๊ตฐ์ ๊ทผ๋ฌดํ๋ ์ฌ๋๋ค์ ์น์ ๋ํ ์๋ฏธ์ ์ธ์์ ๊ฐ์ดํ๋ ๊ณต๊ฐ๋๋ฅผ ๊ฐ์ง ํ์๊ฐ ์๋ค.
์น ํ์ค์ ๋ํ ์คํด
์น ํ์ค๊ณผ ์น ์ ๊ทผ์ฑ์ ๊ฐ์กฐํ๋ค ๋ณด๋ฉด ์ฌ๋๋ค๋ก๋ถํฐ ๋ค์๊ณผ ๊ฐ์ ์ง๋ฌธ์ ๋ฐ๊ฒ ๋๋ค. ์น ํ
์ค๊ณผ ์ ๊ทผ์ฑ์์ ์งํค๋ ๊ฒ์ด ์ด๋ค ํํ์ ์ป์ ์ ์๋์ง ์์ ๋ณธ๋ค.
ํ๋ คํ๊ณ ์ธ๋ จ๋ ์นํ์ด์ง๋ฅผ ๋ง๋ค ์ ์๋ค?
ํํ๋ค ์ฐ๋ฆฌ๋๋ผ ์นํ์ด์ง๋ ์ธ๊ตญ๋ณด๋ค ์ญ๋์ ์ด๊ณ ํ๋ คํ๊ฒ ํ๋ ๊ฒ์ ์ข์ํ๊ธฐ ๋๋ฌธ์
์ ๊ทผ์ฑ์ ๊ฐ์กฐํ๋ฉด ๊ทธ๊ฒ์ ๋ฌ์ฑํ๊ธฐ ์ด๋ ต๋ค๊ณ ๋ค ํ๋ค. ๊ทธ๋ฌ๋ ์ด๋ ํ ์ ๊ทผ์ฑ ์ง์นจ์์๋
๊ทธ๋ฆผ์ด๋ ๋ฉํฐ๋ฏธ๋์ด ์ฐ์ง ๋ง๋ผ๊ณ ํ์ง ์์ผ๋ฉฐ, ๊ทธ๋ฆผ์ ๋ชป ๋ณด๋ ์ฌ๋๋ค์ ์ํด ๋์ฒด ํ
์ค
ํธ๋ฅผ ํจ๊ป ๋ฃ์ผ๋ผ๋ ๊ฒ๋ฟ์ด๋ค. ๋ ์ด์์ ์ฅ์์ ์ํด ๊ทธ๋ฆผ์ ๋ง์ด ์ฌ์ฉํ๋ ๊ฒฝ์ฐ, CSS์
๋ฐฐ๊ฒฝ(background)์ผ๋ก ๊ทธ๋ฆผ์ ๋ฃ์ด๋ฒ๋ฆฌ๋ฉด ๊ฐ๋ฅํ๋ฉฐ ํ๋์ฌ๋ฅผ ์ด์ฉํด ๋ฉ๋ด๋ฅผ ๊ตฌ์ฑ ํ๋
๊ฒฝ์ฐ, ๋์ฒด ํ
์คํธ ๋ฉ๋ด๋ฅผ ํ๋์ฌ๋ฅผ ํํํ๋ object ์ฌ์ด์ ํฌํจ์์ผ ์ฃผ๊ธฐ๋ง ํด๋ ๋๋ค.
์ ๊ทผ์ฑ ๋์ ์ฌ์ดํธ๊ฐ ์จํต ํ
์คํธ๋ก๋ง ๊ตฌ์ฑ๋ ์ง๋ฃจํ๊ณ , ๋ฉ์๋ ์ฌ์ดํธ๋ผ๊ณ ์๊ฐํ๋ ๊ฒ
์ ์๋ชป๋ ํธ๊ฒฌ์ด๋ค. ์ ๊ทผ์ฑ ์ง์นจ์์ ๊ฒฐ์ฝ ๋์์ธ๊ณผ ํํํ๊ฑฐ๋ ์์ถฉ๋๋ ๋ถ๋ถ์ ๊ฑฐ์ ์
์ผ๋ฉฐ, ์ด๋ฏธ CSS๋ฅผ ํ์ฉํ ์ธ๊ตญ์ ์ฌ์ดํธ๋ค์ ์ ๊ทผ์ฑ์ด ๋์ผ๋ฉด์๋ ํ๋ คํ๊ณ , ๊น๋ํ ์ฌ์ด
ํธ๊ฐ ๋๋ถ๋ถ์ด๋ค. ์ฐ๋ฆฌ ๋๋ผ๋ ์คํ๋ ค ์น ์๋น์ค ๊ฐ๊ณต์๋ค์ ๋ํ ์ฌ๊ต์ก ๋ถ์ฌ์ ๊ธฐ์กด์
๋นํจ์จ์ ์ด๊ณ ํ์ค์ ํ์ฉํ์ง ๋ชปํ๋ ์์
ํํ์์ ๋ฌธ์ ๊ฐ ์์ ๋๋ ๊ฒ์ด๋ค.
์ ๊ทผ์ฑ์ด ๋์ ์ฌ์ดํธ๋ ๋น์ฉ์ด ํจ์ฌ ์ฆ๊ฐํ๋ค?
๋ฌผ๋ก ๊ธฐ์กด์ ์ ๊ทผ์ฑ์ ์ ํ ๊ณ ๋ คํ์ง ์๊ณ ๋ง๋ ์ฌ์ดํธ๋ฅผ ๊ณ ์น๋ ค๋ฉด ์๋นํ ๋น์ฉ์ด ๋ค์ด๊ฐ
๋ ๊ฒ์ด ์ฌ์ค์ด๋ค. ๊ทธ๋ฌ๋ ๋๋ถ๋ถ์ ์น์ฌ์ดํธ๋ค์ด ์ฌ๋ฌ ๋ฒ ๋ฆฌ๋ด์ผ์ด๋ผ๋ ๊ณผ์ ์ ํตํด ๊ณ์
๋ณ๊ฒฝํ๊ณ ์์ผ๋ฉฐ, ์ด๋ฌํ ๋ฆฌ๋ด์ผ์ ์์ํ ๋ ์ฒ์๋ถํฐ ์ ๊ทผ์ฑ์ ์ผ๋ํด ๋๊ณ ์๊ฒฉํ ์น
ํ์ค์ ์
๊ฐํด ๊ฐ๋ฐํ๋ฉด, ๊ฒฐ์ฝ ๋น์ฉ์ด ๋ง์ด ๋ค์ด๊ฐ์ง ์๋๋ค.
์ด ๋ ๊ฒ ๊ฐ๋ฐ๋ ์ ๊ทผ์ฑ์ด ๋์ ์ฌ์ดํธ๋ฅผ ๋ค์ ์ฌ๊ฐ๋ฐํ๋๋ฐ ๋๋ ํจ์จ์ฑ๋ ๋งค์ฐ ๋๋ค. ์
๋ํ๋ฉด, ๊ตฌ์กฐ์ ํํ์ ๋ถ๋ฆฌํ์ฌ ๋ง๋ค์ด์ ธ ์์ผ๋ฏ๋ก, ์ปจํ
์ธ ๋ด๋น์๋ ์ค๋ก์ง ๊ตฌ์กฐ์ ๋ด์ฉ
์๋ง ์ ๊ฒฝ์ ์ฐ๊ณ , ๋์์ธ ๋ด๋น์๋ ๋ด์ฉ์ ํํํ๊ธฐ ์ํ ์ธ์์ ๋์์ธ์๋ง ๊ด์ฌ์ ๊ธฐ์ธ
์ผ ์ ์๊ธฐ ๋๋ฌธ์ด๋ค. ํ๋ก๊ทธ๋๋จธ๋ ์ด๋ฏธ HTML๊ณผ CSS๋ก UI๊ฐ ๋ถ๋ฆฌ๋์ด ์์ผ๋ฏ๋ก, ๋ณต์ก
ํ HTML ์ฝ๋๋ฅผ ์ดํดํ๊ณ ๋ค๋ค์ผ ํ๋ ๋์ ํ๋ก๊ทธ๋จ ์ฝ๋์๋ง ์ ๊ฒฝ ์ฐ๋ฉด ๋๋ค. ์ฆ, ๋ด
์ฉ์ด ๋ฐ๋๋ฉด ๋์์ธ๊น์ง ๋ค ๋ฏ์ด๊ณ ์ณ์ผ ํ๋ค๊ฑฐ๋, ๋์์ธ์ด ๋ฐ๋๋ฉด์ ๋ด์ฉ์ด ํํ์ ํด์ผ
ํ๋ค๊ฑฐ๋ ํ๋ ์ผ๋ค์ด ์ค์ด๋ค๊ฒ ๋๋ค. ๊ทธ๋ฆฌ๊ณ ํ ๋ฒ ์ด๋ ๊ฒ ๋ง๋ค์ด์ง ์ฌ์ดํธ๋ฅผ ๋ค๋ฅธ ์ฌ๋
์ด ์ ์ง ๋ณด์๋ฅผ ํ ๋์๋ ์์ค ์ฝ๋๋ ํจ์ฌ ์ดํดํ๊ธฐ๊ฐ ์ฝ๊ณ ๊ฐ๊ฒฐํด์ ์์ ์ฌ๊ฐ๋ฐ ํด์ผ
ํ๋ ๊ฒฝ์ฐ๊ฐ ๋ฐ์ํ์ง ์์ ์ ์ง ๋ณด์ ๋น์ฉ๋ ์ค์ผ ์ ์๋ค.
ํน์ ๊ณ์ธต์ ์ํ ๋ณ๋์ ์ฌ์ดํธ๊ฐ ํ์ํ๋ค?
๊ฐ๋ฉ์ด๋ ๋ค์์ ๋
ผ๋ฆฌ์ ์ํด ์์๋ ์ฝ๊ฒ ๋ฌด์๋์ด๋ฒ๋ฆฌ๋ ์ฐ๋ฆฌ ๋๋ผ ์ฌํ์์ ์น ์ ๊ทผ์ฑ
- 16 - 17. ์ค์ ์น ํ์ค ๊ฐ์ด๋
์ ์ด์ผ๊ธฐํ๋ฉด ํจ์จ๊ณผ ์๋๋ฅผ ์ค์ํ๋ ํ์กฐ์์ ๋๊ฐ ๊ณผ์ฐ ๋ช ํผ์ผํธ๋ ์์ ์ง ๋ชจ๋ฅด๋
์ฅ์ ์ธ๊ณผ ๋งคํจํ ์, ๋ฆฌ๋
์ค ์ฌ์ฉ์์ ๋น IE ์ฌ์ฉ์๋ฅผ ๋ฐฐ๋ คํ ์ ์์ ๊ฒ์ธ๊ฐ๋ผ๋ ์๋ฌธ์
์ ๊ธฐํ๋ค. ๊ทธ๋ฆฌ๊ณ ๋ ๋ง์น ๊ทธ๋ค์ ์ํด ๋ญ๊ฐ ์ ์ฌ์ด๋ผ๋ ์จ์ผ ํ ๋ฏ์ด ๋ณ๋์ ์ฌ์ดํธ๋ฅผ ๋ง
๋ค๊ณ ๋น์ฉ๊ณผ ์ธ๋ ฅ์ ๋ค์ฌ์ผ ํ ๋ฏ์ด ๋งํ๋ค. ์น์์ ํ์ค์์ ์ฌ์ฉ๊ณผ ์ ๊ทผ์ฑ ๊ฐ์ด๋์ ๋
ํ ์ค์ ๋ง์ผ๋ก๋ ์ด๋ค ๊ณ์ธต๋ค์ ์ํ ๋ณ๋์ ์น์ฌ์ดํธ๋ ํ์์น ์๋ค. ๋ณ๋์ ์ฌ์ดํธ๋ฅผ
๋ง๋๋ ๊ฒ์ด์ผ ๋ง๋ก ์คํ๋ ค ๋น์ฉ์ ์ฆ๊ฐ ์์ผ ํจ์จ์ฑ์ ๋จ์ด ๋จ๋ฆฌ๋ ๊ฒ์ด๋ค.
์ ๊ทผ์ฑ์ด ๋์ ์น์ฌ์ดํธ๋ ๊ฒฐ์ฝ ์ด๋ค ํน์ ๊ณ์ธต์๊ฒ๋ง ์ข์ ๊ฒ์ด ์๋๋ค. ์ฌ์ฉ ํธ์์ฑ์ด
๋์์ง๊ณ , ๋ฌธ์๊ฐ ๋ถ๋ช
ํ๋ฉฐ ์ดํดํ๊ธฐ ์ฝ๊ฒ ๋๋ฉด ์์ด๋ค์ด๋ ๋
ธ์ธ๋ค์๊ฒ๋ ๋์์ด ๋๋ฉฐ, ์ด
๊ฒ์ ๊ฐ์ ํ์ฌ ์์
ํ๋ ์น ์ฌ์ดํธ ์ด์์๋ ํธํด ์ง๋ค. ๊ณณ๊ณณ์ ์ค๋ช
๋๊ตฌ(tooltip)๋ค์ด ์
๊ฒจ์ ์ผ๋ฐ์ธ๋ค์๊ฒ๋ ์น์ ์น๊ทผํ๊ฒ ์ฌ์ฉํ๋ ๋ฐ์ ๋์์ด ๋๋ฉฐ, ๊ทธ๋ฆผ๊ณผ ๋ฉํฐ๋ฏธ๋์ด ์์
๊ฐ ์๋ฏธ์๋ ๋์ฒด ํ
์คํธ๋ฅผ ๋ฌ๊ฒ ํ๋ฉด ๊ฒ์ ์์ง์ด ๊ทธ๋ฆผ๊ณผ ๋ฉํฐ๋ฏธ๋์ด๋ฅผ ์ผ๋ฐ์ธ๋ค์ด ๊ฒ์
ํ๋ ๋ฐ์ ํฐ ๋์์ ์ค๋ค.
์น ํ์ค์ด๋ ๋ฌด์์ธ๊ฐ?
์ ์ธ๊ณ์ ์ธ ์น ๊ธฐ์ ํ์ค์ ์ฃผ๋ํ๊ณ ์๋ W3C์ HTML4.0, XHTML, CSS1/2 ๋ฑ์
๊ตฌํ ์คํ์ด ๋งค์ฐ ์์ธํ๊ณ ์ด๋ฅผ ์ง์ํ๋ ํ๋์ ์ธ ๋ธ๋ผ์ฐ์ ๋ค์ด ๊ณ์ ๋์ด๋จ์ ๋ฐ๋ผ ๋
์ด์ ์นํ์ด์ง๊ฐ ๋ค๋ฅด๊ฒ ๋ณด์ด๊ฑฐ๋ ๋์๋์ง ์๋ ํ์์ ๊ฑฐ์ ์ฌ๋ผ์ง๊ฒ ๋์๋ค. ์๋ ์น๋ธ
๋ผ์ฐ์ ๊ฐ ์ด์ข
๊ธฐ๋ฅ์ด ์์ง์ ์์กดํ๊ณ ์๊ธฐ ๋๋ฌธ์ ์ค๋๋ ๋ธ๋ผ์ฐ์ ์ฌ์ฉ์๋ค์ ๋ถํธํจ
์ ๊ณ ๋ คํด ์ฃผ๋ ์ํธ ํธํ์ฑ(Cross Browsing)๊ณผ ์ต์ ์น ํ์ค ๊ธฐ์ ์ ์ฉ ๊ทธ๋ฆฌ๊ณ ์ ๊ทผ์ฑ
๋์ ์นํ์ด์ง๋ฅผ ํตํด ํฅํ ํ์ค ๊ธฐ์ ์ ์ ํฉํ๊ฒ ๋ง๋๋ ์์ ํธํ์ฑ(Forward
Compatibility)๊ฐ ํ์ฌ ์น ์๋น์ค ์ ๊ณต์๋ค์ ๊ณตํต๋ ์์ ๊ฐ ๋๊ณ ์๋ค.
์ด๊ฒ์ ํ์ ๋ฒ์ ํธํ์ฑ ์ ์ง(Backward Compatibility)์ ๊ตฌ๋ถํด์ผ ํ๋ค. ์ผ๋ฐ์ ์ผ๋ก
ํ๋ก๊ทธ๋จ์ ๊ฐ๋ฐํ ๋, ๋ฒ์ ์ด ์ฌ๋ผ๊ฐ๋ฉด ๊ฐ์๋ก ์๋ก์ด ๊ธฐ๋ฅ์ ์ถ๊ฐํ๊ณ ์ด์ ๊ธฐ๋ฅ์ ํ๊ธฐ
ํ๊ฒ ๋๋ค. ๊ทธ๋ฌ๋ ์ฌ์ฉ์์ ์ธก๋ฉด์์๋ ์์ ๊ธฐ๋ฅ์ ๊ณ์ ์ ์งํด ์ฃผ์ด ๊ฐ๋ฐ ํธํ์ฑ์ ์
์งํด ์ค ํ์์ฑ์ด ์๊ธด๋ค. ์น๋ธ๋ผ์ฐ์ ์์ ํ์ ๋ฒ์ ํธํ์ฑ ์ ์ง๋ ์์ ์ ์ฌ์ฉ๋๋ ๊ธฐ๋ฅ
์ด๋ ํ๊ทธ๋ฅผ ํ์ค ํ๊ทธ๋ก ์นํํด ์ฃผ๋ ๊ฒ์ด๋ค. ์ด๋ฅผ ํตํด ๋๋ถ๋ถ์ ์น๋์์ด๋๋ ์์ ์ง
์์ ๋ฐ๋ผ ์นํ์ด์ง๋ฅผ ์ฝ๋ฉํด ์ฃผ์ด๋ ๊ทธ๋๋ก ๊ตฌํ๋๋ ๊ฒ์ผ๋ก ์๊ฐํ๊ฒ ๋๋ ๊ฒ์ด๋ค. ๊ทธ๋ฌ
๋, ํ์ ๋ฒ์ ํธํ์ฑ ์ ์ง๋ ์น๋ธ๋ผ์ฐ์ ์ ๋ฒค๋์ ๋ฐ๋ผ ์ง์ ๊ฐ๋ฅ ์ ๋๊ฐ ์ฝํด ์ง ๋ฟ๋ง
์๋๋ผ ์น ํ์ค ๊ธฐ์ ์ ๋ํ ์ง์ ์ต๋์ ๊ฐ๋ก๋ง๋ ์ฅ์ ๊ฐ ๋๋ค.
์ด์ ๋ฐํด ์ํธ ํธํ์ฑ์ ํ์ค ์น ๊ธฐ์ ์ ์ฑ์ฉํ์ฌ ๋ค๋ฅธ ๊ธฐ์ข
ํน์ ํ๋ซํผ์ ๋ฐ๋ผ ๋ฌ๋ฆฌ
๊ตฌํ๋๋ ๊ธฐ์ ์ ๋น์ทํ๊ฒ ๋ง๋ฆ๊ณผ ๋์์ ์ด๋ ํ์ชฝ์ ์ต์ ํ๋์ด ์น์ฐ์น์ง ์๋๋ก ๊ณตํต
์์๋ฅผ ์ฌ์ฉํ์ฌ ์นํ์ด์ง๋ฅผ ์ ์ํ๋ ๊ธฐ๋ฒ์ ๋งํ๋ ๊ฒ์ด๋ค. ๋ํ, ์ง์ํ ์ ์๋ ๋ค๋ฅธ
์น๋ธ๋ผ์ฐ์ ๋ฅผ ์ํ ์ฅ์น๋ฅผ ๋ง๋ค์ด ๋ชจ๋ ์น๋ธ๋ผ์ฐ์ ์ฌ์ฉ์๊ฐ ๋ฐฉ๋ฌธํ์ ๋ ์ ๋ณด๋ก์์ ์
์ธ๊ฐ์ ๋๋ผ์ง ์๋๋ก ํ๋ ๋ฐฉ๋ฒ๋ก ์ ๊ฐ์ด๋๋ฅผ ์๋ฏธํ๋ ๊ฒ์ด๋ค. ๋ํ, ์ฅ๊ธฐ์ ์ธ ์น ํ์ค
์ ์ง์ํ๋ ์์ ํธํ์ฑ์ ๋ฏธ๋์ ์ด๋ ํ ์น ๋ธ๋ผ์ฐ์ ๋ ๋จ๋ง ์ฅ์น๊ฐ ๋์ค๋๋ผ๋ ์น์
์ด์ฉํ ์ ์๋ค๋ ์ธก๋ฉด์์ ๋งค์ฐ ์ค์ํ๋ค๊ณ ํ๊ฒ ๋ค.
์น ํ์ค์ด ๋ง๋ค์ด ์ง๋ ๋ฐฉ๋ฒ
์น์ฌ์ดํธ์ ์ ์ฉํ๋ HTML, CSS, ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ์ ๊ฒ์ ์ด๋์์ ์ ํด์ ธ์ ์ฌ์ฉ๋๋
๊ฒ์ผ๊น? ์ด ๊ฐ์ ์น์ธ๋ ๊ฐ๋ฐฉํ ์ธํฐ๋ท ํ์ค์ ์ฆ World Wide Web Consortium (W3C,
- 17 - 18. ์ค์ ์น ํ์ค ๊ฐ์ด๋
http://www.w3c.org) ์์ ๋ง๋ค์ด ์ง๋ค. W3C๋ 1994๋
10์ ๋ฏธ๊ตญ์ MIT ์ปดํจํฐ ๊ณผ
ํ ์ฐ๊ตฌ์(MIT LCS), ์ ๋ณด ์ํ ์ ๋ฝ ์ฐ๊ตฌ ์ปจ์์์(ERCIM), ๊ทธ๋ฆฌ๊ณ ์ผ๋ณธ์ ๊ฒ์ด์ค ๋
ํ์ด ์ฐํฉํ์ฌ ๋ง๋ค์ด์ง ๊ตญ์ ์ ์ธ ์น ๊ธฐ์ ํ์ค ๊ธฐ๊ตฌ์ด๋ค.
๊ทธ๋ฆผ 4 ์น ํ์ค์ ์ ์ ํ๋ ํ์คํ ๊ธฐ๊ตฌ, ์น ์ปจ์์์(http://w3.org)
์ธ๋ป ๋ณด๊ธฐ์๋ ์ฐ๊ตฌ ๊ธฐ๊ด์ผ๋ก๋ง ์ด๋ฃจ์ด์ง ๊ฒ ๊ฐ์ผ๋ ์น๊ณผ ๊ด๋ จ๋ 510์ฌ ๊ฐ์ ๊ตญ์ ์ ์ธ ๋ค
๊ตญ์ IT ๊ธฐ์
์ฒด๊ฐ ์ฐธ์ฌํ์ฌ ์์ฌ์ ํ๋์จ์ด์ ์ํํธ์จ์ด์ ์น ํ์ค ๊ธฐ์ ์ ํ์ฌํ๊ฑฐ๋
์์ฌ์ ๊ธฐ์ ์ ํ์คํ ํ๊ณ ์ ํ๋ ์น์ดํ ์ ํฌ์ฅ ์ด๊ธฐ๋ ํ๋ค. W3C์ ์ญํ ์ ์ ๋ณด, ์๊ฒฌ
๊ตํ, ์์ด๋์ด ์ฐฝ์ถ, ๋
๋ฆฝ์ ์ฌ๊ณ , ๊ทธ๋ฆฌ๊ณ ๊ณต๋์ ์ดํด๋ฅผ ์ํ์ฌ ๋ช
์ธ, ๊ฐ์ด๋ ๋ผ์ธ, ์ํ
ํธ์จ์ด, ๊ทธ๋ฆฌ๊ณ ๋๊ตฌ ๋ฐ ๊ท์น ๋ฑ์ ํ์ค์์ ์ ์ ํจ์ผ๋ก์จ ์น์ ๋ชจ๋ ์ ์ฌ๋ ฅ์ ์ด๋์ด ๋ด
๋ ๊ฒ์ด๋ค.
์น์ ๊ด๋ จํ ํ์ค์๋ ์ฐ๋ฆฌ๊ฐ ํํ ๋งํ๋ ํ์ค(Standard)์ ์กด์ฌํ์ง ์์ผ๋ฉฐ, W3C์ ํ
๋ก ์ ํตํด ๋์จ ๊ถ๊ณ ์(Recomendation)์ด ๊ฐ์ฅ ์ต์์ ์ด๋ค. ํ์ค์ ์ข
๋ฅ์๋ ์ ์๋ ํ
์ค(Draft), ์์
ํ๋ ํ์ค(Working Draft, WD), ํ์ ๋ ๊ถ๊ณ ์(Candidate
Recommendation, RC), ํ์ ๋ ๊ถ๊ณ ์(Recommendation)์ด ์๋ค.
๊ทธ๋ฆผ 5 ์น ํ์ค์ด ์ ํด ์ง๋ ์์
๊ถ๊ณ ์์ ์ ์ ํ๋ ๋ฐฉ๋ฒ์ 1) ์ด๋ค ๊ธฐ๋ฅ์ Draft๋ก์ ์ ์ํ๊ณ , 2) ๋๋ํํธ๋ฅผ ์ค์ ๋ก ์
์ฉํ ์ ์๊ฒ ๊ธฐ์ ์ ์ธ ์์
์ ํ๊ณ (Working Draft), 3) ์ด๋ฅผ ๋ค์ ๋
ผ๋ฆฌ ์ค๋ฅ๊ฐ ์๋์ง,
์ค์ ํ๋์จ์ด์์ ์ง์์ด ๊ฐ๋ฅํ์ง๋ฅผ ์ดํผ๊ณ , 4) ์ ์ ๊ถ๊ณ ์์ด ๋๊ธฐ ์ ์ ๊ธฐ์
์ฒด์ ๊ณต๊ฐ
ํ์ฌ ํ ๋ก ์ ๊ฑฐ์น ํ(Recommendate Candidation), 5) ๋ง์ง๋ง์ผ๋ก ๊ถ๊ณ ์
(Recommendation)์ ํ์ ํ๋ค.
- 18 - 19. ์ค์ ์น ํ์ค ๊ฐ์ด๋
์น๋ธ๋ผ์ฐ์ ์ค ๋ชจ์ง๋ผ ํ์ด์ดํญ์ค, ์คํ๋ผ ๋ฑ์ ๋ฌธ์๋ก์ ํ์ ๋ ๊ถ๊ณ ์(Recomendation)
๋ฑ ๋ค์ํ ํ์ค ๊ฐ์ด๋ฐ ํ์ ๋ ํ์ค์ ์ง์ํ๋ค. ๋ค์ ๋งํด ๋ชจ์ง๋ผ๋ HTML 4.0๋ ์ง์ํ
์ง๋ง, HTML4.01์ ๋ ์ ์ง์ํด ์ค๋ค. ํนํ W3C ์ ์ฉ ๋ธ๋ผ์ฐ์ ์ธ Amaya ๋ธ๋ผ์ฐ์ ๊ฐ
ํ๋ ํ์ค์ ๊ธฐ์ ์ง์ ์ํ์ ์์ฆ์๋ ๋ชจ์ง๋ผ์์ ํ๊ณ ์์ด ๋์ฑ ๋น ๋ฅด๊ฒ ํ์ค ๊ธฐ์ ์ด
์ ์ฉ๋๊ณ ์๋ค. ๋ชจ์ง๋ผ ๊ณ์ด ์ ํ๋ค์ ์ต์ ๋ฒ์ ์ XHTML, CSS 1/2๋ฅผ ๋ชจ๋ ์ง์ํ๊ณ
์๋ค. ์คํ๋ผ๋ ๋น์ทํ ์ ๋๋ก ํ์ค์ ์ง์ํด ์ฃผ์ง๋ง, ๋น ๋ฅธ ์๋๋ฅผ ์ ์งํ๊ธฐ ์ํด
MathML ๋ฑ์ ์ ๋๋ก ํด์ํ์ง ๋ชปํ๊ธฐ๋ ํ๋ค.
์ธํฐ๋ท ์ต์คํ๋ก๋ฌ๋ ์ง์ํ๋ ํ์ค์ ์ข
๋ฅ๋ง์ ๋ณด์๋ฉด, ๋ค๋ฅธ ๋ ๊ฐ์ง ๋ธ๋ผ์ฐ์ ๋ณด๋ค ๋ ๋ฐ
์ด๋๋ค. ๊ทธ๋ฌ๋, ์ง์ํ๋ ํ์ค์ด ๊ถ๊ณ ์(Recomendation)์ด ์๋๋ผ๋ ๋ฐ ๋ฌธ์ ๊ฐ ์๋ค. IE
๋ Microsoft๊ฐ ์ ์ํ๋ ๋ด์ฉ๋ง์ ์ง์ํ๋๋ฐ, ๊ถ๊ณ ์์ ์์ ๋ค์ด ์ ์ํ๋ ๋ด์ฉ์ด ์ ๊ณ ,
๊ถ๊ณ ์ ํ๋ณด๋ ์์
์ ๋๋ ๊ธฐ์ด์์ ์์ ๋ค์ด ์ ์ํ ๋ด์ฉ์ด ๋ง๋ค๋ฉด ๊ทธ๊ฒ์ ์ง์ํ๋ค. ๋
ํ์ ์ธ ์๊ฐ HTML 4.0๊ณผ XHTML 1.0/1.1์ด๋ค. HTML 4.0์ ๊ฑฐ์ ๋ชจ๋ ๋ถ๋ถ์์ ๋ง์ด
ํฌ๋ก์ํํธ์ ์๊ฒฌ์ด ๋ฐ์๋์ด ์๋ค. ๊ทธ๋ผ์๋ ๋ถ๊ตฌํ๊ณ HTML4.0์ ํ์ ๋ฒ์ ์ธ
XHTML 1.0/1.1์ ์ ๋๋ก ์ง์ํ์ง ์๊ณ ์๋ค. ์๋ ํ๋ฉด, HTML์ ๋ชจ๋ํํ๋ฉด์ ๋ง์ด
ํฌ๋ก์ํํธ์ ์๊ฒฌ์ด ์๋น ๋ถ๋ถ ํ์ค์ ์ฑํ๋์ง ๋ชปํ๊ธฐ ๋๋ฌธ์ด๋ค. ๋ํ CSS Level 2(ํ
ํ CSS2) ์ง์๋ ๋ฏธํกํ๋ค. ๊ทธ๋ฌ๋, ๋ง์ดํฌ๋ก์ํํธ๋ CSS3 ํ์ค์์ ์ด์ฌํ ์ฐธ์ฌํ๊ณ
์๋ค. ์น๋ธ๋ผ์ฐ์ ๊ฐ W3C์ ๊ถ๊ณ ์์ ์ง์ํ๋ ๋ฐ๋ ์ด๋ฌํ ๋ณต์กํ ๊ด๊ณ๊ฐ ์ฝํ ์๋ค.
์ด์ ๋ฐํด ๋ชจ์ง๋ผ ํ์ด์ดํญ์ค 1.5์ ์ต์ ๋ฒ์ ์ XTHML 1.0์ ๋ชจ๋ ์ง์ํ ๋ฟ๋ง ์๋๋ผ
Draft์ํ์ ์๋ CSS2.1 ์ ์ฒด ๊ธฐ๋ฅ๊ณผ CSS3์ ์ผ๋ถ ๊ธฐ๋ฅ์ ์ด๋ฏธ ๊ตฌํํ๋ค. ์ธํฐ๋ท ์ต์ค
ํ๋ก๋ฌ 6.0์ด ์ถ์๋ ์ง 4๋
๋ง์ IEํ์ ์๋ก ๊พธ๋ฆฐ ๋ง์ดํฌ๋ก์ํํธ๋ IE7 ๋ฒ์ ์ CSS2
์ ๋ํ ์ง์์ ๊ฐํํ๊ธฐ๋ก ํ๋ ๋ฑ ํ์ค ์ง์์ ๋ํด ๋ชจ๋ ๋ธ๋ผ์ฐ์ ๊ฐ ํ๋ฐํ ์์ง์ด๊ณ
์๋ค.
์น ํ์ค ์คํ ์๊ฐ
์ง๊ธ๋ถํฐ๋ W3C์์ ์ ๊ณตํ๋ ๊ฐ์ข
์น ํ์ค ๊ถ๊ณ ์์ ๋ํด ๊ฐ๋จํ๊ฒ ์ดํด๋ณธ๋ค.
(X)HTML (eXtensible Hypertext Markup Language)
HTML(Hypertext Markup Language) ๋ ์นํ์ด์ง๋ฅผ ํ์ํ๋๋ฐ ๊ธฐ๋ณธ ์ธ์ด๋ก์ ์ฌ์ฉ๋
๋ค. ์น ์ปจํ
์ธ ์ ๋ด์ฉ์ ํ์ค HTML ํฌ๋งท์ผ๋ก ์ ์ฉํด์ผ ํ๋ฉฐ ์ ๋ณด๊ฐ ๋
์ ์ ์ธ ๊ณ ์ ํฌ๋งท
์ผ๋ก ์ ๊ณต๋๋ ๊ฒฝ์ฐ, HTML ํฌ๋งท๋ ์ ๊ณต๋์ด์ผ ํ๋ค. ๋ธ๋ผ์ฐ์ ํธํ์ฑ์ ๋ชจ๋ ๊ฒฝ์ฐ์ ์
์ด ๊ณ ๋ ค๋์ด์ผ ํ๋ฉฐ, ์น์ฌ์ดํธ๋ ๋จ์ผ ์น ๋ธ๋ผ์ฐ์ ์ ๋ง์ถ์ด ์ ์๋์ด์๋ ์๋๋ฉฐ, ํด๋ผ์ด
์ธํธ ๊ทธ๋ฃน์ ์ํด ๋น๋ฒํ๊ฒ ์ฌ์ฉ๋๋ ์น ๋ธ๋ผ์ฐ์ ์์ ์ฌ๋ฐ๋ฅด๊ฒ ์๋ํด์ผ ํ๋ค.
์ต์ ์ HTML ํ์ค์ 4.01์ด์ง๋ง HTML์ XML๊ณผ ๊ฒฐํฉํ XHTML์ด ๊ถ๊ณ ์์ผ๋ก ๋์
์๋ค. HTML2/3์ ๋ฌ๋ฆฌ ์ต์ XHTML ํ์ค์ <font>, <b>, <i> ๊ฐ์ ํํ ์์๋ค์ ๋ฐฐ
์ ํ๊ณ , ํ๊ทธ๋ฅผ ๋ชจ๋ ๋ซ๋๋ก ๊ถ๊ณ ํ๋ ๋ฑ ์ ํํ ๋ฌธ์ ๊ท๊ฒฉ์ ์๊ตฌํ๊ณ ์๋ค. ์ด๊ฒ์ ์์ผ
๋ก ์ฝ๋ฉ์ ํ๋ ๊ฒ ์๋๋ผ ์ ์ ์ ๋ฌธ์ ์ธ ์ ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํจ์ ๋ฐ๋ผ ๊ตฌ์กฐ์ ์ธ HTMLํ
ํ๋ฆฌํธ๋ฅผ ์์ฑํ๊ณ ์คํ์ผ(Cascade Style Sheet, CSS)์ ๊ด๋ฆฌํจ์ผ๋ก์ ๋น ์ ๋ฌธ ์ค๊ณ์๋
์น ํ์ด์ง๋ฅผ ์์ฝ๊ฒ ์ ์ ๊ด๋ฆฌ ํ ์ ์๊ฒ ํด ์ค๋ค.
- 19 - 20. ์ค์ ์น ํ์ค ๊ฐ์ด๋
CSS(Cascading Style Sheets)
CSS๋ ์ฌ์ฉ์ ์ ์์ ๋์์ธ ์์ฑ, ์ฆ ๊ธ๊ผด, ํฌ๊ธฐ, ์์, ์ด๋ฒคํธ ๋ฑ์ ์ง์ ํ ์ ์์ผ๋ฉฐ
CSS๋ฅผ ์ฌ์ฉํ ๋ชจ๋ ํ์ด์ง๋ ๊ธฐ์กด ๋ฒ์ ๊ณผ์ ํธํ์ฑ ๋๊ฒ ์ด๋ค ๋ธ๋ผ์ฐ์ ์์๋ ๋ด์ฉ์ ์ด
๋ํ ์ ์๋ค. CSS๋ฅผ ์ด์ฉํ์ฌ ์ค๊ณ์๋ ์๋ก ๋ค๋ฅธ ํ๋ฉด ํด์๋์ ๋ธ๋ผ์ฐ์ ์์์, ํ
์ด
๋ธ ์์ด๋ ๋์ผํ๊ฒ ๋ณด์ฌ์ง ์ ์๋ ํ์ด์ง๋ฅผ ์์ฑํ ์ ์๋ค. ๋จ IE4.0 ์ดํ์ ๋ท์ค์ผ์ด
ํ4 ์ดํ์ ์ค๋๋ ์น๋ธ๋ผ์ฐ์ ์์๋ CSS๋ฅผ ์ง์ํ์ง ๋ชปํ๋ค. CSS๋ฅผ ์ฌ์ฉํ์ฌ ์์ฑํ ํ
์ด์ง์ ํ
ํ๋ฆฌํธ๋ ๋ค์ํ ๋ธ๋ผ์ฐ์ , ํ๋ฉด ํด์๋ ๋ฐ ์ก์ธ์ค ๊ธฐ์ ์ ์ฌ์ฉํ์ฌ ํ
์คํธํ์ฌ
์ผ ํ๋ฉฐ, ์ต์ ์์คํ
์ฌ์ฉ์๊ฐ ์๋๋๋ผ๋ ์ ํฉํ ์ ๊ทผ์ด ๋ณด์ฅ๋์ด์ผ ํ๋ค.
XML(eXtensible Markup Language)
XML(eXtensible Markup Language)์ HTML์ด๋ CSS๋ก์ ํํ๋์ง ๋ชปํ๋ ์์ญ์
DTD๋ฅผ ์ด์ฉํ์ฌ ์ ์ํ์ฌ ์ฌ์ฉ์ ์ ์์ ํ๊ทธ๋ฅผ ์์ฑํ์ฌ ์ ์ํ ์ ์๋ ๋ฉํ ๋งํฌ์
์ธ์ด์ด๋ค. XML ์ฌ์ฉ ๋ถ์ผ๋ฅผ ๊ฒํ ํ์ฌ ์ ์ ํ ์ฉ๋์ ๋ง๊ฒ ์ฌ์ฉํ์ฌ์ผ ํ๋ค. XML์ด ๊ณ
๋ ค๋๋ ์ ํ๋ฆฌ์ผ์ด์
์ ์ฌ์ฉ์๊ฐ ํ์ํ ์ ๋ณด๋ฅผ ์ป๊ธฐ ์ํด ํ๋ ์ด์์ ๋ฐ์ดํฐ๋ฒ ์ด์ค์
์ํธ ์์ฉํ ํ์๊ฐ ์๋ ๊ฒฝ์ฐ, ์์
์ด ์ฌ์ฉ์์๊ฒ ์ ๋ฌ๋์ด ์ฌ์ฉ์๊ฐ ์์ ์ ๊ธฐ๋ก ํน์
๋ฌธ์์ ์ก์ธ์คํ ๊ฒ์ด ์์๋๋ ๊ฒฝ์ฐ, ์๋ก ๋ค๋ฅธ ์ธํธ์ ๋ฐ์ดํฐ๊ฐ ์๋ก ๋ค๋ฅธ ์ฌ์ฉ์์๊ฒ
๋์คํ๋ ์ด ๋์ด์ผ ํ๋ ๊ฒฝ์ฐ, ์ ๋ณด ๊ฒ์ ๋ฐ ๋์คํ๋ ์ด์ ๊ด๋ จํ์ฌ ์ฌ์ฉ์ ์ ํธ ํ๋กํ์ผ
์ ๊ตฌ์ถํด์ผ ํ ํ์๊ฐ ์๋ ๊ฒฝ์ฐ, ๊ฐ ๊ฐ์ธ์ด ์คํ์ผ ์ํธ๋ฅผ ์ฌ์ฉํ์ฌ ๋ค์ํ ํฌ๋งท์ผ๋ก ๋ฌธ
์๋ฅผ ๊ฐฑ์ ํด์ผ ํ ํ์๊ฐ ์๋ ๊ฒฝ์ฐ์ ์ฌ์ฉ ๊ฐ๋ฅํ๋ค. XML์ ๋ค์ํ ์ธํฐ๋ท ๋น์ฆ๋์ค ํ
๊ฒฝ์ ์์ฝ๊ฒ ์ ์ ๊ฐ๋ฅํ์ฌ ์น ํ์ค ๋ถ์ผ์์ ๊ฐ์ฅ ํ๋ฐํ ํ์ค ์ ์ ํ๋์ด ์ด๋ฃจ์ด ์ง๊ณ
์๋ค.
DOM(Document Object Model)
DOM(Document Object Model)์ ์นํ์ด์ง์ ํํ๋๋ ๋ชจ๋ ์์ฑ์ ๋ํด ๊ฐ์ฒดํ ํ์ฌ
์ด๋ฅผ ์์ ์์ฌ๋ก ์ฌ์ฉํ ์ ์๋๋ก ๋ง๋ ๊ฒ์ด๋ค. document, from, window ๋ฑ ๊ฐ๊ฐ์
์์ฑ์ ๊ฐ์ฒดํ ํ์ฌ ํธ๋ฆฌ ๊ตฌ์กฐ๋ก ํ์ํ ํ์ฌ ์ด์ ๋ํ ์ด๋ฒคํธ ์ฒ๋ฆฌ ๊ฐ์ ๊ฒ์ด ๊ฐ๋ฅํ๋ค.
DOM์๋ ํฌ๊ฒ W3C DOM๊ณผ MS DOM์ด ์๋๋ฐ, IE6.0์ ์์ง ํ์ ๋ฒ์ ํธํ์ฑ์ ์
ํด MS DOM์ ์ง์ํ๊ณ ์์ง๋ง, IE6.0 ์ด์ ๋ธ๋ผ์ฐ์ ๋ฅผ ์ ์ธํ๊ณ ๋ ๊ฑฐ์ ๋ชจ๋ ๋ธ๋ผ์ฐ์
๊ฐ ํ์ค W3C DOM์ ์ง์ํ๋ค.
ECMAScript
์๋ฐ ์คํฌ๋ฆฝํธ๋ W3C ํ์ค์ผ๋ก ์ ์ ๋ ๊ฒ์ ์๋๋ค. ๋ํ, ๋ชจ๋ ์น ๋ธ๋ผ์ฐ์ ์ฌ์ฉ์๊ฐ
์๋ฐ ์คํฌ๋ฆฝํธ๋ฅผ ๋ณผ ์ ์๋ ๊ฒ์ ์๋๋ค. ํน์ ๋ฐฉํ๋ฒฝ์ ์๋ฐ ์คํฌ๋ฆฝํธ๊ฐ ํต๊ณผํ๋ ๊ฒ์
ํ์ฉํ์ง ์๋๋ค. ๊ทธ๋ผ์๋ ์๋ฐ ์คํฌ๋ฆฝํธ๋ DOM์ด ํ์คํ ๋๋ฉด์ ์น ๋ธ๋ผ์ฐ์ ์ ๋๋ฆฌ
์ฐ์ด๊ณ ์๋ค. ์ฃผ์ํ ์ ์ ํด๋ผ์ด์ธํธ ์ธก ์คํฌ๋ฆฝํธ๋ ์ฌ๋ฌ ๋ธ๋ผ์ฐ์ ์์ ํญ ๋๊ฒ ๊ฒ์ฌ๋์ด
์ผ ํ๋ค. ํต์ฌ ๊ธฐ๋ฅ์ ์๋ฐ ์คํฌ๋ฆฝํธ์ ์ํด์๋ง ์ ๊ณต๋์ด์๋ ์ ๋๋ค. ๋ ์๋ฐ ์คํฌ๋ฆฝํธ
๋ ์ฃผ์ ์ฝ๋๋ฅผ ์ฌ์ฉํ์ฌ ๋น ํธํ์ฑ์ ์น ๋ธ๋ผ์ฐ์ ๋ก๋ถํฐ ์จ๊ฒจ์ ธ์ผ ํ๋ค. ์๋ฐ ์คํฌ๋ฆฝํธ๋
HTML ๋ฌธ์์ Head ๋ด์ ์์นํด์ผ ์ ๋๋ก ๋์ํ๋ค ๋ฐ๋ผ์ ๋ฌธ์์ Body ๋ด์ ์๋ฐ ์ค
ํฌ๋ฆฝํธ๋ฅผ ์์น์ํค๋ ๊ฒ์ ํผํด์ผ ํ๋ค.
์๋ฐ์คํฌ๋ฆฝํธ์ ๊ฒฝ์ฐ, ๋ท์ค์ผ์ดํ์ฌ๊ฐ ECMA๋ผ๋ ํ์ค ๊ธฐ๊ตฌ๋ก ์ ์ํ์ฌ ์ฑํ๋ ๋ฐ ์์ด
- 20 - 21. ์ค์ ์น ํ์ค ๊ฐ์ด๋
ECMA -262 ํ์ค์(http://www.ecma-
international.org/publications/standards/Ecma-262.htm) ๋๋ค.
์ ๊ณต๋ถํ๋ฉด
ECMASCript๋ IE6.0, Firefox 1.0, Safari 1.0, Opera8์์ ๊ฑฐ์ 100% ์ง์ํ๊ณ ์๋ค.
์น ํ์ค ๋ชฉ๋ก
์น ํ์ค์ ์งํจ๋ค๊ณ ํ๋ ๊ฒ์ W3C์ ํ์ค์์ ์งํจ๋ค๋ ๊ฒ์ ๋งํ๋ค. W3C์ ํ์ค ํ
๋์ ์ง์์ ์ผ๋ก ์ดํด๋ณด๊ณ ํ์ค ๊ถ๊ณ ์์ ๊ณต๋ถํ ํ์๊ฐ ์๋ ๊ฒ์ด๋ค. ๋ํ ์น ๋ธ๋ผ์ฐ์ ์
๋ฐ๋ผ ์ง์ ์ ๋๊ฐ ๋ค๋ฅด๋ฏ๋ก ๋ถ๋ก์์ ์ ๊ณตํ๋ ํธํ ์ฐจํธ(Web Standard-Broweser
Compatiblity Chart)๋ฅผ ํตํด ๊ณต๋ถ ํด์ผ ํ๋ค. ์๋๋ ์น์ฌ์ดํธ ๊ฐ๋ฐ์ ํ์ํ ์ฃผ์ ํ์ค
์๋ค์ ๋ํ ๋ชฉ๋ก์ด๋ค.
[HTML 4.01] โHTML 4.01 Recommandationโ, David Raggett, Arnaud Le Hors, Ian
Jacobs, http://www.w3.org/TR/1999/REC-html401-19991224 , HTML 4.0์ ์์ ํ
์ค (http://www.w3.org/TR/1998/REC-html40-19980424 )
[XHTML1.0] โXTHML 1.0 Recommandationโ, 26 January 2000, revised 1 August
2002, Steven Pemberton http://www.w3.org/TR/2002/REC-xhtml1-20020801 ์ต์
๋ฒ์ : http://www.w3.org/TR/xhtml1
[XHTML 1.1] โ Module-based XHTMLโ, 31 May 2001, Murray Altheim, Shane
McCarron http://www.w3.org/TR/2001/REC-xhtml11-20010531
[CSS1] quot;CSS, level 1 Recommendationquot;, B. Bos, H. Wium Lie, eds., 17 December 1996,
revised 11 January 1999. CSS1 ๊ถ๊ณ ์: http://www.w3.org/TR/1999/REC-CSS1-
19990111 . CSS1 ์ต์ ๋ฒ์ : http://www.w3.org/TR/REC-CSS1 .
[CSS2.1] quot;CSS, level 2.1 Draftquot;, Bert Bos, Tantek รelik , Ian Hickson, Hรฅkon, Wium
Lie eds., 12 May 1998. CSS2 ๋๋ํํธ: http://www.w3.org/TR/2005/WD-CSS21-
20050613 . CSS2.1 ์ต์ ๋ฒ์ : http://www.w3.org/TR/CSS21.
[DOM Level 1, Level 2, Level 3] quot;Document Object Model (DOM) Level 1,2,3
Recomandationquot;, ์ต์ ๋ฒ์ http://www.w3.org/DOM/DOMTR
[XML] quot;Extensible Markup Language (XML) 1.0.quot;, T. Bray, J. Paoli, C.M. Sperberg-
McQueen, eds., 10 February 1998. http://www.w3.org/TR/1998/REC-xml-
19980210 .[XML 1.1] XML 1.1 (http://www.w3.org/TR/xml11
[HTTP] http://www.w3.org/Protocols/, HTTP 1.0, 1.1์ ๋น๋กฏํ ์ฌ๋ฌ ๊ฐ์ง ํ์ค ์น
ํ๋กํ ์ฝ์ ๋ํ IETF(http://www.ietf.org) ํ์ค์ด ์์.
์น์์ ์ฐ์ด๋ ํ์ค ์ค HTTP๋ฑ๊ณผ ๊ฐ์ ํ๋กํ ์ฝ ํ์ค์ W3C์์ ๋ง๋๋ ๊ฒ์ด ์๋๋ค.
W3C ๋ฟ๋ง ์๋๋ผ ์ธํฐ๋ท์์ ์ฌ์ฉ๋๋ ๋ชจ๋ ํ์ค์ RFC๋ผ๋ ๋ฌธ์๋ก ๊ท์ ํ๋ IETF๋
์ค์ํ ํ์ค ๊ธฐ๊ตฌ์ด๋ค. W3C ํ์ค๋ฟ ์๋๋ผ IETF์์ ์ ์ ํ๋ ํ์ค ๊ฐ์ด๋ฐ ์ ์ด๋
HTTP์ MIME์ ๋ํ ํ์ค์ ๋งค์ฐ ์ค์ํ๋ค. ์๋ํ๋ฉด ์ฐ๋ฆฌ๊ฐ ๋ง๋๋ ์น ๋ฌธ์๋ฅผ ์ธํฐ
๋ท์ผ๋ก ์ ๋ฌํ๋ ๊ธฐ๋ณธ์ ์ธ ๋ฐฉ๋ฒ์ ๋ํ ๊ฒ์ด๊ธฐ ๋๋ฌธ์ด๋ค.
๋คํํ ์ด๋ค ์น ํ์ค ๋ฌธ์ ์ค ์ผ๋ถ๋ W3C ํ๊ตญ์ฌ๋ฌด๊ตญ(http://w3c.or.kr)์ ํตํด ํ๊ตญ์ด
๋ฒ์ญ(http://w3.org/2003/03/Translations/byLanguage?language=ko)์ ์ ํ ์ ์
๋ค. ๋ํ ์ด๋ค ์ค ์ผ๋ถ๋ ํ๊ตญ์ ๋ณดํต์ ํ์คํํ(TTA)์ ๊ตญ๋ด ํ์ค์ผ๋ก ์ ํด์ง ๊ฒ๋ ์๋ค.
TTA, TTAS.KO-10.0085, quot;์น ๊ตฌ์ถ ์ง์นจ์quot;, 1998-10
TTA, TTAS.W3-XHTML1.0, โXHTML 1.0 ํ์คquot;, 2001.12.
- 21 - 22. ์ค์ ์น ํ์ค ๊ฐ์ด๋
TTA, TTAS.W3-DOM quot;๋ฌธ์ ๊ฐ์ฒด ๋ชจ๋ธ ๋ ๋ฒจ 1quot;, 2003.10.
TTA, TTAS.OT-10.0003 quot;ํ๊ตญํ ์น ์ฝํ
์ธ ์ ๊ทผ์ฑ ์ง์นจquot;, 2004.12
์๋๋ ์น์ฌ์ดํธ์ ์ ๊ทผ์ฑ์ ๋์ด๊ธฐ ์ํ ํ์ค์๋ค ์ด๋ค.
[WCAG 1.0] Web Content Accessibility Guidelines 1.0, 5 May 1999, Wendy Chisholm,
Gregg Vanderheiden, Ian Jacobs, http://www.w3.org/TR/1999/WAI-
WEBCONTENT-19990505
[WAI-AUTOOLS] quot;Authoring Tool Accessibility Guidelinesquot;, J. Treviranus, J.
Richards, I. Jacobs, C. McCathieNevile, eds. ์ ์ ๋๊ตฌ ์ ๊ทผ์ฑ ์ง์นจ์ ๋ํ ๊ฐ์ฅ ์ต์
์์
์ด์(Working Draft): http://www.w3.org/TR/WAI-AUTOOLS/
[WAI-UA-SUPPORT] ์ด ๋ฌธ์์์๋ (๋ณด์กฐ ๊ธฐ์ ์ ํฌํจํ์ฌ) ์น ํ์ ์ฅ์น๋ค์ด ์ฌ๊ธฐ์์
์ธ๊ธ๋ ์ ๊ทผ์ฑ ๊ด๋ จ ๊ธฐ๋ฅ์ ์ผ๋ง๋ ์ง์ํ๋์ง์ ๋ํด ์ธ๊ธํ๊ณ ์๋ค. ๋ฌธ์ ์๋ ๊ณณ:
http://www.w3.org/WAI/Resources/WAI-UA-Support
[WAI-USERAGENT] quot;User Agent Accessibility Guidelinesquot;, J. Gunderson and I.
Jacobs, eds. ์ ๊ทผ์ฑ์ด ๋์ ์น ํ์ ์ฅ์น๋ฅผ ์ค๊ณํ๊ธฐ ์ํ ์ด ์ง์นจ์ ๋ํ ์ต์ ์์
์ด
์: http://www.w3.org/TR/WAI-USERAGENT
[TECHNIQUES] quot;Techniques for Web Content Accessibility Guidelines 1.0quot;, W.
Chisholm, G. Vanderheiden, I. Jacobs, eds. ์ด ๋ฌธ์์์๋ quot;์น ์ฝํ
์ธ ์ ๊ทผ์ฑ ์ง์นจ 1.0quot;
์์ ์ ์ํ ์ฒดํฌํฌ์ธํธ๋ฅผ ์ด๋ป๊ฒ ๊ตฌํํ๋์ง์ ๋ํด ์ค๋ช
ํ๊ณ ์๋ค. ์ด ๊ธฐ์ ๋ฌธ์์ ์ต์
๋ฒ์ : http://www.w3.org/TR/WAI-WEBCONTENT-TECHS
์น ํ์ค ๊ฒ์ฌ ๋ฐฉ๋ฒ
W3C์์๋ ์นํ์ด์ง๊ฐ ํ์ค์์ ๋ฐ๋ผ ๋ง๋ค์ด ์ก๋์ง, ์ ๊ทผ์ฑ์ ๋ํ ๊ณ ๋ ค๊ฐ ์ด๋ฃจ์ด ์ก๋
์ง ์ ํจ์ฑ ๊ฒ์ฌ(Validation)์ ๋ํ ์ ๋ณด๋ฅผ ์ ๊ณตํ๊ณ ์๋ค. ๊ฐ๋ฐ์ ๋งจ ์ฒซ ๋จ๊ณ์์๋ถํฐ ์ฌ
๋ฌ ๊ฐ์ง ๊ฒ์ฌ๋ฅผ ์์ํ๋ฉด, ์ด๊ธฐ์ ์๋ณํ ์ ๊ทผ์ฑ ๊ด๋ จ ๋ฌธ์ ์ ์ ๋ ์์ ํ๊ธฐ ์ฝ๊ณ , ํผํด
๊ฐ ์ ์๋ค.
์๋๋ ๋ช ๊ฐ์ ์ค์ํ ์ ํจ์ฑ ๊ฒ์ฌ ๋ฐฉ๋ฒ์ผ๋ก ์ ์๋๋ ๊ฒ์ด๋ค. ๋จผ์ ์๋ํ๋ ์ ๊ทผ์ฑ ๊ฒ
์ฌ ๋๊ตฌ์ ๋ธ๋ผ์ฐ์ ์ ํจ์ฑ ๊ฒ์ฌ ๋๊ตฌ(http://validation.w3.org)๋ฅผ ์ฌ์ฉํ๋ค. ํ๊ตญ์ด ๋ฒ
์ญ์ด ์ ๊ณต๋๋ http://validator.kldp.net ์ ์ด์ฉํ๋ฉด ์ ํจ์ฑ ์๋ฌ์ ๋ํ ์ค๋ช
๊ณผ ํด๊ฒฐ
์ ํ๊ตญ์ด๋ก ๋ณผ์ ์๋ค. ์ด ์ธ์๋ CSS ์ ํจ์ฑ ํ์ธ(http://jigsaw.w3.org/css-
validator/)ํ์ด์ง์ XML์ ๋ํ ์ ํจ์ฑ ํ์ธ
(http://www.stg.brown.edu/service/xmlvalid)๋ฅผ ์ฌ์ฉํ ์ ์๋ค.
์ด๋ฌํ ์น ํ์ค ๋ฌธ๋ฒ์ ๋ํ ์ ํจ์ฑ ํ์ธ ๋๊ตฌ๊ฐ ๋ชจ๋ ์ ๊ทผ์ฑ ๊ด๋ จ ๋ฌธ์ ์ ์ ๋ค๋ฃฐ ์๋
์๋ค๋ ์ ์ ์ ์ ํด์ผํ๋ค. ์๋ฅผ ๋ค๋ฉด ๋งํฌ ํ
์คํธ์ ์๋ฏธ๊ฐ ์ ์ ํ์ง ์ฌ๋ถ๋, ๋์ฒด ํ
์ค
ํธ(text equivalent)์ ์ ์ฉ ๊ฐ๋ฅ์ฑ(applicability) ๋ฑ์ ๋ค๋ฃฐ ์ ์๋ค. ๋ฐ๋ผ์ W3C์ ์น
์ ๊ทผ์ฑ ์ฒดํฌ ๋ฆฌ์คํธ๋ฅผ ์ฒดํฌํด ๋ณผ ํ์๊ฐ ์๋๋ฐ, ํ๊ตญํ ์น ์ ๊ทผ์ฑ ํ๊ฐ๋๊ตฌ์ธ KADO-
WAH(http://www.iabf.or.kr/web/kadowah.asp)๋ผ๋ ์ํํธ์จ์ด๋ฅผ ์ด์ฉํ ์ ์๋ค.
์ด ํ๋ก๊ทธ๋จ์ ์น ํ์ด์ง์ ์ ๊ทผ์ฑ ์ค์์ฌ๋ถ๋ฅผ ํ๊ฐํ๊ณ ์ ๊ทผ์ฑ์ ์ค๋ฅ๋ค์ ๋ฐ๋ก ์ก์์ฃผ
๋ ์์ ๊ณผ์ ์ ํตํด์ ์น ๊ฐ๋ฐ์์ ์ฝํ
์ธ ์ ์์๋ค์๊ฒ ์ฅ์ ์ธ๋ค์ด ์นํ์ด์ง ์ ๊ทผ์ด ์ฉ
์ดํ ์น ์ฌ์ดํธ๋ฅผ ๋ง๋ค ์ ์๋๋ก ๋์์ค๋ค.
- 22 - 23. ์ค์ ์น ํ์ค ๊ฐ์ด๋
๊ทธ๋ฆผ 6 ์น ์ ๊ทผ์ฑ ํ๊ฐ ๋๊ตฌ, KADO-WAH
๋ง์ฝ ์ข ๋ ์์ธํ๊ฒ ์ ๊ทผํ๊ณ ์ ํ๋ค๋ฉด ํ
์คํธ๋ง ๋์ค๋ ๋ธ๋ผ์ฐ์ ๋๋ ์๋ฎฌ๋ ์ดํฐ๋ก ์
ํํ์ฌ ํ์ด์ง์ ๋ ์ด์์์ด ์ฌ๋ฐ๋ฅธ์ง ์ดํด ๋ณด๊ณ ์ฌ๋ฌ ๊ฐ์ ๊ทธ๋ํฝ ๋ธ๋ผ์ฐ์ ๋ฅผ ์จ์, ์๋ฆฌ
์ ๊ทธ๋ํฝ์ ๋ชจ๋ ๋ฐ๋ ์ค์ , ๊ทธ๋ํฝ์ ๋ฐ์ง ๋ ์ค์ , ์๋ฆฌ๋ฅผ ๋ฐ์ง ์๋ ์ค์ , ๋ง์ฐ์ค๋ฅผ
์ฐ์ง ์๋ ์ค์ , ํ๋ ์, ์คํฌ๋ฆฝํธ, ์คํ์ผ ์ํธ, ์ ํ๋ฆฟ์ ์ฌ์ฉํ์ง ์๋ ์ค์ ๋ฑ์ ํตํด
์ผ๋ง๋ ์ ๊ทผ๋๊ฐ ์ข์์ง ์ฒดํฌํด ๋ณผ ํ์๊ฐ ์๋ค. ๋ํ, ์ต๊ทผ์ ๋์จ ๊ฒ๋ฟ ์๋๋ผ ์ค๋๋
๋ธ๋ผ์ฐ์ ๋ฅผ ํฌํจํ์ฌ ์ฌ๋ฌ ๊ฐ์ ๋ธ๋ผ์ฐ์ ๋ก ์ํํด ๋ณธ๋ค๋ฉด ๋ ์ข์ ๊ฒ์ด๋ค.
๋ํ, ์์ฑ ๋ธ๋ผ์ฐ์ (self-voicing browser), ํ๋ฉด ์์ฑ ๋ณํ๊ธฐ, ํ๋ฉด ํ๋ ์ฅ์น, ๋ฎ์ ํด
์๋์ ํ๋ฉด ๋ฑ์ ์จ๋ณด๋ฉด ์์ ์ ์นํ์ด์ง ์ ๊ทผ๋์์ ๋ฌธ์ ๋๋ ์ ์ ๊ณ ์น ์ ์๋ค. ๋ง์ง
๋ง์ผ๋ก ์ฒ ์๋ฒ๊ณผ ๋ฌธ๋ฒ ๊ฒ์ฌ๊ธฐ๋ฅผ ์ฌ์ฉํ๋ค. ์์ฑ ํฉ์ฑ๊ธฐ๋ฅผ ํตํด ํ์ด์ง๋ฅผ ์ฝ๋ ์ฌ๋๋ค์ ์ฒ
์๋ฒ์ด ํ๋ฆฐ ๋จ์ด์ ๋ํด์ ํฉ์ฑ๊ธฐ๊ฐ ์ฝ์ด์ฃผ๋ ๊ฒ์ผ๋ก๋ ๋ฌด์จ ๋จ์ด์ธ์ง ์ถ์ธกํ ์๊ฐ ์์
๊ฒ์ด๋ค. ๋ฌธ๋ฒ์ ์ธ ์ค๋ฅ๋ ์์ด์ผ ์ดํดํ๊ธฐ๊ฐ ์ฝ๋ค.
๊ธฐ๋ณธ์ ์ธ ์ ๊ทผ๋ ๊ฒ์ฌ๊ฐ ์ํ๋์๋ค๋ฉด ๋ฌธ์๊ฐ ๊ฐ๋จ ๋ช
๋ฃํ๊ฒ ์์ฑ๋์๋์ง ๋ค์ ์ ๊ฒํ๋ค.
์ผ๋ถ ์๋ ํ๋ก์ธ์๊ฐ ์์ฑํด ์ฃผ๋ ๊ฐ๋
์ฑ ํต๊ณ์น๊ฐ์ ๊ฒ๋ค์ด ๋ช
ํ์ฑ์ด๋ ๊ฐ๊ฒฐ์ฑ์ ๋ํ
์ข์ ์งํ๋ก ์ฐ์ผ ์ ์๋ค. ๊ทธ๋ณด๋ค ๋ ๋์ ๋ฐฉ๋ฒ์ ๊ฒฝํ ์๋ ํธ์ง์์๊ฒ ๋ช
๋ฃ์ฑ์ ๊ฒํ ํด
์ฃผ๋๋ก ๋ถํํ๋ ๊ฒ์ด๋ค. ๋ํ ๊ฒฝํ์๋ ํธ์ง์๋ ํน์ ์ธ์ด(๋จ์ด๋ ํํ)๋ ์์ด์ฝ ์ฌ์ฉ
์ด ์ผ๊ธฐํ ์๋ ์๋ ์ ์ฌ์ ์ผ๋ก ๋ฏผ๊ฐํ ๋ฌธํ์ ์ธ ๋ฌธ์ ์ ์ ๊ฐ๋ ค๋ด ๋ฌธ์์ ์ฌ์ฉ์ ํธ์์ฑ
(Usability)์ ๋์ผ ์๋ ์๋ค.
์น ํ์ค ํํ์ด์ง ๋ฐฉ๋ฒ๋ก
์ฐ๋ฆฌ๊ฐ ์ฌ์ฉํ๋ HTML์ ํ๊ทธ๋ค์ ๊ตฌ์กฐ(structure)๋ฅผ ๋ํ๋ด๋ ๊ฒ๊ณผ ํํ
(presentation)์ ๋ํ๋ด๋ ๊ฒ์ผ๋ก ๋ถ๋ฅํ ์ ์๋ค. ๊ตฌ์กฐ๋ฅผ ๋ํ๋ด๋ ๊ฒ์ ๋ํ์ ์ธ ๊ฒ์ด
H1, H2, UL, DL, OL, LI, LINK, ADDRESS, STRONG, BLOCKQUOTE, CODE, Q,
DIV, P ๋ฑ์ด๋ค. ์ผ๋ฐ์ ์ธ ๋ธ๋ผ์ฐ์ ์์๋ ๊ตฌ์กฐ์ ์ธ ๋งํฌ์
์ ์ฌ์ฉํ ๋์ ์ ๋นํ๊ฒ ๋ชจ์
- 23 - 24. ์ค์ ์น ํ์ค ๊ฐ์ด๋
(ํํ)๋ ๋ฐ๊พธ์ด ํํํด์ค๋ค. ์๋ฅผ ๋ค๋ฉด, H1์ด๋ผ๋ ๋งํฌ์
์ ์ฌ์ฉํ๋ฉด ๋ณดํต์ ๊ธ์ ํฌ๊ธฐ๊ฐ
์ปค์ง๊ณ ๋๊บผ์์ง๋ค. ๊ทธ๋ ๋ค๊ณ ํด์ H1์ ๋จ์ํ ๊ธ์๋ฅผ ํค์ธ ๋ชฉ์ ์ผ๋ก ์ฌ์ฉํ๋ ๊ฒ์ ์
๋ชป๋ ๊ฒ์ด๋ค.
H1์ ๋ฌธ์์ ๊ฐ์ฅ ์ค์ํ(๋๋ ๊ฐ์ฅ ์์์) ์ ๋ชฉ ๋ถ๋ถ์ ํ์ํ๋ผ๋ โ์๋ฏธโ๋ฅผ ๊ฐ์ง๊ณ
์๋ ๊ฒ์ด์ง, ๊ทธ๋ฅ ๊ธ์๋ฅผ ํค์ธ ๋ชฉ์ ์ผ๋ก ์ ๊ณต๋๋ ๊ฒ์ด ์๋๊ธฐ ๋๋ฌธ์ด๋ค. ์ด์ ๋ฐํด B,
FONT, I, BR ๋ฑ์ ๋ฌธ์์ ํ์ ๋ฐฉ๋ฒ์ ๊ฒฐ์ ํ๋ ํํ ์์๋ค์ด๋ค. ์ฆ ์ด๊ฒ๋ค์ ์๋ฌด๋ฐ ์
๋ฏธ๋ ์์ง๋ง ๋จ์ง ์๊ฐ์ ์ผ๋ก ํํํ๋ ๋ฐฉ๋ฒ๋ง ๊ฒฐ์ ํ๋ค. ์๋ฅผ ๋ค์ด B ์์๋ฅผ ์ฌ์ฉํ๋ฉด
๊ธ์๊ฐ ๋๊บผ์์ง๋ค.
์ด๊ธฐ HTML์ด ๊ณ์ ์ง๋ณดํ๋ฉด์ ํํ ๋งํฌ์
์ด ๋ด๋นํ๋ ๋ชจ์์ ๋ํ ๊ฒ์ CSS๊ฐ ๋ด๋นํ
๊ฒ ๋๊ณ , ์ด์ HTML์์ ํํ ๋งํฌ์
์ ์ ์ ์ธ๋ชจ๊ฐ ์๊ฒ ๋์๋ค. ๋ฐ๋ผ์ 1๋ถ์์๋ ๋ฌธ
์ ๋ด์ FONT, B, BR ๋ฑ์ ๋๋๋ก ์ฐ์ง ์๋๋ก ๊ถ๊ณ ํ๋ค. ์ด๋ฐ ๊ฒ๋ค๋ก ํํํ๊ณ ์ ํ๋
๋ชจ์์ 100% CSS๋ฅผ ์ด์ฉํด ํจ์ฌ ์ ๊ตํ๊ฒ ํํํ ์ ์๊ธฐ ๋๋ฌธ์ด๋ค. ์ด๋ ๊ฒ HTML์
๊ตฌ์กฐ, CSS๋ ํํ์ด๋ผ๋ ์ญํ ๋ถ๋ด์ ํจ์ผ๋ก์จ, ๊ตฌ์กฐ๋ฅผ ๊ณ ์น๊ธฐ ์ํด ํํ ๋ฐฉ๋ฒ์ ๋ฐ๊พผ๋ค๋
์ง, ํํ ๋ฐฉ๋ฒ์ ๋ฐ๊พธ๊ธฐ ์ํด ๊ตฌ์กฐ๋ฅผ ์ ๋ถ ๋ฏ์ด๊ณ ์ณ์ผ ํ ์ผ์ด ์์ด์ง๊ฒ ๋๋ค.
๊ตฌ์กฐ์ ํํ์ ๋ถ๋ฆฌ
๊ตฌ์กฐ๋ฅผ ์ํ ๋งํฌ์
(structural markup)๊ณผ ํํ์ ์ํ ๋งํฌ์
(presentational markup)
์ด๋ ๋ฌด์์ธ๊ฐ? ์ด ๋์ ๊ตฌ๋ถํ๋ ๊ฒ์ ๋งค์ฐ ์ค์ํ๋ค. ๊ฒ์ผ๋ก๋ ๋๊ฐ์ด ๋ณด์ด๋ ์นํ์ด์ง
๋ฅผ ๋ง๋ค์๋๋ผ๋ ์์ ๋ณด์ด๋ ๊ตฌ์กฐ๋ ์ฒ์ฐจ๋ง๋ณ๋ก ๋ค๋ฅผ ์ ์๊ณ , ์ด ๋ค๋ฅธ ๊ตฌ์กฐ๋ ๋ค์ํ ํ
๊ฒฝ์ ์ฌ์ฉ์์๊ฒ, ๋๋ ๋ค์ํ ๊ธฐ๊ธฐ์๊ฒ, ๋๋ ๊ฒ์ ์์ง์ด๋ ์๋ฏธ ํด์ ์์ง(semantic
parser)์๊ฒ ์์ฒญ๋ ์ฐจ์ด๋ฅผ ๊ฐ์ ธ๋ค ์ค๋ค.
๊ทธ๋ฆผ 7 ๊ตฌ์กฐ์ ์ผ๋ก ํํํ๊ฒ๊ณผ ํ๊ทธ๋ก๋ง ํํํ ํ์ด์ง
์์ ๊ทธ๋ฆผ์ ์น ๋ธ๋ผ์ฐ์ ์ ํ์๋ ๋ ๊ฐ์ ๋ฌธ์๋ฅผ ๋ณด์ฌ์ฃผ๊ณ ์๋ค. ์ผ์ชฝ ๋ธ๋ผ์ฐ์ ์ ์ค๋ฅธ
์ชฝ ๋ธ๋ผ์ฐ์ ์ ํ์๋ ๋ฌธ์์ ๊ฒ๋ณด๊ธฐ ๋ชจ์์ ๊ฑฐ์ ๋์ผํ๋ค. ๊ฑฐ์ ๊ฐ์ ๋ชจ์๊ณผ ๋ด์ฉ์ ํฌ
ํจํ๊ณ ์์ผ๋ ์ด ๋ ํ์ด์ง๊ฐ ๋ด๊ณ ์๋ HTML์ ์์ ํ ๋ค๋ฅด๋ค.
- 24 - 25. ์ค์ ์น ํ์ค ๊ฐ์ด๋
์๋ง๋ ํํ ์ฐ๋ฆฌ๊ฐ ์ฝ๋ฉํ๋ ๋ฐฉ์์ด๋ ๊ฐ๋จํ๊ฒ ๋๋ชจ๋ ๋๋ฆผ์๋ฒ๋ก ๋ง๋ค์ด๋ฒ๋ฆฌ๋ฉด ์๋์
๊ฐ์ html์ด ๋ง๋ค์ด์ง ๊ฒ์ด๋ค. ์ด๊ฒ์ ๊ทธ๋ฆผ์ ์ผ์ชฝ ํ๋ฉด์ ๋ชจ์๊ณผ ๊ฐ๋ค.
<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01 Transitional//ENquot;
quot;http://www.w3.org/TR/html4/loose.dtdquot;>
<html lang=quot;koquot;>
<head>
<meta http-equiv=quot;content-typequot; content=quot;text/html; charset=euc-krquot;>
<title>๊ทธ๋ฅ ํํํ ๊ฒ</title>
</head>
<body>
<br>
<font size=quot;4quot; color=quot;darkredquot;><b>1. ์๋ก </b></font><br>
<font size=quot;2quot; color=quot;blackquot;>1. ๊ฐ๋
์ ์</font><br>
<font size=quot;2quot; color=quot;blackquot;>2.
ํ์์ฑ</font><br>
<font size=quot;4quot; color=quot;darkredquot;><b>2. ๋ณธ๋ก </b></font><br>
<font size=quot;2quot; color=quot;blackquot;>2.1 ๋ณดํธ์ ๋์์ธ
์์น</font><br>
<font size=quot;2quot; color=quot;blackquot;>2.2 ์ ๊ทผ์ฑ
์์น</font><br>
<font size=quot;4quot; color=quot;darkredquot;><b>3. ๋งบ์๋ง</b></font><br>
</body>
</html>
์ด ์์ ๋ฅผ ๋ณด๋ฉด ๊ณ์ธต์ ์ธ ์ ๋ชฉ์ ๋ํ๋ด๊ธฐ ์ํด ๊ธ๊ผด์ ๋ฐ๊พผ ๊ฒ๊ณผ ์ค ๊ฐ๊ฒฉ, ๋ค์ฌ ์ฐ๊ธฐ ํ
๊ฒ, ๊ทธ๋ฆฌ๊ณ ๋ฒํธ๋ฅผ ๋ถ์ธ ๊ฒ, ๋ถ๋ฆฟ ์ด๋ฏธ์ง๋ก ๋๊ทธ๋ผ๋ฏธ๋ฅผ ๋ถ์ธ ๊ฒ๊ณผ ๊ฐ์ ํํ ๋ฐฉ๋ฒ
(presentation)๋ค์ด ๋ด์ฉ(contents)๊ณผ ์์ฌ ์์ด์ ๋์ค์ ํํ ๋ฐฉ๋ฒ๋ง ์ด์ง ๋ฐ๊พธ๊ฑฐ๋ ์
๋๋ฉด ๋ด์ฉ๋ง ๋ฐ๊พธ๊ฑฐ๋, ์๋๋ฉด ๊ตฌ์กฐ(structure)๋ฅผ ํ์ฌ์ 2๋จ๊ณ์์ 3๋จ๊ณ ์ฒด์ ๋ก ๋ฐ๊พธ๊ฑฐ
๋, ์๋๋ฉด ๋ณธ๋ก ์ด ์์ด์ง๊ณ ๊ฒฐ๋ก ์ด ๋ฐ๋ก ๋์ค๋๋ก ํ๋ ค๋ฉด ๋ฒํธ๋ ๋ค ๋ฐ๊พธ์ด ์ฃผ์ด์ผ ํ๋ค.
์ด์ ๊ฐ์ด ๊ตฌ์กฐ์ ํํ๊ณผ ๋ด์ฉ์ด ํ๋ฐ ์ฝํ ์์ผ๋ฉด ๋์ค์ ์์ค๋ฅผ ๊ด๋ฆฌํ๊ณ ์์ ํ๊ธฐ๊ฐ
๋งค์ฐ ์ด๋ ค์ธ ๋ฟ๋ง ์๋๋ผ, ์ปดํจํฐ๊ฐ ์ด ๋ฌธ์์ ๊ตฌ์กฐ๋ฅผ ํ์
ํ๊ธฐ๋ ๋งค์ฐ ํ๋ค๋ค. ์๋ฅผ ๋ค์ด
์์ ๋ฌธ์์์ ๊ฐ์ฅ ํฐ๋ฌธ์์ ๊ตฌ์กฐ๋ ์๋ก , ๋ณธ๋ก , ๊ฒฐ๋ก ์ ์ธ ๊ฐ์ง ํญ๋ชฉ์ผ๋ก ์ด๋ฃจ์ด์ก๋ค๊ณ
์ฌ๋์ ์ ์ ์๋๋ฐ, ์ปดํจํฐ๋ ๊ธ์ ์๊น์ด ์ด๋ป๊ณ , ํฌ๊ธฐ๊ฐ ์ด๋ป๊ณ ํ๋ ๊ฒ์ด ์๋ฏธ๊ฐ ์
์ผ๋ฏ๋ก ์๊ฐ ์ฅ์ ์ธ์ด ์ฌ์ฉํ๋ ์์ฑ ๋ธ๋ผ์ฐ์ ์์๋ ์์ ๊ฐ์ ๊ธ์ ํฌ๊ธฐ๊ฐ ์ด๋ป๊ณ ํ๋
๊ฒ์ ๊ฑฐ์ ์๋ฏธ๊ฐ ์๋ค.
๋ฐ๋ผ์ ์๋์ HTML ์์ค์ ๊ฐ์ด ์์ ์ ํด์ฃผ๋ฉด, ์ปดํจํฐ๋ ๊ฒ์ ์์ง์ด ๋ฌธ์์ ์๋ฏธ์
์ธ ๊ตฌ์กฐ๋ฅผ ํ์
ํ๊ธฐ๊ฐ ์ฝ๊ณ , ๊ธฐ๊ณ๋ฅผ ํตํด ๋ฌธ์์ ๊ตฌ์กฐ์ ์ฝ๊ฒ ์ ๊ทผํ ์ ์๋ค. ์ด๊ฒ์ ๊ทธ
๋ฆผ7์ ์ค๋ฅธ์ชฝ ํ๋ฉด์ ๋ํ๋ธ๋ค.
<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot;
quot;http://www.w3.org/TR/html4/strict.dtdquot;>
<html lang=quot;koquot;>
<head>
<meta http-equiv=quot;content-typequot; content=quot;text/html; charset=euc-krquot;>
<style type=quot;text/cssquot;>
- 25 -