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

์›น ํ‘œ์ค€์„ฑ/ ์›น ์ ‘๊ทผ์„ฑ/ ์›น ํ˜ธํ™˜์„ฑ

by _ํ† ๋งคํ†  2022. 8. 9.
728x90

์›น ํ‘œ์ค€ / ์›น ์ ‘๊ทผ์„ฑ / ์›น ํ˜ธํ™˜์„ฑ

์›นํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด์„œ๋Š” ์ง€์ผœ์•ผํ•  ๊ทœ์น™์ด ์ด 3๊ฐ€์ง€๊ฐ€ ์žˆ๋‹ค.
3๊ฐ€์ง€ ๊ทœ์น™์€ ์›นํ‘œ์ค€, ์›น ์ ‘๊ทผ์„ฑ, ์›น ํ˜ธํ™˜์„ฑ์œผ๋กœ ์›น ํ‘œ์ค€ ํ•˜๋‚˜๋งŒ ์ค€์ˆ˜ ํ•œ๋‹ค๊ณ  ํ•ด์„œ ์›น ์ ‘๊ทผ์„ฑ์ด๋‚˜ ์›น ํ˜ธํ™˜์„ฑ์ด ๋ณด์žฅ๋˜์ง€ ์•Š์œผ๋ฉฐ ์›น ํ˜ธํ™˜์„ฑ์„ ์ค€์ˆ˜ํ•˜๋”๋ผ๋„ ์›น ์ ‘๊ทผ์„ฑ์€ ๋ณด์žฅ๋˜์ง€ ์•Š๋Š”๋‹ค.
๋•Œ๋ฌธ์— ์›น ํ‘œ์ค€, ์›น ์ ‘๊ทผ์„ฑ, ์›น ํ˜ธํ™˜์„ฑ 3๊ฐ€์ง€ ๋ชจ๋‘๋ฅผ ์ง€ํ‚ค๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•˜๋‹ค.


1. ์›น ํ‘œ์ค€

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

์›น ํ‘œ์ค€์˜ ๊ถ๊ทน์ ์ธ ๋ชฉ์ 

์›น์‚ฌ์ดํŠธ์— ์ ‘์†ํ•œ ์‚ฌ์šฉ์ž๊ฐ€ ์–ด๋– ํ•œ ์šด์˜์ฒด์ œ๋‚˜ ๋ธŒ๋ผ์šฐ์ €๋ฅผ ์‚ฌ์šฉํ•˜๋”๋ผ๋„ ๋™์ผํ•œ ๊ฒฐ๊ณผ๋ฅผ ๋ณด์ด๊ฒŒ ํ•˜๋Š” ๊ฒƒ

! ์›น ํ‘œ์ค€ ์ค€์ˆ˜ ์ด์œ  !

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

2. ์›น ์ ‘๊ทผ์„ฑ

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

! ์›น ์ ‘๊ทผ์„ฑ์„ ์ง€์ผœ์•ผ ํ•˜๋Š” ์ด์œ  !

1. ์žฅ์• ์ธ, ๊ณ ๋ น์ž ๋“ฑ์„ ํฌํ•จํ•œ ๋ชจ๋“  ์‚ฌ๋žŒ๋“ค์ด ์›น์—์„œ ์›ํ•˜๋Š” ์ •๋ณด๋“ค์„ ์ž์œ ๋กญ๊ฒŒ ์ ‘๊ทผํ•˜๊ณ  ์ด์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.
2. 08๋…„ 4์›” 11์ผ๋ถ€ํ„ฐ ์‹œํ–‰๋œ โ€˜์žฅ์• ์ธ์ฐจ๋ณ„๊ธˆ์ง€ ๋ฐ ๊ถŒ๋ฆฌ๊ตฌ์ œ ๋“ฑ์— ๊ด€ํ•œ ๋ฒ•๋ฅ โ€™ ๋ฐ ๋™๋ฒ• ์‹œํ–‰๋ น ๋“ฑ ๊ด€๋ จ ๊ทœ์ •์„ ์ค€์ˆ˜ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋œ๋‹ค.
3. ์ฃผ๋ณ€ ํ™˜๊ฒฝ(์ฃผ๋ณ€์†Œ์Œ, ๋ฐ์€ ํƒœ์–‘๊ด‘, ์ž‘์€ ํ™”๋ฉด ๋“ฑ)์ด๋‚˜, ๋‹จ๋ง๊ธฐ ์ข…๋ฅ˜(์Šค๋งˆํŠธํฐ, PC/๋…ธํŠธ๋ถ, ํŒจ๋“œ)์— ์ƒ๊ด€ ์—†์ด ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ์›น์„ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋œ๋‹ค.
4. ์›น ํŽ˜์ด์ง€ ๊ตฌ์„ฑ์ด ๋…ผ๋ฆฌ์ ์œผ๋กœ ์ตœ์ ํ™”๋˜์–ด, ๋””์ž์ธ ๋ฐ ์„ค๊ณ„์˜ ํšจ์œจ์„ฑ ์ œ๊ณ ๋Š” ๋ฌผ๋ก  ๊ฐœ๋ฐœ/์œ ์ง€๋ณด์ˆ˜/๊ฐœํŽธ ๋น„์šฉ ์ ˆ๊ฐ ํšจ๊ณผ๋ฅผ ๊ฐ€์ ธ์˜ค๊ฒŒ ๋œ๋‹ค.


3. ์›น ํ˜ธํ™˜์„ฑ

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

! ์›น ํ˜ธํ™˜์„ฑ ์ค€์ˆ˜ ์ด์œ  !

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

์›น ํ‘œ์ค€ / ์›น ์ ‘๊ทผ์„ฑ / ์›น ํ˜ธํ™˜์„ฑ ๋น„๊ต

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

'HTML' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[HTML] ๋ธ”๋ก๊ตฌ์กฐ์™€ ์ธ๋ผ์ธ ๊ตฌ์กฐ  (3) 2022.08.22
[HTML] ๊ตฌ์„ฑ ๊ด€๋ จ ์š”์†Œ  (1) 2022.08.16

๋Œ“๊ธ€


Lucky Charms Rainbow
js
html
css