์น ์ ๊ทผ์ฑ์ ๋ํด ํ์ตํ๋ค. ์น,์ฑ์ ๊ฐ๋ฐํ ๋ ์ด๋ ํ ๋ถ๋ถ์ ์ ๊ทผ์ฑ์ ๊ณ ๋ คํด ์์ ํด์ผํ๋ ์ ์ ์์๋ค.
์น ์ ๊ทผ์ฑ์ ๊ฐ์ถ๋ฉด ์ป์ ์ ์๋ ํจ๊ณผ
1.์ฌ์ฉ์์ธต ํ๋
์น ์ ๊ทผ์ฑ์ ํ๋ณดํ๋ฉด ์ฅ์ ์ธ, ๊ณ ๋ น์ ๋ฑ ์ ๋ณด ์์ธ ๊ณ์ธต๋ ์น ์ฌ์ดํธ๋ฅผ ์์ ๋กญ๊ฒ ์ด์ฉํ ์ ์๊ฒ ๋๋ค.
๊ทธ๋งํผ ์ฌ์ดํธ์ ์ด์ฉ์๋ฅผ ๋๋ฆด ์ ์๊ณ , ์๋ก์ด ๊ณ ๊ฐ์ธต์ ํ๋ณดํ ์ ์๋ค.2.๋ค์ํ ํ๊ฒฝ ์ง์
์น ์ ๊ทผ์ฑ์ ํฅ์ ์ํค๋ฉด ๋ค์ํ ํ๊ฒฝ, ๋ค์ํ ๊ธฐ๊ธฐ์์์ ์น ์ฌ์ดํธ๋ฅผ ์์ ๋กญ๊ฒ ์ฌ์ฉํ ์ ์๊ฒ ๋๋ฏ๋ก ์๋น์ค์ ์ฌ์ฉ ๋ฒ์๊ฐ ํ๋
3.์ฌํ์ ์ด๋ฏธ์ง ํฅ์
์น ์ ๊ทผ์ฑ ํ๋ณด๋ฅผ ํตํด ๊ธฐ์ ์ด ์ ๋ณด ์์ธ ๊ณ์ธต์ ์ํ ์ฌํ ๊ณตํ ๋ฐ ๋ณต์ง ํฅ์์ ํ์ฐ๊ณ ์์์ ๋ณด์ฌ์ค ์ ์๋ค.
๋ชจ๋ ์ฝํ ์ธ ๋ ์ฌ์ฉ์๊ฐ ์ธ์ํ ์ ์์ด์ผ ํ๋ค.
ํ ์คํธ๊ฐ ์๋ ์ฝํ ์ธ ๋ ๊ทธ ์๋ฏธ๋ ์ฉ๋๋ฅผ ์ดํดํ ์ ์๋๋ก ๋์ฒด ํ ์คํธ๋ฅผ ์ ๊ณตํด์ผํ๋ค,
alt
์์ฑ ์ฌ์ฉํ๊ธฐ
<img src="์ด๋ฏธ์ง ์ฃผ์" alt="๋์ฒด ํ
์คํธ" />
alt๊ฐ ๋น ๋ฌธ์์ด๋ก ์์ฑํด์ผํ๋ ๊ฒฝ์ฐ
- ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง์ ๊ฐ์ ์ ๋ณด๋ฅผ ์ธ์ํ ํ์ํ ์๋ ๊ฒฝ์ฐ
(์คํฌ๋ฆฐ๋๊ฐ ์ธ์ํ์ง ์๊ฒ ํ๋ค.)- ์ธ์ ์์์ ๋ด์ฉ์์ ์ด๋ฏธ์ง์ ์ ๋ณด๋ฅผ ์ถฉ๋ถํ ์ธ์งํ ์ ์๋ ๊ฒฝ์ฐ
(๋์ฒด ํ ์คํธ๋ฅผ ์์ฑํ ๊ฒฝ์ฐ ์ด๋ฏธ์ง ์ ๋ณด๋ฅผ ์ค๋ณตํด์ ์ ๊ณตํ๊ฒ ๋๋ค.)
๋ฉํฐ๋ฏธ๋์ด ์ฝํ ์ธ ์๋ ์๋ง, ์๊ณ ๋๋ ์ํ๋ฅผ ์ ๊ณต
track
์์๋ฅผ ์ฌ์ฉํด ์๋ง ํ์ผ ๋ถ๋ฌ์ค๊ธฐ<video ... >
<track src="์๋ง.vtt" kind="captions" />
</video>
์ฝํ ์ธ ๋ ์์ ๊ด๊ณ์์ด ์ธ์๋ ์ ์์ด์ผ ํ๋ค.
์์ฝ, ์๋งน ๋ฑ์ ์์ ์ธ์งํ๋๋ฐ ์ด๋ ค์์ด ์๋ ์ฌ์ฉ์์ ๊ฒฝ์ฐ ์์ผ๋ก ๊ตฌ๋ถ๋๋ ์ฝํ ์ธ ๋ฅผ ์ ๋๋ก ํ์ ํ์ง ๋ชปํ ์๋ ์๋ค.
์ง์์ฌํญ์ ๋ชจ์, ํฌ๊ธฐ, ์์น, ๋ฐฉํฅ, ์, ์๋ฆฌ ๋ฑ์ ๊ด๊ณ์์ด ์ธ์๋ ์ ์์ด์ผ ํ๋ค.
ํด๋น ๋ฒํผ์ ์ค๋ช ํ๋ ๋์ฒด ํ ์คํธ๋ฅผ ์์ฑ
ํผ๋๋ฐฑ๋ ํจ๊ป ์ ๊ณตํด์ผ ํ๋ค.
ํ ์คํธ ์ฝํ ์ธ ์ ๋ฐฐ๊ฒฝ ๊ฐ์ ๋ช ๋ ๋๋น๋ 4.5๋ 1 ์ด์์ด์ด์ผ ํ๋ค.
์๋์ผ๋ก ์๋ฆฌ๊ฐ ์ฌ์๋์ง ์์์ผ ํ๋ค.
์ด์ํ ์ฝํ ์ธ ๋ ๊ตฌ๋ณ๋ ์ ์์ด์ผ ํ๋ค.
์ฌ์ฉ์ ์ธํฐํ์ด์ค ๊ตฌ์ฑ์์๋ ์กฐ์ ๊ฐ๋ฅํ๊ณ ๋ด๋น๊ฒ์ด์ ํ ์ ์์ด์ผ ํ๋ค.
๋ชจ๋ ๊ธฐ๋ฅ์ ํค๋ณด๋๋ง์ผ๋ก๋ ์ฌ์ฉํ ์ ์์ด์ผํ๋ค.
ํค๋ณด๋์ ์ํ ์ด์ ์ ๋ ผ๋ฆฌ์ ์ผ๋ก ์ด๋ํด์ผ ํ๋ฉฐ ์๊ฐ์ ์ผ๋ก ๊ตฌ๋ณํ ์ ์์ด์ผ ํ๋ค.
์ฌ์ฉ์ ์ ๋ ฅ ๋ฐ ์ปจํธ๋กค์ ์กฐ์ ๊ฐ๋ฅํ๋๋ก ์ ๊ณต๋์ด์ผ ํ๋ค.
์๊ฐ ์ ํ์ด ์๋ ๊ณคํ
์ธ ๋ ์๋ต์๊ฐ์ ์กฐ์ ํ ์ ์์ด์ผ ํ๋ค.
- ์ถฉ๋ถํ ์๊ฐ
- ์ข
๋ฃ ์๋ด
- ์กฐ์ ์๋จ ์ ๊ณต
์๋์ผ๋ก ๋ณ๊ฒฝ๋๋ ์ฝํ ์ธ ๋ ์์ง์์ ์ ์ดํ ์ ์์ด์ผ ํ๋ค.
์ด๋น 3~50ํ ์ฃผ๊ธฐ๋ก ๊น๋นก์ด๊ฑฐ๋ ๋ฒ์ฉ์ด๋ ์ฝํ ์ธ ๋ฅผ ์ ๊ณตํ์ง ์์์ผ ํ๋ค.
์ฝํ ์ธ ์ ๋ฐ๋ณต๋๋ ์์ญ์ ๊ฑด๋๋ธ ์ ์์ด์ผ ํ๋ค.
ํ์ด์ง, ํ๋ ์, ์ฝํ ์ธ ๋ธ๋ก์๋ ์ ์ ํ ์ ๋ชฉ์ ์ ๊ณตํด์ผ ํ๋ค.
๋งํฌ ํ ์คํธ๋ ์ฉ๋๋ ๋ชฉ์ ์ ์ดํดํ ์ ์๋๋ก ์ ๊ณตํด์ผ ํ๋ค.
์ฝํ ์ธ ๋ ์ดํดํ ์ ์์ด์ผ ํ๋ค.
์ฃผ๋ก ์ฌ์ฉํ๋ ์ธ์ด๋ฅผ ๋ช ์ํด์ผ ํ๋ค.
HTML ์์์ lang ์์ฑ์ ์ฌ์ฉํ์ฌ ์ ๊ณต
<html lang="ko">
ํ์ด์ง ๋ด์ ๋ค๋ฅธ ์ธ์ด๊ฐ ์กด์ฌํ๋ ๊ฒฝ์ฐ์๋ ํด๋น ์์์ lang ์์ฑ์ ํ๊ธฐ
์ฌ์ฉ์๊ฐ ์๋ํ์ง ์์ ๊ธฐ๋ฅ(์ ์ฐฝ, ์ด์ ์ ์ํ ๋งฅ๋ฝ ๋ณํ ๋ฑ)์ ์คํ๋์ง ์์์ผ ํ๋ค.
<a href="...">ํ์ด์ง<span class="blind">์ ์ฐฝ</span></a>
title
์์ฑ์ผ๋ก ์ ์ฐฝ ์์ฑํ๊ธฐ<a href="..." title="์ ์ฐฝ">ํ์ด์ง</a>
target=โ_blankโ
์์ฑ์ ๋ฃ๊ธฐ<a href="..." target="_blank">ํ์ด์ง</a>
์ฝํ ์ธ ๋ ๋ ผ๋ฆฌ์ ์ธ ์์๋ก ์ ๊ณตํด์ผ ํ๋ค.
// ํด๊ฒฐ ๋ฐฉ๋ฒ : ํญ1 -> ํญ1 ๊ด๋ จ ๋ด์ฉ -> ํญ2 -> ํญ2 ๊ด๋ จ ๋ด์ฉ ์์๋ก ์ฝ์ต๋๋ค.
<div>ํญ1</div>
<div>ํญ1 ๊ด๋ จ ๋ด์ฉ</div>
<div>ํญ2</div>
<div>ํญ2 ๊ด๋ จ ๋ด์ฉ</div>
ํ๋ ์ดํดํ๊ธฐ ์ฝ๊ฒ ๊ตฌ์ฑํด์ผ ํ๋ค.
caption
์์๋ฅผ ์ฌ์ฉํด์ ํ์ ์ ๋ชฉ์ ์ ๊ณตํ๊ธฐ<th>
, ๋ฐ์ดํฐ ์
์ <td>
๋ฅผ ์ฌ์ฉscope
ํน์ id
์ headers
์์ฑ์ ์ฌ์ฉํ์ฌ ์์ฑ์ฌ์ฉ์ ์ ๋ ฅ์๋ ๋์ํ๋ ๋ ์ด๋ธ์ ์ ๊ณตํด์ผ ํ๋ค.
<input>
์์์ id
์ค์ ํ๊ณ <label>
์์์ for
์์ฑ์ผ๋ก ์ฐ๊ฒฐ<label for="user_id">์์ด๋</label>
<input id="user_id" type="text" placeholder="์์ด๋" />
title
์์ฑ์ ์ฌ์ฉ<input type="text" title="์์ด๋" placeholder="์์ด๋" />
WAI-ARIA
์ aria-label
์์ฑ ์ฌ์ฉ<input type="text" aria-label="์์ด๋" placeholder="์์ด๋" />
WAI-ARIA์ ๊ฒฝ์ฐ ๊ผญ ํ์ํ ๊ฒฝ์ฐ๊ฐ ์๋๋ผ๋ฉด ์ฌ์ฉํ์ง ์๋ ๊ฒ์ด ์ข๋ค.
๋ค๋ฅธ HTML ์์ฑ์ด๋ ์์๋ก ๋์ฒด ๊ฐ๋ฅํ ๊ฒฝ์ฐ์๋ ํด๋น ์์ฑ์ด๋ ์์๋ฅผ ์ฐ์ ์ ์ผ๋ก ์ฌ์ฉ
์ ๋ ฅ ์ค๋ฅ๋ฅผ ์ ์ ํ ์ ์๋ ๋ฐฉ๋ฒ์ ์ ๊ณตํด์ผ ํ๋ค.
์น ์ฝํ ์ธ ๋ ๋ฏธ๋์ ๊ธฐ์ ๋ก๋ ์ ๊ทผํ ์ ์๋๋ก ๊ฒฌ๊ณ ํ๊ฒ ๋ง๋ค์ด์ผ ํ๋ค.
๋งํฌ์ ์ธ์ด์ ์์๋ ์ด๊ณ ๋ซ์, ์ค์ฒฉ ๊ด๊ณ ๋ฐ ์์ฑ ์ ์ธ์ ์ค๋ฅ๊ฐ ์์ด์ผ ํ๋ค.
์ฝํ ์ธ ์ ํฌํจ๋ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ์ ๊ทผ์ฑ์ด ์์ด์ผ ํ๋ค.
์ ๊ทผ์ฑ์ ์ ๊ฒฝ์จ์ผํ ๋ถ๋ถ์ด ์๊ฐ ๋ณด๋ค ๋ง์ ์ ์ ๋๋๋ค.
์ถํ ์น, ์ฑ์ ๊ฐ๋ฐ ํ ๋ ํ ๋ฒ ๋ ์๊ฐํ๊ฒ ๋ ๊ฒ ๊ฐ๋ค.