๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
HTML

[HTML] ์›น ํ‘œ์ค€ ์ดํ•ดํ•˜๊ธฐ

by ์ฝ”๋”ฉ๊ณต์ฑ… 2022. 8. 8.
๋ฐ˜์‘ํ˜•

์›น ํ‘œ์ค€(Web Standards)์ด๋ž€?

๋ธŒ๋ผ์šฐ์ €์˜ ์ข…๋ฅ˜ ๋ฐ ๋ฒ„์ „์— ๋”ฐ๋ฅธ ๊ธฐ๋Šฅ ์ฐจ์ด์— ๋Œ€ํ•ด ํ˜ธํ™˜์ด ๊ฐ€๋Šฅํ•˜๋„๋ก ์ œ์‹œ๋œ ํ‘œ์ค€์ด๋‹ค.
๋‹ค๋ฅธ ๊ธฐ์ข… ๋˜๋Š” ํ”Œ๋žซํผ์— ๋”ฐ๋ผ ๋‹ฌ๋ฆฌ ๊ตฌํ˜„๋˜๋Š” ๊ธฐ์ˆ ์„ ๋™์ผํ•˜๊ฒŒ ๊ตฌํ˜„ํ•จ๊ณผ ๋™์‹œ์— ์–ด๋Š ํ•œ์ชฝ์—๋งŒ ์ตœ์ ํ™”๊ฐ€ ์น˜์šฐ์น˜์ง€ ์•Š๋„๋ก ๊ณตํ†ต ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•ด ์›น ํŽ˜์ด์ง€๋ฅผ ์ œ์ž‘ํ•˜๋Š” ๊ธฐ๋ฒ•์œผ๋กœ ํ‘œ์ค€ํ™” ๋‹จ์ฒด์ธ W3C(World Wide Consortium)๊ฐ€ ๊ถŒ๊ณ ํ•œ ํ‘œ์ค€์•ˆ์— ๋”ฐ๋ผ ์›น ์‚ฌ์ดํŠธ๋ฅผ ์ž‘์„ฑํ•  ๋•Œ ์ด์šฉํ•˜๋Š” HTML, CSS, JavaScript ๋“ฑ์— ๋Œ€ํ•œ ๊ทœ์ •์„ ๋‹ด๊ณ  ์žˆ์œผ๋ฉฐ ์›น ์‚ฌ์ดํŠธ์˜ ์‚ฌ์šฉ์ž๊ฐ€ ์–ด๋–ค ๋ธŒ๋ผ์šฐ์ €๋‚˜ OS๋ฅผ ์‚ฌ์šฉํ•˜๋”๋ผ๋„ ๋™์ผํ•œ ๊ฒฐ๊ณผ๋ฅผ ๋ณด์ด๊ฒŒ ํ•˜๋Š” ๊ฒƒ์ด ์›น ํ‘œ์ค€์˜ ๊ถ๊ทน์  ๋ชฉ์ ์ด๋‹ค.

์›น ํ‘œ์ค€์˜ ์žฅ์ 

01. ์†Œ์Šค์˜ ํ†ต์ผํ™”๋กœ ์ธํ•ด ์ˆ˜์ • ๋ฐ ์šด์˜ ๊ด€๋ฆฌ๊ฐ€ ์šฉ์ด
02. ๋‹ค์–‘ํ•œ ๋ธŒ๋ผ์šฐ์ €, ๋‹จ๋ง๊ธฐ, ์žฅ์• ์ธ ์ง€์›์šฉ ํ”„๋กœ๊ทธ๋žจ์—์„œ๋„ ๋Œ€์‘ ๊ฐ€๋Šฅ โ†’ ์ ‘๊ทผ์„ฑ ํ–ฅ์ƒ
03. ๋…ผ๋ฆฌ์ ์ด๊ณ  ํšจ์œจ์ ์œผ๋กœ ์ž‘์„ฑ๋˜์–ด ์ฝ”๋“œ์˜ ์–‘๊ณผ ์šฉ๋Ÿ‰์ด ์ค„์–ด ์„œ๋ฒ„ ๋ถ€๋‹ด ๊ฐ์†Œ
04. CSS์™€ HTML์˜ ๋ถ„๋ฆฌ๋กœ ์œ ์ง€๋ณด์ˆ˜์— ๋“ค์–ด๊ฐ€๋Š” ์‹œ๊ฐ„ ์ ˆ์•ฝ ๊ฐ€๋Šฅ
05. ๋ถˆํ•„์š”ํ•œ ๋งˆํฌ์—…์ด ์ตœ์†Œํ™”๋˜์–ด ํŽ˜์ด์ง€ ๋กœ๋”ฉ ์†๋„ ํ–ฅ์ƒ
06. ๊ตฌ ๋ฒ„์ „ ์›น ๋ธŒ๋ผ์šฐ์ €์—์„œ๋„ ์ฝ˜ํ…์ธ ๊ฐ€ ์›ํ™œ์ด ํ‘œ์‹œ๋˜๊ณ  ํ˜ธํ™˜์„ฑยท์šด์šฉ์„ฑ ํ™•๋ณด ๊ฐ€๋Šฅ
07. ์Šคํฌ๋ฆฐ ๋ฆฌ๋”๊ธฐ ๋“ฑ ๋ณด์กฐ๊ณตํ•™ ๊ธฐ๊ธฐ ์‚ฌ์šฉ์ž๋“ค์ด ๋” ์ •ํ™•ํ•œ ์ •๋ณด๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ์Œ
08. ๊ฒ€์ƒ‰ ๋ด‡์„ ํ†ตํ•œ ํšจ์œจ์  ๋…ธ์ถœ ๋“ฑ ๊ฒ€์ƒ‰ ์—”์ง„ ์ตœ์ ํ™” ๊ฐ€๋Šฅ



์›น ์ ‘๊ทผ์„ฑ(Web Accessibility)์ด๋ž€?

์ œ์•„๋ฌด๋ฆฌ ์ž˜ ์„ค๊ณ„๋œ ์›น ์‚ฌ์ดํŠธ๋ผ ํ• ์ง€๋ผ๋„ ์žฅ์• ๋ฅผ ๊ฐ€์ง„ ์‚ฌ๋žŒ๋“ค์˜ ์ž…์žฅ์—์„œ๋Š” ์‚ฌ์šฉํ•˜๊ธฐ ๋ถˆํŽธํ•  ์ˆ˜ ์žˆ๋‹ค. ์žฅ์• ๋ฅผ ๊ฐ€์ง„ ์‚ฌ์šฉ์ž๋“ค๋„ ์‰ฝ๊ฒŒ ์›น์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋„๋ก ์„ค๊ณ„ ๋ฐ ๊ฐœ๋ฐœ๋œ ๊ฒƒ์„ ์›น ์ ‘๊ทผ์„ฑ์ด๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

์›น ์ ‘๊ทผ์„ฑ์˜ ์ค‘์š”์„ฑ

ํ˜„์žฌ ๊ตญ๋‚ด ์›น์€ ๊ณผ๋„ํ•œ ํ”Œ๋Ÿฌ๊ทธ์ธ ์‚ฌ์šฉ ๋“ฑ ์›น ํ‘œ์ค€์ด ์ง€์ผœ์ง€์ง€ ์•Š๋Š” ๊ณณ์ด ๋‹ค์ˆ˜์ด๋ฉฐ ์ด๋Š” ์žฅ์• ์ธ๊ณผ ๋…ธ์•ฝ์ž๋ฅผ ํฌํ•จํ•œ ๋ชจ๋“  ์‚ฌ์šฉ์ž๋“ค์˜ ์›น ๋ธŒ๋ผ์šฐ์ €๋ฅผ ํ†ตํ•œ ์ •๋ณด ์ ‘๊ทผ์— ์ œ์•ฝ์„ ์ค€๋‹ค. ๋”ฐ๋ผ์„œ ์–ด๋–ค ๋ธŒ๋ผ์šฐ์ €๋ฅผ ์‚ฌ์šฉํ•˜๊ฑด ๋ชจ๋“  ์‚ฌ์šฉ์ž๋“ค์ด ๋™์ผํ•œ ์›น ์‚ฌ์ดํŠธ๋ฅผ ๋ณด๊ณ  ์ด์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ์›น ํ‘œ์ค€๊ธฐ์ˆ  ์ž‘์—…์ด ๋ฐ˜๋“œ์‹œ ํ•„์š”ํ•˜๋‹ค.



์›น ํ˜ธํ™˜์„ฑ(Cross Browsing)์ด๋ž€?

ํ‘œ์ค€ ์›น ๊ธฐ์ˆ ์„ ์‚ฌ์šฉํ•˜์—ฌ ์–ด๋Š ํ•œ์ชฝ๋งŒ์˜ ์šด์˜์ฒด์ œ๋‚˜ ๋ธŒ๋ผ์šฐ์ €์— ์ตœ์ ํ™”๋˜๊ฑฐ๋‚˜ ์ข…์†๋˜์ง€ ์•Š๋„๋ก ๊ณตํ†ต ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์›น ํŽ˜์ด์ง€๋ฅผ ์ œ์ž‘ํ•˜๋Š” ๊ธฐ๋ฒ•์ด๋ฉฐ ์›น ์‚ฌ์ดํŠธ ์‚ฌ์šฉ ์‹œ ์–ด๋– ํ•œ ํ™˜๊ฒฝ์—์„œ๋„ ๋™์ผํ•œ ๊ฒฐ๊ณผ๊ฐ€ ๋‚˜์˜ค๋„๋ก ์˜๋ฏธํ•˜๋Š” ์›น ์ƒํ˜ธ์šด์šฉ์„ฑ์˜ ๊ฐœ๋…์— ์›น ํ‘œ์ค€์˜ ์ค€์ˆ˜๋ฅผ ํฌํ•จํ•˜๋Š” ๊ฐœ๋…์ด๋‹ค.

์›น ํ˜ธํ™˜์„ฑ์˜ ์ค‘์š”์„ฑ

์›น ํ˜ธํ™˜์„ฑ์„ ์ค€์ˆ˜ํ•จ์œผ๋กœ ์ธํ•ด ์žฅ์• ์ธ๊ณผ ๊ณ ๋ น์ž ๋“ฑ ์ •๋ณด ์†Œ์™ธ ๊ณ„์ธต์ด ๋น„์žฅ์• ์ธ๋“ค๊ณผ ๋™๋“ฑํžˆ ์ •๋ณด์— ์ž์œ ๋กญ๊ฒŒ ์ ‘๊ทผํ•  ๊ถŒ๋ฆฌ๋ฅผ ๋ˆ„๋ฆด ์ˆ˜ ์žˆ์œผ๋ฉฐ ์ด๋กœ ์ธํ•ด ์ž ์žฌ์  ๊ณ„์ธต์„ ์‚ฌ์šฉ์ž ๊ณ„์ธต์œผ๋กœ ๋Œ์–ด๋‚ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์‹ค์ œ๋กœ ์›น ํ˜ธํ™˜์„ฑ์„ ์ค€์ˆ˜ํ•œ ์™ธ๊ตญ์˜ ์‡ผํ•‘๋ชฐ์ด ๋‹ค์–‘ํ•œ ๊ณ ๊ฐ์ธต์„ ํ™•๋ณดํ•ด ๋งค์ถœ์„ ์ฆ๊ฐ€์‹œํ‚จ ์‚ฌ๋ก€๊ฐ€ ์žˆ์œผ๋ฉฐ, ๊ตญ๋‚ด์˜ ์‡ผํ•‘๋ชฐ์—์„œ๋„ ๋…ธ๋…„์ธต ๋งค์ถœ์ด ๊พธ์ค€ํžˆ ์ฆ๊ฐ€ํ•˜๋Š” ์ถ”์„ธ์ž„์„ ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.



์›น ํ‘œ์ค€, ์›น ํ˜ธํ™˜์„ฑ, ์›น ์ ‘๊ทผ์„ฑ์— ๋Œ€ํ•œ ์ดํ•ด

๊ตฌ๋ถ„ ๋ชฉ์  ์ค€์ˆ˜ํ•  ๋‚ด์šฉ ์ฐจ์ด
์›น ํ‘œ์ค€
(Web Standards)
์›น ์‚ฌ์šฉ์„ฑ
๋ฐ ์ ‘๊ทผ์„ฑ ๋ณด์žฅ
HTML, CSS ๋“ฑ์— ๋Œ€ํ•œ WC3 ๊ทœ๊ฒฉ(๋ฌธ๋ฒ•) ์ค€์ˆ˜ ๋“ฑ
- HTML, CSS, JavaScript ๋“ฑ ๊ตฌ์กฐ์™€ ํ‘œํ˜„, ๋™์ž‘ ๋ถ„๋ฆฌ ๊ถŒ๊ณ 
์›น์˜ ๋‚ด์šฉ, ํ‘œํ˜„, ํ–‰๋™์— ๊ด€๋ จ๋œ ๊ธฐ์ˆ  ํ‘œ์ค€
์›น ํ˜ธํ™˜์„ฑ
(Cross Browsing)
์›น ๋ธŒ๋ผ์šฐ์ € ๋ฒ„์ „,
์ข…๋ฅ˜์™€ ๊ด€๊ณ„์—†๋Š”
์›น์‚ฌ์ดํŠธ ์ ‘๊ทผ
์›น ํ‘œ์ค€ ์ค€์ˆ˜๋ฅผ ํ†ตํ•œ ๋ธŒ๋ผ์šฐ์ € ํ˜ธํ™˜์„ฑ ํ™•๋ณด
- HTML, CSS ๋ฌธ๋ฒ• ์ค€์ˆ˜
- ๋™์ž‘, ๋ ˆ์ด์•„์›ƒ, ํ”Œ๋Ÿฌ๊ทธ์ธ ํ˜ธํ™˜์„ฑ
์›น ํ‘œ์ค€์„ ๊ณตํ†ต์œผ๋กœ ํฌํ•จ
์›น ์ ‘๊ทผ์„ฑ
(Web Accessibility)
์ธ์ , ํ™˜๊ฒฝ์  ์š”์ธ์—
์ œ์•ฝ์—†๋Š” ์›น ์ •๋ณด ์ ‘๊ทผ
W3C ์›น ์ ‘๊ทผ์„ฑ ์ด๋‹ˆ์…”ํ‹ฐ๋ธŒ(WAI)
ํ•œ๊ตญํ˜• ์›น ์ฝ˜ํ…์ธ  ์ ‘๊ทผ์„ฑ ์ง€์นจ2.0
- ์ธ์‹์˜ ์šฉ์ด์„ฑ, ์šด์šฉ์˜ ์šฉ์ด์„ฑ, ์ดํ•ด์˜ ์šฉ์ด์„ฑ, ๊ฒฌ๊ณ ์„ฑ
๋ฐ˜์‘ํ˜•

๋Œ“๊ธ€


Reference Book

JavaScript
HTML
CSS
๊ด‘๊ณ  ์ค€๋น„์ค‘์ž…๋‹ˆ๋‹ค.