๐Ÿ“ƒ ํ”„๋ก ํŠธ์—”๋“œ ์ธํ„ฐ๋ทฐ ๋ฌธ์ œ ๋‹ตํ•ด๋ณด๊ธฐ #6 HTML์˜ data์†์„ฑ๊ณผ HTML5์˜ ๊ตฌ์„ฑ์š”์†Œ

Jake Seoยท2020๋…„ 6์›” 8์ผ
1
post-thumbnail

๐Ÿ“ƒ ํ”„๋ก ํŠธ์—”๋“œ ์ธํ„ฐ๋ทฐ ๋ฌธ์ œ ๋‹ตํ•ด๋ณด๊ธฐ #6 HTML์˜ data์†์„ฑ๊ณผ HTML5์˜ ๊ตฌ์„ฑ์š”์†Œ

Prologue

๊นƒํ—ˆ๋ธŒ๋ฅผ ๋Œ์•„๋‹ค๋‹ˆ๋‹ค๊ฐ€ ์˜ˆ์ „์— ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž ์ธํ„ฐ๋ทฐ ์งˆ๋ฌธ์ด๋ผ๋Š” ๋ ˆํฌ์ง€ํ† ๋ฆฌ๋ฅผ ๋ณธ์ ์ด ์žˆ๋‹ค. ์‚ฌ์‹ค ๊ทธ ๋‹น์‹œ์—๋Š” ๊ทธ๋ƒฅ ์Šคํƒ€๋งŒ ๋ˆŒ๋Ÿฌ๋†“๊ณ  ํฐ ๊ด€์‹ฌ์ด ์—†์—ˆ์ง€๋งŒ ์ง€๊ธˆ๋ถ€ํ„ฐ ํ•˜๋‚˜์”ฉ ํ’€์–ด๋ณด๋ ค ํ•ฉ๋‹ˆ๋‹ค.

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

๋ฌธ์ œ ์„ ์ •

๊ธฐ์กด ๋ ˆํฌ์ง€ํ† ๋ฆฌ์—๋Š” ๋ฌธ์ œ์˜ ๋ถ„๋ฅ˜๊ฐ€ ์•„๋ž˜์™€ ๊ฐ™์ด ๋˜์–ด์žˆ์Šต๋‹ˆ๋‹ค.

  1. General Questions
  2. HTML Questions
  3. CSS Questions
  4. JS Questions
  5. Accessibility Questions (external link)
  6. Testing Questions
  7. Performance Questions
  8. Network Questions
  9. Coding Questions
  10. Fun Questions

๋งค์ผ 1๊ฐ€์ง€์”ฉ ๋Œ์•„๊ฐ€๋ฉฐ ํ’€ ๊ฑด๋ฐ, General Questions ํ•ญ๋ชฉ์—์„œ ๋„ˆ๋ฌด ์ผ๋ฐ˜์ ์ธ ๋ฌธ์ œ๋Š” ํ’€์ง€ ์•Š์„ ๊ฒƒ์ด๋‹ค. ๋„ˆ๋ฌด ์ผ๋ฐ˜์ ์ธ ๋ฌธ์ œ์˜ ์ •์˜๋Š” ์‚ฌ๋žŒ๋งˆ๋‹ค ๋‹ต์ด ๋‹ค๋ฅผ ์ˆ˜ ์žˆ๋Š” ๋ฌธ์ œ์ž…๋‹ˆ๋‹ค.

์ด๋ฅผํ…Œ๋ฉด...

What did you learn yesterday/this week? (์–ด์ œ/์ด๋ฒˆ์ฃผ์— ๋ฌด์—‡์„ ๋ฐฐ์› ๋‚˜์š”)
What excites or interests you about coding? (๋ฌด์—‡์ด ๋‹น์‹ ์„ ์ฝ”๋”ฉํ•˜๊ณ  ์‹ถ๊ฒŒ ๋งŒ๋“œ๋‚˜์š”?)
What is a recent technical challenge you experienced and how did you solve it?(์ตœ๊ทผ์— ๊ฒช์€ ๊ธฐ์ˆ ์ ์ธ ์–ด๋ ค์›€๊ณผ ๊ทธ๊ฒƒ์„ ์–ด๋–ป๊ฒŒ ํ•ด๊ฒฐํ–ˆ๋Š”์ง€ ์•Œ๋ ค์ฃผ์„ธ์š”)

์ด๋Ÿฌํ•œ ๊ฒƒ๋“ค์€ ๋‹ต๋ณ€ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ด๋Ÿฐ ๋ฌธ์ œ๋Š” ๊ทธ๋•Œ๊ทธ๋•Œ ๋‹ต์ด ๋‹ฌ๋ผ์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ฐธ๊ณ 

๋‚˜์˜ ๋‹ต๋ณ€์€ ๋†’์€ ํ™•๋ฅ ๋กœ ํ‹€๋ฆด ์ˆ˜๋„ ์žˆ์œผ๋ฉฐ, ์•„๋‹ˆ๋ฉด ๋งž๊ฒŒ ๊ฐ€๋‹ค๊ฐ€ ์ค‘๊ฐ„์— ์ด์ƒํ•œ ๊ธธ๋กœ ๋น ์งˆ ์ˆ˜๋„ ์žˆ๋‹ค. ๋Œ“๊ธ€์— ์ž์‹ ๋งŒ์˜ ๋‹ต์„ ์˜ฌ๋ ค์ฃผ๋ฉด ๋งค์šฐ ๊ณ ๋งˆ์šธ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

Q: HTML์˜ data- ์†์„ฑ์€ ์–ธ์ œ ์“ฐ์ด๋‚˜์š”?

์›๋ฌธ : What are data- attributes good for?

A:

<table data-user="...">
</table>

data- ์†์„ฑ์€ DOM ์ž์ฒด์— attribute์˜ ํ˜•ํƒœ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์ €์žฅํ•  ๋•Œ ์“ฐ์ด๊ณค ํ•ฉ๋‹ˆ๋‹ค. ์ด๋ ‡๊ฒŒ DOM ์ž์ฒด์— ๋ฐ์ดํ„ฐ๋ฅผ ๋‚ด์žฅํ•˜๋Š” ๊ฒƒ์€ Ajax๋‚˜ ์„œ๋ฒ„์‚ฌ์ด๋“œ DB์ฟผ๋ฆฌ ์—†์ด ๋ฐ์ดํ„ฐ๋ฅผ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ ์šฉ์ดํ–ˆ์Šต๋‹ˆ๋‹ค.

data- ์†์„ฑ์€ HTML5 ์ŠคํŽ™์— ๊ธฐ์žฌ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. IE11+์—์„œ๋Š” ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ๊ธฐ๋Šฅ์ด ์ง€์›๋˜๋‚˜ ๊ทธ ์•„๋ž˜ ๋ฒ„์ „์—์„œ๋Š” ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ์ง€์›๋˜์ง€ ์•Š์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

data- ์†์„ฑ์€ ์›๋ž˜ ์ ์ ˆํ•œ attribute๋‚˜ ์—˜๋ฆฌ๋จผํŠธ๊ฐ€ ์—†๋Š” ํŽ˜์ด์ง€๋‚˜ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์— ์‚ฌ์šฉ์ž ์ •์˜ ๋ฐ์ดํ„ฐ๋ฅผ ๋น„๊ณต๊ฐœ๋กœ ์ €์žฅํ•˜๊ธฐ ์œ„ํ•ด์„œ ์‚ฌ์šฉ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ๋ณด์—ฌ์•ผํ•˜๊ณ  ์ ‘๊ทผ ๊ฐ€๋Šฅํ•ด์•ผ ํ•˜๋Š” ๊ฐ’์€ data-์†์„ฑ์— ์ €์žฅํ•˜์ง€ ์•Š๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.

ํ˜„๋Œ€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ๋Š” data- ์†์„ฑ ์ž์ฒด๋ฅผ ์•ˆ์“ฐ๋Š” ์ถ”์„ธ์ž…๋‹ˆ๋‹ค. ํ˜„๋Œ€์ ์ธ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ”„๋ ˆ์ž„์›Œํฌ์ธ React๋‚˜ Vue์—์„œ๋Š” JS ๋‚ด๋ถ€์— ๋ฐ์ดํ„ฐ๋ฅผ ์ €์žฅํ•˜๊ธฐ ๋งค์šฐ ์šฉ์ดํ•ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ data- ์†์„ฑ์„ ์ด์šฉํ•ด ๋ฐ์ดํ„ฐ๋ฅผ ์ €์žฅํ•˜๋Š” ๊ฒƒ์€ ์†๋„๋ฉด์—์„œ๋„ JS ๋ฐ์ดํ„ฐ ์ €์žฅ์†Œ์— ์ €์žฅํ•˜๋Š” ๊ฒƒ์— ๋น„ํ•ด ์ €์กฐํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ข‹์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์ถ”๊ฐ€๋กœ, area- ์†์„ฑ๋„ ์กด์žฌํ•˜๋Š”๋ฐ ์ด๋Š” ์›น ์ ‘๊ทผ์„ฑ์„ ์œ„ํ•ด ์กด์žฌํ•˜๋Š” ์†์„ฑ์ž…๋‹ˆ๋‹ค. aria๋Š” ์ผ๋ฐ˜์ ์œผ๋กœ HTML์„ ๋ณด์ถฉํ•ด ๋ณด์กฐ๊ธฐ์ˆ ์ด ์•Œ ์ˆ˜ ์—†๋Š” ์ƒํ˜ธ์ž‘์šฉ ๋ฐ ํ”ํžˆ ์“ฐ์ด๋Š” ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜ ์œ„์ ฏ์— ํ•„์š”ํ•œ ์ •๋ณด๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

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

Q: HTML5๋ฅผ ์—ด๋ฆฐ ์›น ํ”Œ๋žซํผ์ด๋ผ๊ณ  ํ•  ๋•Œ, HTML5๋ฅผ ๊ตฌ์„ฑํ•˜๋Š” ๋ธ”๋ก์€ ๋ฌด์—‡์ผ๊นŒ์š”?

Consider HTML5 as an open web platform. What are the building blocks of HTML5

A:

  • Device Access : ์นด๋ฉ”๋ผ, ๋™์ž‘์„ผ์„œ ๋“ฑ์˜ H/W ๊ธฐ๋Šฅ์„ ์›น์—์„œ ์ง์ ‘์ ์œผ๋กœ ์ œ์–ด
  • Connectivity(Web Socket) : ์›น(ํด๋ผ์ด์–ธํŠธ)์—์„œ ์„œ๋ฒ„ ์ธก๊ณผ ์ง์ ‘์ ์ธ ์–‘๋ฐฉํ–ฅ ํ†ต์‹  ๊ฐ€๋Šฅ
  • 3D, Graphics, Effects : ๋‹ค์–‘ํ•œ 2์ฐจ์› ๋ฐ 3์ฐจ์› ๊ทธ๋ž˜ํ”ฝ ๊ธฐ๋Šฅ์„ ์ง€์› (SVG, MathML)
  • Styling Effects(CSS3) : ๊ธ€์”จ์ฒด, ์ƒ‰์ƒ, ๋ฐฐ๊ฒฝ ๋“ฑ ๋‹ค์–‘ํ•œ ์Šคํƒ€์ผ ๋ฐ ์ดํŽ™ํŠธ ๊ธฐ๋Šฅ ์ œ๊ณต
  • Multimedia : ๋น„๋””์˜ค ๋ฐ ์˜ค๋””์˜ค ๊ธฐ๋Šฅ์„ ์ž์ฒด์ ์œผ๋กœ ์ง€์›
  • Offline & Storage : ๋„คํŠธ์›Œํฌ ๋ฏธ์ง€์› ํ™˜๊ฒฝ์—์„œ๋„ ์›น์„ ์ด์šฉ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•จ
  • Geo-Location : GPS ์—†์ด๋„ ๋‹จ๋ง๊ธฐ์˜ ์ง€๋ฆฌ์ ์ธ ์œ„์น˜ ์ •๋ณด ์ œ๊ณต
  • Semantics : ์›น ์ž๋ฃŒ์— ์˜๋ฏธ๋ฅผ ๋ถ€์—ฌํ•˜์—ฌ ์‚ฌ์šฉ์ž ์˜๋„์— ๋งž๋Š” ๋งž์ถคํ˜• ๊ฒ€์ƒ‰ ์ œ๊ณต

์ด์ „์˜ ์›น ํŒจ๋Ÿฌ๋‹ค์ž„์€ ActiveX์™€ ๊ฐ™์€ plug-in์„ ์„ค์น˜ํ•˜์—ฌ ์›น ๋ธŒ๋ผ์šฐ์ €์˜ ๊ธฐ๋Šฅ์„ ํ™•์žฅํ•˜์˜€์œผ๋‚˜, HTML5์˜ ๋“ฑ์žฅ์œผ๋กœ ๋งŽ์€ ๊ธฐ๋Šฅ๋“ค์ด ActiveX์™€ ๊ฐ™์€ ํ”Œ๋Ÿฌ๊ทธ์ธ ์—†์ด๋„ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•˜๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

๊ธฐ์กด ๋ชจ๋ฐ”์ผ ํ™˜๊ฒฝ์—์„œ๋Š” ActiveX์™€ ๊ฐ™์€ ํ”Œ๋Ÿฌ๊ทธ์ธ ์„ค์น˜๊ฐ€ ๋ถˆ๊ฐ€๋Šฅํ•˜์˜€์œผ๋‚˜ HTML5์˜ ๋“ฑ์žฅ์œผ๋กœ ๋ชจ๋ฐ”์ผ ์›น์˜ ์ ‘๊ทผ์„ฑ์ด ํฌ๊ฒŒ ๊ฐœ์„ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

์›น ํŽ˜์ด์ง€๋ฅผ ํ”„๋กœ๊ทธ๋žจ์œผ๋กœ ๊ฐ„์ฃผํ•˜๊ณ , ์ด ํ”„๋กœ๊ทธ๋žจ์ด ์‹คํ–‰๋˜๋Š” ์šด์˜์ฒด์ œ๋ฅผ ๋ธŒ๋ผ์šฐ์ €๋ผ๊ณ  ์ƒ๊ฐํ•˜๋Š” ๋ฐœ์ƒ์ด HTML5์˜ ํ•ต์‹ฌ์ž…๋‹ˆ๋‹ค.

HTML5์˜ ์‹œ๋ฉ˜ํ‹ฑ ์—˜๋ฆฌ๋จผํŠธ๋“ค

๋ ˆํผ๋Ÿฐ์Šค

https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/%EB%8D%B0%EC%9D%B4%ED%84%B0_%EC%86%8D%EC%84%B1_%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0
https://www.w3schools.com/tags/att_global_data.asp
https://webclub.tistory.com/491
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5

profile
ํ’€์Šคํƒ ์›น๊ฐœ๋ฐœ์ž๋กœ ์ผํ•˜๊ณ  ์žˆ๋Š” Jake Seo์ž…๋‹ˆ๋‹ค. ์ฃผ๋กœ Jake Seo๋ผ๋Š” ๋‹‰๋„ค์ž„์„ ๋งŽ์ด ์”๋‹ˆ๋‹ค. ํ”„๋ก ํŠธ์—”๋“œ: Javascript, React ๋ฐฑ์—”๋“œ: Spring Framework์— ๊ด€์‹ฌ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

0๊ฐœ์˜ ๋Œ“๊ธ€