์ฑ„๋„ํ†ก ์•„์ด์ฝ˜

[2024]๋ฆฌ๋ฒ ํ•˜์–€์˜ HTML ๊ธฐ์ดˆ ์‹ค๋ฌด

HTML ๊ธฐ์ดˆ๋ฌธ๋ฒ•์„ ๋‹ค๋ฃจ๋Š” ๊ฐ•์˜์ž…๋‹ˆ๋‹ค. ๋‹ค์–‘ํ•œ ์‚ฌ๋ก€์˜ ๋ฏธ์…˜์ด ์กด์žฌํ•˜๋ฉฐ, ์‹ค๋ฌด์—์„œ ์‚ฌ์šฉ๊ฐ€๋Šฅํ•œ ์ตœ์‹ ๋ฌธ๋ฒ•๊นŒ์ง€ ์•Œ๋ ค๋“œ๋ฆฝ๋‹ˆ๋‹ค.

5๋ช… ์ด ์ˆ˜๊ฐ•ํ•˜๊ณ  ์žˆ์–ด์š”.

Thumbnail

์ž…๋ฌธ์ž๋ฅผ ์œ„ํ•ด ์ค€๋น„ํ•œ
[์›น ๊ฐœ๋ฐœ, HTML/CSS] ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๊ฑธ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์–ด์š”

  • HTML

  • ์›น์ ‘๊ทผ์„ฑ

  • NVDA

  • ์›นํ‘œ์ค€

๋ฆฌ๋ฒ ํ•˜์–€์˜ HTML ๊ธฐ์ดˆ ์‹ค๋ฌด - 2024

ํ•ด๋‹น ๊ฐ•์˜๋Š” HTML ๊ธฐ๋ณธ ๋ฌธ๋ฒ•์„ ๋‹ค๋ฃจ๋ฉฐ, ๊ฐ„๋‹จํ•œ ์˜ˆ์ œ๋ฅผ ํ†ตํ•ด ์‘์šฉ์„ ํ•ด๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
๋ฌด์—‡๋ณด๋‹ค ์ค‘์š”ํ•œ๊ฑด ์ฃผ์–ด์ง„ ๋””์ž์ธ ์ƒ˜ํ”Œ๋กœ ์ฝ˜ํ…์ธ  ์˜๋ฏธ์— ๋งž๊ฒŒ ํ‘œํ˜„ํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.
ํ‘œ์ค€๋ฌธ๋ฒ•์„ ์ค€์ˆ˜ํ•˜์—ฌ ์ ‘๊ทผ์„ฑ, ์‚ฌ์šฉ์„ฑ์„ ํ–ฅ์ƒ์‹œ์ผœ ์ฃผ์„ธ์š”.

๐Ÿ’ก ํ•ด๋‹น ๊ณผ์ •์€ ์ผํšŒ์„ฑ ํŒ๋งค๋ฅผ ๋ชฉ์ ์œผ๋กœ ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

  • ๊ฐ•์˜์˜์ƒ์€ ๋ชจ๋“ˆ๋กœ ๊ตฌ์„ฑ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. HTML ์ถ”๊ฐ€ ์ŠคํŽ™์ด ์žˆ์„๋•Œ๋งˆ๋‹ค ์˜์ƒ์ด ์ถ”๊ฐ€๋ฉ๋‹ˆ๋‹ค.

  • ๋”ฐ๋ผ์น˜๋Š”๊ฑด ๋ฌด์˜๋ฏธ ํ•ฉ๋‹ˆ๋‹ค. ์ œ๊ฐ€ ์•Œ๋ ค๋“œ๋ฆฐ ๊ฐœ๋…์„ ๊ฐ€์ง€๊ณ  ์‘์šฉ์ œ์ž‘ํ•ด๋ณด์„ธ์š”.

์ด๋Ÿฐ ๋‚ด์šฉ์„ ๋ฐฐ์›Œ์š”

1โƒฃ HTML

์ฝ๋Š”๋ฒ•๋ถ€ํ„ฐ ๊นŠ์ด์žˆ๋Š” ์‹ค๋ฌด ์ด์•ผ๊ธฐ๊นŒ์ง€ ๋‹ค์–‘ํ•˜๊ฒŒ HTML์„ ์†Œ๊ฐœํ•ด ๋“œ๋ฆฝ๋‹ˆ๋‹ค. HTML ์ตœ์‹  ์ŠคํŽ™์€ ๋ฌผ๋ก  ์ถ”๊ฐ€๋œ ์†์„ฑ(Attribute)๊นŒ์ง€ ์•ˆ๋‚ดํ•ด๋“œ๋ฆฝ๋‹ˆ๋‹ค.

HTML5

2โƒฃ NVDA

HTML ํ‘œ์ค€๋ฌธ๋ฒ•์„ ์ค€์ˆ˜ํ•˜๋Š”๊ฒƒ๋งŒ์œผ๋กœ ์‚ฌ์šฉ์„ฑ๊ณผ ์ ‘๊ทผ์„ฑ์ด ์ƒ๋‹นํžˆ ํ–ฅ์ƒ๋ฉ๋‹ˆ๋‹ค. ํ•ด๋‹น ๊ณผ์ •์—์„œ๋Š” ์ค‘์š”ํ•œ ์š”์†Œ๋งˆ๋‹ค NVDA๋กœ ๋“ค์–ด๋ณด๊ฒŒ ๋จ์œผ๋กœ์จ ์ผ๋ฐ˜์ธ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ์žฅ์• ์ธ๋“ค์€ ์–ด๋–ป๊ฒŒ ๋Š๋ผ๋Š”์ง€ ๊ฐ„์ ‘์ฒดํ—˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์›น์ ‘๊ทผ์„ฑ

3โƒฃ 30๊ฐ€์ง€ ์ด์ƒ์˜ ์‹ค๋ฌด ๋ฏธ์…˜

ํ•ด๋‹น ๊ณผ์ •์˜ ์ฃผ๋œ ๋ชฉ์ ์€ ์‹ค๋ฌด ์‘์šฉ์ž…๋‹ˆ๋‹ค. ๊ธฐ์ดˆ ๋ฌธ๋ฒ•์„ ํ•™์Šตํ•˜์‹  ๋’ค ๊ณต์œ ๋ฐ›์€ ํ”ผ๊ทธ๋งˆ ์ƒ˜ํ”Œ์„ ๊ฐ€์ง€๊ณ  ๋ฏธ์…˜์„ ์ˆ˜ํ–‰ํ•ด๋ณด์„ธ์š”. ์ €์™€ ํ•จ๊ป˜ ๊ณ ๋ฏผํ•˜๋ฉด์„œ ํ•ด๊ฒฐํ•ด ๋‚˜์•„๊ฐ„๋‹ค๋ฉด ๋งŽ์€ ์ž์‹ ๊ฐ์„ ์–ป์œผ์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Figma ์‹ค๋ฌด ๋ฏธ์…˜

์ˆ˜๊ฐ• ์ „ ์ฐธ๊ณ  ์‚ฌํ•ญ

์‹ค์Šต ํ™˜๊ฒฝ

  • ๋ชจ๋“  OS๊ฐ€ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

  • ์‚ฌ์šฉ ๋„๊ตฌ: VSCode (์—๋””ํ„ฐ๋Š” ํŽธํ•˜์‹ ๊ฒƒ ์‚ฌ์šฉํ•˜์„ธ์š”)

  • PC ์‚ฌ์–‘: ์ธํ„ฐ๋„ท ์ ‘์†์ด ๊ฐ€๋Šฅํ•œ ๊ธฐ๋ณธ ์‚ฌ์–‘์˜ PC

ํ•™์Šต ์ž๋ฃŒ

  • ๋…ธ์…˜ ๊ณต์œ  : ํšŒ์›๊ฐ€์ž…ํ›„ ๊ณต์œ ์‹ ์ฒญํ•˜์„ธ์š”.

  • ํ”ผ๊ทธ๋งˆ : ๋ฏธ์…˜ ์ˆ˜ํ–‰์„ ์œ„ํ•ด ํšŒ์›๊ฐ€์ž…ํ›„ ๊ณต์œ ์‹ ์ฒญํ•˜์„ธ์š”.

์„ ์ˆ˜ ์ง€์‹ ๋ฐ ์œ ์˜์‚ฌํ•ญ

  • ์„ ์ˆ˜ ์ง€์‹์€ ํ•„์š”ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

  • ์˜๋ฌธํƒ€์ž๊ฐ€ ๋Š๋ฆฌ์‹œ๋ฉด ํ•™์Šต์— ๋ถˆํŽธํ•  ์ˆ˜ ์žˆ์œผ๋‹ˆ ์˜ํƒ€์—ฐ์Šต๊พธ์ค€ํžˆ ํ•ด์ฃผ์„ธ์š”.

  • ๋ณธ ๊ฐ•์˜์˜ ์ €์ž‘๊ถŒ์€ ๋ฆฌ๋ฒ ํ•˜์–€์— ์žˆ์œผ๋ฉฐ, ๋ฌด๋‹จ ๋ฐฐํฌ ๋ฐ ๋ณต์ œ๋ฅผ ๊ธˆ์ง€ํ•ฉ๋‹ˆ๋‹ค. ํ•™์Šต ์ž๋ฃŒ ์—ญ์‹œ ์ €์ž‘๊ถŒ์ด ์žˆ์œผ๋ฉฐ, ๊ฐœ์ธ์ ์ธ ํ•™์Šต ๋ชฉ์  ์™ธ ์‚ฌ์šฉ์„ ๊ธˆํ•ฉ๋‹ˆ๋‹ค.

์ˆ˜๊ฐ•ํ›„๊ธฐ


์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜
์ถ”์ฒœ๋“œ๋ ค์š”!

ํ•™์Šต ๋Œ€์ƒ์€
๋ˆ„๊ตฌ์ผ๊นŒ์š”?

  • ์ฝ”๋”ฉ์„ ์ฒ˜์Œ ํ•˜๋Š” ์‚ฌ๋žŒ

  • ๋ชจ๋“  ๊ฐœ๋ฐœ์ž

  • ์›นํผ๋ธ”๋ฆฌ์…”

  • uiux๋””์ž์ด๋„ˆ

์„ ์ˆ˜ ์ง€์‹,
ํ•„์š”ํ• ๊นŒ์š”?

  • ์„ ์ˆ˜์ง€์‹์ด ํ•„์š”์—†๋Š” ๊ณผ์ •์ž…๋‹ˆ๋‹ค.

์•ˆ๋…•ํ•˜์„ธ์š”
๋ฆฌ๋ฒ ํ•˜์–€์ž…๋‹ˆ๋‹ค.

4,666

๋ช…

์ˆ˜๊ฐ•์ƒ

97

๊ฐœ

์ˆ˜๊ฐ•ํ‰

13

๊ฐœ

๋‹ต๋ณ€

4.6

์ 

๊ฐ•์˜ ํ‰์ 

3

๊ฐœ

๊ฐ•์˜

2000๋…„๋ถ€ํ„ฐ ์›นํผ๋ธ”๋ฆฌ์…”
2008๋…„๋ถ€ํ„ฐ ์›นํผ๋ธ”๋ฆฌ์…” ์œก์„ฑ ๊ฐ•์‚ฌ
2016๋…„๋ถ€ํ„ฐ ๋ฆฌ๋ฒ ํ•˜์–€ ์œ ํŠœ๋ฒ„ ํ™œ๋™

์˜ค๋žœ๊ธฐ๊ฐ„๋ถ€ํ„ฐ ์›นํผ๋ธ”๋ฆฌ์…” ์‹ค๋ฌด์ž๋กœ ํ™œ๋™ํ•ด์˜จ ๋ชจ๋“  ๋…ธํ•˜์šฐ๋ฅผ ์•Œ๋ ค๋“œ๋ฆฌ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

์ปค๋ฆฌํ˜๋Ÿผ

์ „์ฒด

32๊ฐœ โˆ™ (4์‹œ๊ฐ„ 40๋ถ„)

๊ฐ•์˜ ๊ฒŒ์‹œ์ผ: 
๋งˆ์ง€๋ง‰ ์—…๋ฐ์ดํŠธ์ผ: 

์ˆ˜๊ฐ•ํ‰

์•„์ง ์ถฉ๋ถ„ํ•œ ํ‰๊ฐ€๋ฅผ ๋ฐ›์ง€ ๋ชปํ•œ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.
๋ชจ๋‘์—๊ฒŒ ๋„์›€์ด ๋˜๋Š” ์ˆ˜๊ฐ•ํ‰์˜ ์ฃผ์ธ๊ณต์ด ๋˜์–ด์ฃผ์„ธ์š”!