์น ํ์ค์ฑ(Web Standards)
์น ํ์ค์ด๋?
์ฌ์ฉ์๊ฐ ์ด๋ค ๋ธ๋ผ์ฐ์ ๋ ๊ธฐ๊ธฐ๋ฅผ ์ฌ์ฉํด๋ ๋ด์ฉ์ ๋์ผํ๊ฒ ๋ณผ ์ ์๋๋ก ํ๋ ๊ฒ.
ํ์คํ ๋จ์ฒด์ธ W3C๊ฐ ๊ถ๊ณ ํ ํ์ค์์ ๋ฐ๋ผ ์น์ ์์ฑํ ๋ ์ด์ฉํ๋ HTML, CSS, JavaScript ๋ฑ์ ๋ํ ๊ท์ ์ด ๋ด๊ฒจ ์๋ค.
์น ํ์ค ์ค์๋ ์น ์ ๊ทผ์ฑ ์ค์๋ฅผ ์ํ ํต์ฌ์ด๋ค.
์ฆ, ์น ์ ๊ทผ์ฑ์ด ๋ ํฐ ๊ฐ๋ ์ด๋ฉฐ. ์น ํ์ค์ ์น ์ ๊ทผ์ฑ์ ๊ตฌํํ๊ธฐ ์ํ ๋ถ๋ถ์ ์์๋ค.
์น ํ์ค ๊ด๋ จ ๊ธฐ์ ์ ์๊ฐ
- ๊ตฌ์กฐ (X)HTML
- ํํ CSS
- ๋์ Script
1. ๊ตฌ์กฐ ์ธ์ด (X)HTML & XML
HTML5๋ ํน์ ํ๋ฌ๊ทธ์ธ์ ์์กดํ์ง ์๊ณ ์ฝํ ์ธ ๋ฅผ ์ ๊ณตํ๋ ๊ฒ์ด ๋ชฉํ.
๋ง์ ๊ธฐ์ ๋ค์ด HTML5์ ํ์คํ์ ํ์ ๋ณดํ๊ณ ์๊ณ , Firefox, Opera, Safari, Chrome ๋ฑ ์ต์ ์ ์น ๋ธ๋ผ์ฐ์ ์์ ๊ธฐ๋ณธ์ ์ผ๋ก HTML5์ ์ง์ํ๊ณ ์์ผ๋ฉฐ, ๋ง์ดํฌ๋กฏํํธ์ฌ IE9๋ถํฐ HTML5์ ์๋ก์ด ์์๋ฅผ ์ง์ํ๊ณ ์๋ค.
๊ฐ์ฅ ์ต์ ํ์ค์ธ HTML5์์๋ ๊ธฐ์กด div์์ ์ธ์ header, footer, aside, figure, section, article ๋ฑ์ด ์๋ค.
<!doctype html>
<html lang="ko-KR">
<head>
<meta charset="utf-8">
<title>๋ฌธ์ ์ ๋ชฉ</title>
</head>
<body>
<header>ํค๋</header>
<nav>๋ด๋น๊ฒ์ด์
</nav>
<main>
<section>์น์
</section>
</main>
<aside>๋ถ๊ฐ ์ฝํ
์ธ </aside>
<footer>ํธํฐ</footer>
</body>
</html>
2. ํํ ์ธ์ด CSS
CSS(Cascading Style Sheet)๋ ๊ธฐ์กด์ HTML์ ์น ๋ฌธ์๋ฅผ ๋ค์ํ๊ฒ ์ค๊ณํ๊ณ ์์๋ก ๋ณ๊ฒฝํ๋ ๋ฐ์ ๋ง์ ์ ์ฝ์ด ์์๊ธฐ ๋๋ฌธ์ ์ด๊ฒ์ ๋ณด์ํ๊ธฐ ์ํด CSS๋ฅผ ๋ง๋ ๊ฒ์ด๋ค.
HTML์ ์ผ์ผ์ด ํ๋์ฉ ์คํ์ผ์ ์ง์ ํด์ผ ํ์ง๋ง CSS๋ ์ ์ฒด ํ์ด์ง์ ๋ด์ฉ์ด ํ๊บผ๋ฒ์ ๋ณ๊ฒฝ๋๋ฏ๋ก ๋ฌธ์ ์ ์ฒด์ ์ผ๊ด์ฑ์ ์ ์งํ ์ ์๊ณ , ์์ ์๊ฐ๋ ๋จ์ถํ ์ ์๋ค.
3. ๋์ ๋ฐ ์ ์ด๋ฅผ ์ํ DOM & ECMA Script
์น ํ์ด์ง์ ์์๋ฅผ ๊ฐ์ฒดํํด์ ๋์์ ์ ์ดํ๋ ๋ฐ ์ฌ์ฉํ๋ ์น ํ์ค ๊ธฐ์ ์๋ DOM๊ณผ ECMA Script๊ฐ ์๋ค.
DOM(Document Object Model)์ ์น ํ์ด์ง์ ๊ตฌ์ฑ ์ฒด๊ณ๋ฅผ ๋งํ๋๋ฐ, EMCA Script์ ๊ธฐ์ ์ ํตํด DOM์ ๊ตฌ์กฐ๋ฅผ ๋ณ๊ฒฝํ ์ ์๋ค.
์ฆ, ์ฌ์ฉ์ ์ธก์์ ์๋ํ๋ ๋ง์ ๋์ ์์๋ค์ด DOM์ ์ด์ฉํด ๊ฐ์ฒด ๋ชจ๋ธ์ ์ ๊ทผ ํ, ์คํฌ๋ฆฝํธ ์ธ์ด์ธ ECMA Script๋ฅผ ์ด์ฉํ์ฌ ์น ํ์ด์ง์ ์์์ ๋์์ ์ ์ดํ๋ ๋ฐฉ๋ฒ์ผ๋ก ์์ฑํ ๊ฒ์ด๋ค.
์น ํ์ค์ ์ฅ์
-
์น ์ ๊ทผ์ฑ ์์ค์ ํฅ์
์น ํ์ค์ ์ค์ํ๋ ๊ฒ๋ง์ผ๋ก๋ ์์ฐ์ค๋ฝ๊ฒ ์น ์ ๊ทผ์ฑ์ด ํฅ์๋๋ค. ์น ํ์ค์ ์ค์ํ ์น ์ฌ์ดํธ๋ ๋ค์ํ ์น ๋ธ๋ผ์ฐ์ ๋ ์๋ก์ด ๊ธฐ๊ธฐ์์๋ ์ฌ๋ฐ๋ฅด๊ฒ ํ์๋๊ธฐ ๋๋ฌธ์ด๋ค.
-
๊ฒ์ ์นํ์ ์ธ ์น ์ฌ์ดํธ ๊ตฌํ
meta ์์๋ฅผ ์ด์ฉํ ์ ํํ ๋ฌธ์ ์ ๋ณด์ ์ ๊ณต๊ณผ ์ ์ ํ ์ ๋ชฉ(heading ์์)์ ์ฌ์ฉ, ์๋ฏธ์ ๋ง๋ ๋งํฌ์ ์ ๊ฒ์ ์ ํฐ ์ํฅ์ ๋ฏธ์น๋ค. ๋ฐ๋ก ํ๋ณด๋ฅผ ์ํ ๋น์ฉ์ ์ง์ถํ์ง ์๋๋ผ๋ ์ถฉ์คํ๊ฒ ์์ฑ๋ ๋ฌธ์ ์ ๋ณด๋ง์ผ๋ก๋ ๊ฒ์์ ํจ์จ์ฑ์ ๋์ผ ์ ์๋ค.
-
๊ตฌ์กฐ์ ํํ์ ๋ถ๋ฆฌ
๊ตฌ์กฐ์ ํํ์ด ๋ค์์ฌ ์ ๊ทผ ๋ฐ ์ฌ์ฉ์ด ์ด๋ ค์ ๋ ๊ณผ๊ฑฐ์ ๋นํด, ํ์ฌ HTML์ด๋ XHTML ๋ฑ์ ๋งํฌ์ ์ธ์ด๋ฅผ ๊ตฌ์ถํ๊ณ CSS๋ฅผ ์ด์ฉํจ์ผ๋ก์จ ๊ตฌ์กฐ์ ํํ์ด ๋ถ๋ฆฌ๋ ๋ ๋ฆฝ์ ์ธ ๊ตฌํ์ด ๊ฐ๋ฅํ๋๋ก ๋์์ค๋ค.
-
์์ฌ์ด ์ ์ง ๋ณด์ ๋ฐ ๋น์ฉ ์ ๊ฐ ํจ๊ณผ
๊ตฌ์กฐ์ ํํ์ ๋ถ๋ฆฌํ๋ฉด ์ ์ง ๋ณด์์ ํธ๋ฆฌํ๊ณ ์์ค์ ๊ฒฝ๋ํ๋ก ์ธํด ์๋ฒ์ ํธ๋ํฝ ๋น์ฉ์ด ๊ฐ์ํ์ฌ ๋ถ์์ ์ธ ํจ๊ณผ๋ฅผ ์ป์ ์ ์๋ค.
-
ํธํ์ฑ ํ๋ณด
์ฌ๋ฐ๋ฅธ ๋งํฌ์ ๊ณผ CSS๋ฅผ ์ด์ฉํด ์น์ ์ ์ํ๋ฉด ํ์ ํธํ์ฑ์ด๋ ์์ ํธํ์ฑ์ ์ฝํ ์ธ ๊ฐ ์ ์ ํ๊ฒ ํ์๋๋ค.
2020/09/17 - [๐ฉ๐ป๐ปDEVELOPE/Publishing] - ์น์ ๊ทผ์ฑ(Web Accessibility)