input&label ์›น ์ ‘๊ทผ์„ฑ์— ๋งž๋Š” ์ฝ”๋”ฉ

2012. 11. 9. 11:23ยทBefore. 2021

input & label ์›น ์ ‘๊ทผ์„ฑ์— ๋งž๋Š” ์ฝ”๋”ฉ๋ฒ•





1. input ๊ณผ label์„ ๋™์‹œ์— ์“ฐ๋Š” ๊ฒฝ์šฐ

     --> label์˜ for์™€ input ์•„์ด๋””๋ฅผ ์—ฐ๋™ ์‹œ์ผœ์ค˜์•ผํ•จ. 


1
2
3
4

<div> <label for="input id">์ด๋ฆ„</label>

<input type="text" id="id"/> </div>


2. input๋งŒ ์“ฐ๋Š” ๊ฒฝ์šฐ

     --> ๋””์ž์ธ ์ƒ label์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š์„ ๊ฒฝ์šฐ title๋งŒ ์ ์–ด์ค˜๋„ ๋ฌธ์ œ์—†์Œ


1 2 3

<div>

<input type="text" id="id" title="์ด๋ฆ„"/> </div>



3. input type="image"๋ฅผ ์“ธ ๊ฒฝ์šฐ

     --> ์›น ์ ‘๊ทผ์„ฑ ์—ฐ๊ตฌ์†Œ์—์„œ๋Š” ์ด ๊ฒฝ์šฐ alt์™€ title์„ ๋‘˜๋‹ค ๋ช…์‹œ์— ์ค„๊ฒƒ์„ ๊ถŒ๊ณ ํ•จ.


1 2 3

<div>

<input type="image" id="id" ait="๊ฒ€์ƒ‰" title="๊ฒ€์ƒ‰ ๊ฒฐ๊ณผ ๋ณด๊ธฐ"/> </div>



์ฐธ์กฐ : http://www.wah.or.kr/Example/wcag_valu.asp?cate=60


์ €์ž‘์žํ‘œ์‹œ (์ƒˆ์ฐฝ์—ด๋ฆผ)

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

input ํƒœ๊ทธ disabled & readonly ์†์„ฑ  (0) 2012.11.26
์›น ์ ‘๊ทผ์„ฑ ์ง€ํ‘œ๋ณ„ ์ „๋ฌธ๊ฐ€์‹ฌ์‚ฌ ํ‰๊ฐ€ ๊ธฐ์ค€  (0) 2012.11.09
CSS๋กœ input type="file" ๋ฐ”๊พธ๊ธฐ  (12) 2012.11.01
IE9/Chrom table border ๋ฌธ์ œ  (0) 2012.10.16
์ต์Šคํ”Œ๋กœ๋Ÿฌ์—์„œ html5๋ฅผ ํ‘œํ˜„ํ•˜๋Š” ๋ฐฉ๋ฒ•  (0) 2012.10.10
'Before. 2021' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
  • input ํƒœ๊ทธ disabled & readonly ์†์„ฑ
  • ์›น ์ ‘๊ทผ์„ฑ ์ง€ํ‘œ๋ณ„ ์ „๋ฌธ๊ฐ€์‹ฌ์‚ฌ ํ‰๊ฐ€ ๊ธฐ์ค€
  • CSS๋กœ input type="file" ๋ฐ”๊พธ๊ธฐ
  • IE9/Chrom table border ๋ฌธ์ œ
๋น™๊ณ ๊ตฌ๋ง›ํƒ•
๋น™๊ณ ๊ตฌ๋ง›ํƒ•
์›นํผ๋ธ”๋ฆฌ์…”๋กœ ์‹œ์ž‘ํ•ด ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋กœ ์„ฑ์žฅํ•˜๊ธฐ๊นŒ์ง€์˜ ์—ฌ์ •์„ ๋‹ด๋‹ค.
  • ๋น™๊ณ ๊ตฌ๋ง›ํƒ•
    ๐•Ž๐”ผ๐”น ๐”ธ๐•ƒ๐•ƒ ๐•ƒ๐•†๐”พ
    ๋น™๊ณ ๊ตฌ๋ง›ํƒ•
  • ์ „์ฒด
    ์˜ค๋Š˜
    ์–ด์ œ
    • ์ „์ฒด๋ณด๊ธฐ (40)
      • Before. 2021 (40)
  • ์ตœ๊ทผ ๊ธ€

  • hELLOยท Designed By์ •์ƒ์šฐ.v4.10.2
๋น™๊ณ ๊ตฌ๋ง›ํƒ•
input&label ์›น ์ ‘๊ทผ์„ฑ์— ๋งž๋Š” ์ฝ”๋”ฉ
์ƒ๋‹จ์œผ๋กœ

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”