์›น ํ‘œ์ค€์„ฑ(Web Standards)

2020. 9. 17. 03:40ยท๐Ÿ‘ฉ๐Ÿป‍๐Ÿ’ปSTUDY/Publishing

์›น ํ‘œ์ค€์„ฑ(Web Standards)

์›น ํ‘œ์ค€์ด๋ž€?

์‚ฌ์šฉ์ž๊ฐ€ ์–ด๋–ค ๋ธŒ๋ผ์šฐ์ €๋‚˜ ๊ธฐ๊ธฐ๋ฅผ ์‚ฌ์šฉํ•ด๋„ ๋‚ด์šฉ์„ ๋™์ผํ•˜๊ฒŒ ๋ณผ ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋Š” ๊ฒƒ.

ํ‘œ์ค€ํ™” ๋‹จ์ฒด์ธ W3C๊ฐ€ ๊ถŒ๊ณ ํ•œ ํ‘œ์ค€์•ˆ์— ๋”ฐ๋ผ ์›น์„ ์ž‘์„ฑํ•  ๋•Œ ์ด์šฉํ•˜๋Š” HTML, CSS, JavaScript ๋“ฑ์— ๋Œ€ํ•œ ๊ทœ์ •์ด ๋‹ด๊ฒจ ์žˆ๋‹ค.

์›น ํ‘œ์ค€ ์ค€์ˆ˜๋Š” ์›น ์ ‘๊ทผ์„ฑ ์ค€์ˆ˜๋ฅผ ์œ„ํ•œ ํ•ต์‹ฌ์ด๋‹ค.

์ฆ‰, ์›น ์ ‘๊ทผ์„ฑ์ด ๋” ํฐ ๊ฐœ๋…์ด๋ฉฐ. ์›น ํ‘œ์ค€์€ ์›น ์ ‘๊ทผ์„ฑ์„ ๊ตฌํ˜„ํ•˜๊ธฐ ์œ„ํ•œ ๋ถ€๋ถ„์  ์š”์†Œ๋‹ค.

 

์›น ํ‘œ์ค€ ๊ด€๋ จ ๊ธฐ์ˆ ์˜ ์†Œ๊ฐœ

  1. ๊ตฌ์กฐ (X)HTML
  2. ํ‘œํ˜„ CSS
  3. ๋™์ž‘ 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๋ฅผ ์ด์šฉํ•˜์—ฌ ์›น ํŽ˜์ด์ง€์˜ ์š”์†Œ์˜ ๋™์ž‘์„ ์ œ์–ดํ•˜๋Š” ๋ฐฉ๋ฒ•์œผ๋กœ ์ž‘์„ฑํ•œ ๊ฒƒ์ด๋‹ค.

 

์›น ํ‘œ์ค€์˜ ์žฅ์ 

  1. ์›น ์ ‘๊ทผ์„ฑ ์ˆ˜์ค€์˜ ํ–ฅ์ƒ

    ์›น ํ‘œ์ค€์„ ์ค€์ˆ˜ํ•˜๋Š” ๊ฒƒ๋งŒ์œผ๋กœ๋„ ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ์›น ์ ‘๊ทผ์„ฑ์ด ํ–ฅ์ƒ๋œ๋‹ค. ์›น ํ‘œ์ค€์„ ์ค€์ˆ˜ํ•œ ์›น ์‚ฌ์ดํŠธ๋Š” ๋‹ค์–‘ํ•œ ์›น ๋ธŒ๋ผ์šฐ์ €๋‚˜ ์ƒˆ๋กœ์šด ๊ธฐ๊ธฐ์—์„œ๋„ ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ํ‘œ์‹œ๋˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

  2. ๊ฒ€์ƒ‰ ์นœํ™”์ ์ธ ์›น ์‚ฌ์ดํŠธ ๊ตฌํ˜„

    meta ์š”์†Œ๋ฅผ ์ด์šฉํ•œ ์ •ํ™•ํ•œ ๋ฌธ์„œ ์ •๋ณด์˜ ์ œ๊ณต๊ณผ ์ ์ ˆํ•œ ์ œ๋ชฉ(heading ์š”์†Œ)์˜ ์‚ฌ์šฉ, ์˜๋ฏธ์— ๋งž๋Š” ๋งˆํฌ์—…์€ ๊ฒ€์ƒ‰ ์‹œ ํฐ ์˜ํ–ฅ์„ ๋ฏธ์นœ๋‹ค. ๋”ฐ๋กœ ํ™๋ณด๋ฅผ ์œ„ํ•œ ๋น„์šฉ์„ ์ง€์ถœํ•˜์ง€ ์•Š๋”๋ผ๋„ ์ถฉ์‹คํ•˜๊ฒŒ ์ž‘์„ฑ๋œ ๋ฌธ์„œ ์ •๋ณด๋งŒ์œผ๋กœ๋„ ๊ฒ€์ƒ‰์˜ ํšจ์œจ์„ฑ์„ ๋†’์ผ ์ˆ˜ ์žˆ๋‹ค.

  3. ๊ตฌ์กฐ์™€ ํ‘œํ˜„์˜ ๋ถ„๋ฆฌ

    ๊ตฌ์กฐ์™€ ํ‘œํ˜„์ด ๋’ค์„ž์—ฌ ์ ‘๊ทผ ๋ฐ ์‚ฌ์šฉ์ด ์–ด๋ ค์› ๋˜ ๊ณผ๊ฑฐ์— ๋น„ํ•ด, ํ˜„์žฌ HTML์ด๋‚˜ XHTML ๋“ฑ์˜ ๋งˆํฌ์—… ์–ธ์–ด๋ฅผ ๊ตฌ์ถ•ํ•˜๊ณ  CSS๋ฅผ ์ด์šฉํ•จ์œผ๋กœ์จ ๊ตฌ์กฐ์™€ ํ‘œํ˜„์ด ๋ถ„๋ฆฌ๋œ ๋…๋ฆฝ์ ์ธ ๊ตฌํ˜„์ด ๊ฐ€๋Šฅํ•˜๋„๋ก ๋„์™€์ค€๋‹ค.

  4. ์†์‰ฌ์šด ์œ ์ง€ ๋ณด์ˆ˜ ๋ฐ ๋น„์šฉ ์ ˆ๊ฐ ํšจ๊ณผ

    ๊ตฌ์กฐ์•„ ํ‘œํ˜„์„ ๋ถ„๋ฆฌํ•˜๋ฉด ์œ ์ง€ ๋ณด์ˆ˜์— ํŽธ๋ฆฌํ•˜๊ณ  ์†Œ์Šค์˜ ๊ฒฝ๋Ÿ‰ํ™”๋กœ ์ธํ•ด ์„œ๋ฒ„์˜ ํŠธ๋ž˜ํ”ฝ ๋น„์šฉ์ด ๊ฐ์†Œํ•˜์—ฌ ๋ถ€์ˆ˜์ ์ธ ํšจ๊ณผ๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ๋‹ค.

  5. ํ˜ธํ™˜์„ฑ ํ™•๋ณด

    ์˜ฌ๋ฐ”๋ฅธ ๋งˆํฌ์—…๊ณผ CSS๋ฅผ ์ด์šฉํ•ด ์›น์„ ์ œ์ž‘ํ•˜๋ฉด ํ•˜์œ„ ํ˜ธํ™˜์„ฑ์ด๋‚˜ ์ƒ์œ„ ํ˜ธํ™˜์„ฑ์— ์ฝ˜ํ…์ธ ๊ฐ€ ์ ์ ˆํ•˜๊ฒŒ ํ‘œ์‹œ๋œ๋‹ค.

     

2020/09/17 - [๐Ÿ‘ฉ๐Ÿป‍๐Ÿ’ปDEVELOPE/Publishing] - ์›น์ ‘๊ทผ์„ฑ(Web Accessibility)

์ €์ž‘์žํ‘œ์‹œ ๋น„์˜๋ฆฌ ๋™์ผ์กฐ๊ฑด (์ƒˆ์ฐฝ์—ด๋ฆผ)
'๐Ÿ‘ฉ๐Ÿป‍๐Ÿ’ปSTUDY/Publishing' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
  • NHN ์ฝ”๋”ฉ์ปจ๋ฒค์…˜ pdf ์ž๋ฃŒ
  • Google HTML/CSS Style Guide
  • ์›น์ ‘๊ทผ์„ฑ์„ ์œ„ํ•œ ํ…์ŠคํŠธ ์ˆจ๊น€ ์ฒ˜๋ฆฌ(blind text)
  • ์›น์ ‘๊ทผ์„ฑ(Web Accessibility)
jmjm
jmjm
  • jmjm
    /* jmjmjm */
    jmjm
  • ์ „์ฒด
    ์˜ค๋Š˜
    ์–ด์ œ
    • ๋ถ„๋ฅ˜ ์ „์ฒด๋ณด๊ธฐ (129)
      • ๐Ÿ‘ฉ๐Ÿป‍๐Ÿ’ปSTUDY (91)
        • HTML (9)
        • CSS (25)
        • SASS (4)
        • JavaScript (17)
        • jQuery (9)
        • Publishing (8)
        • Git (11)
        • React (6)
        • Vue (0)
        • ์›น์ ‘๊ทผ์„ฑ (1)
        • Gulp (1)
      • ๐ŸฃcodeLab (27)
      • ๐ŸŒˆetc (8)
      • ๐Ÿฅฐ ์ผ์ƒ (2)
      • ๐ŸŒŸ์ฝ์–ด๋ณด๊ธฐ (1)
  • ๋ธ”๋กœ๊ทธ ๋ฉ”๋‰ด

    • ํ™ˆ
    • ํƒœ๊ทธ
  • ๋งํฌ

  • ๊ณต์ง€์‚ฌํ•ญ

  • ์ธ๊ธฐ ๊ธ€

  • ํƒœ๊ทธ

    javascript nodelist
    javascript htmlcollection
    ์ ‘๊ทผ์„ฑ ์ฃผ์˜์‚ฌํ•ญ
    ์•„์ฝ”๋””์–ธ๋ฉ”๋‰ด
    ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ตฌ์กฐ๋ถ„ํ•ดํ• ๋‹น
    ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ‘œํ˜„์‹ ๋ฌธ
    ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ‘œํ˜„์‹๋ฌธ
    ํ˜•์ œ์ธ์ ‘์ž display none
    css ๊ฐ€์ƒ์„ ํƒ์ž
    sticky codepen
    ํ˜•์ œ์ธ์ ‘์ž
    ์›น์ ‘๊ทผ์„ฑ
    ํ˜•์ œ์ธ์ ‘์ž ์•ˆ๋˜๋Š” ์ด์œ 
    vscode ๋‹จ์ถ•ํ‚ค
    sass compiler
    sass
    HTML Form
    ๊ตฌ์กฐ๋ถ„ํ•ดํ• ๋‹น ์ข…๋ฅ˜
    javascript ๊ตฌ์กฐ๋ถ„ํ•ดํ• ๋‹น
    CSS ์„ ํƒ์ž
    ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ slideup
    css flex
    sticky jsfiddle
    ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ปฌ๋ ‰์…˜
    react import export
    css ํ˜•์ œ์ธ์ ‘์ž ์•ˆ๋ผ์š”
    html collection
    javascript htmlcollection nodelist
    javascript ์ปฌ๋ ‰์…˜
    sticky ํ™œ์šฉ
  • ์ตœ๊ทผ ๋Œ“๊ธ€

  • ์ตœ๊ทผ ๊ธ€

  • hELLOยท Designed By์ •์ƒ์šฐ.v4.10.3
jmjm
์›น ํ‘œ์ค€์„ฑ(Web Standards)
์ƒ๋‹จ์œผ๋กœ

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