๐Ÿ‘ฉ‍๐ŸŽค ํ”„๋ก ํŠธ์—”๋“œ/html

    ๐Ÿ‘ฉ‍๐ŸŽค ํ”„๋ก ํŠธ์—”๋“œ/html

    ์›น ์ ‘๊ทผ์„ฑ์„ ๊ณ ๋ คํ•˜์—ฌ ์ฝ˜ํ…์ธ  ์ˆจ๊ธฐ๊ธฐ - sr-only / off-screen / a11yHidden

    sr-only ์Šคํฌ๋ฆฐ๋ฆฌ๋”์—์„œ๋Š” ์ฝ์„ ์ˆ˜ ์žˆ์ง€๋งŒ ํ™”๋ฉด์—์„œ๋Š” ๋ณด์ด์ง€ ์•Š๊ฒŒ ํ•˜๋Š” ๋ฐฉ๋ฒ•์ด๋‹ค. ์ฃผ๋กœ ๋ถ€ํŠธ์ŠคํŠธ๋žฉ ํด๋ž˜์Šค๋ช…์œผ๋กœ ์‚ฌ์šฉ๋œ๋‹ค. ์™œ ์‚ฌ์šฉํ• ๊นŒ? sr-only๋Š” screen reader-only๋ผ๋Š” ๋œป์œผ๋กœ ์ฃผ๋กœ ๋ถ€ํŠธ์ŠคํŠธ๋žฉ ํด๋ž˜์Šค๋ช…์œผ๋กœ ์‚ฌ์šฉ๋œ๋‹ค ๋ถ€ํŠธ์ŠคํŠธ๋žฉ ๊ณต์‹๋ฌธ์„œ์— ๋”ฐ๋ฅด๋ฉด, ์Šคํฌ๋ฆฐ ๋ฆฌ๋”๋Š” ์šฐ๋ฆฌ๊ฐ€ ๋ชจ๋“  input ์š”์†Œ์— label์„ ํฌํ•จํ•˜์ง€ ์•Š๋Š”๋‹ค๋ฉด ์–ด๋ ค์›€์„ ๊ฒช์„ ๊ฒƒ์ด๋‹ค. ์ด๋Ÿฌํ•œ ์ธ๋ผ์ธ ํผ๋“ค์„ ์œ„ํ•ด ์šฐ๋ฆฌ๋Š” .sr-only ํด๋ž˜์Šค๋ฅผ ์‚ฌ์šฉํ•จ์œผ๋กœ์จ label์„ ๊ฐ์ถœ ์ˆ˜ ์žˆ๋‹ค. ์šฐ๋ฆฌ๋Š” ํ•ญ์ƒ ์Šคํฌ๋ฆฐ ๋ฆฌ๋”๋ฅผ ๊ณ ๋ คํ•˜์—ฌ ์›น ์ ‘๊ทผ์„ฑ์„ ์‹ ๊ฒฝ์จ์•ผํ•˜๊ธฐ ๋•Œ๋ฌธ์— label์„ ์•„์˜ˆ ์ง€์šฐ๋Š” ๊ฒƒ๋ณด๋‹ค ์ด๋Ÿฌํ•œ ํด๋ž˜์Šค๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ label์„ ๊ฐ์ถ”๋Š” ๋ฐฉ๋ฒ•์„ ์‚ฌ์šฉํ•ด์•ผํ•œ๋‹ค. ์ฆ‰, ์šฐ๋ฆฌ๋Š” ์ ‘๊ทผ์„ฑ์„ ์œ„ํ•ด ์Šคํฌ๋ฆฐ๋ฆฌ๋”๊ฐ€ ์ฝ์„ ์ˆ˜ ์žˆ๋„๋ก ์ฝ˜ํ…์ธ ๋ฅผ ์ˆจ๊ฒจ์•ผํ•œ๋‹ค ์–ด๋–ป..

    ๐Ÿ‘ฉ‍๐ŸŽค ํ”„๋ก ํŠธ์—”๋“œ/html

    <main> / <section> vs <article>

    ์ฃผ์š” ์ปจํ…์ธ ๋ฅผ ๋‚˜ํƒ€๋‚ธ๋‹ค ๐Ÿ‘†์ฃผ์˜ mainํƒœ๊ทธ๋Š” ๋ง ๊ทธ๋Œ€๋กœ ์ค‘์‹ฌ์ด ๋˜๋Š” ๋‚ด์šฉ์„ ์˜๋ฏธํ•˜๊ธฐ ๋•Œ๋ฌธ์— ํ•œ ๋ฒˆ๋งŒ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์„ ํ—ˆ์šฉํ•œ๋‹ค ์„ ์—ฌ๋Ÿฌ๊ฐœ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ, DOM์—๋Š” main์ด ํ•˜๋‚˜์—ฌ์•ผํ•œ๋‹ค ๋‚˜๋จธ์ง€๋Š” hidden ์†์„ฑ์„ ์‚ฌ์šฉํ•ด์•ผํ•œ๋‹ค ๊ตฌ์กฐ์ ์œผ๋กœ ์˜ณ์€ main ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•ด์•ผํ•œ๋‹ค โœŒ๏ธ๊ตฌ์กฐ์ ์œผ๋กœ ์˜ณ์€ main ์š”์†Œ๋ž€? ์กฐ์ƒ ์š”์†Œ๊ฐ€ html, body, div, ์ ‘๊ทผ๊ฐ€๋Šฅํ•œ ์ด๋ฆ„์ด ์—†๋Š” form, autonomous custom ์š”์†Œ์œผ๋กœ ์ œํ•œ๋œ๋‹ค. ๋”๋ณด๊ธฐ A hierarchically correct main element is one whose ancestor elements are limited to html, body, div, form without an accessible name, and autonomous c..

    ๐Ÿ‘ฉ‍๐ŸŽค ํ”„๋ก ํŠธ์—”๋“œ/html

    HTML5์˜ ์ฝ˜ํ…์ธ  ๋ชจ๋ธ(Content Models)

    HTML5์˜ ์ฝ˜ํ…์ธ  ๋ชจ๋ธ์ด๋ž€? ์ธ๋ผ์ธ ์š”์†Œ, ๋ธ”๋ก ์š”์†Œ๋กœ ๊ตฌ๋ถ„ํ–ˆ๋˜ ํƒœ๊ทธ๋ฅผ ๊ฐ ํƒœ๊ทธ๋ณ„๋กœ ๋น„์Šทํ•œ ์„ฑ๊ฒฉ๋ผ๋ฆฌ ๊ทธ๋ฃนํ™”ํ•œ ๊ฒƒ์ด๋‹ค ์ฝ˜ํ…์ธ  ๋ชจ๋ธ์€ ์ž์‹ ์š”์†Œ์— ๋“ค์–ด์˜ฌ ์ˆ˜ ์žˆ๋Š” ํƒœ๊ทธ๊ฐ€ ์ œํ•œ๋˜์–ด์žˆ๋‹ค 1. Sectioning Root ๊ณ„์ธต๊ตฌ์กฐ๋กœ ๊ตฌ๋ถ„๋˜์ง€ ์•Š๊ณ  ๋…๋ฆฝ์ ์ธ ์ฝ˜ํ…์ธ ๋กœ ๋ถ„๋ฆฌ๋œ๋‹ค ๊ณ„์ธต๊ตฌ์กฐ: , ์•„์›ƒ๋ผ์ธ์— ์˜ํ–ฅ์„ ์ฃผ์ง€ ์•Š๋Š”๋‹ค , , , , , 2. Metadata ๋ฌธ์„œ์˜ ์ •๋ณด๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ, ์Šคํƒ€์ผ ์š”์†Œ, ์Šคํฌ๋ฆฝํŠธ ์š”์†Œ๋ฅผ ๋‚˜ํƒ€๋‚ธ๋‹ค ์›น ๋ธŒ๋ผ์šฐ์ €์— ์ง์ ‘์ ์œผ๋กœ ํ‘œ์‹œ๋˜์ง€ ์•Š๋Š”๋‹ค ๋ฌธ์„œ์™€ ๋ฌธ์„œ๊ฐ„์˜ ๊ด€๊ณ„๋ฅผ ์„ค์ •ํ•œ๋‹ค , , , , , , 3. Flow ์— ๋“ค์–ด๊ฐ€๋Š” ๋Œ€๋ถ€๋ถ„์— ์š”์†Œ๊ฐ€ ํ•ด๋‹น๋œ๋‹ค , , , ( ์š”์†Œ์˜ ์ž์†์ธ ๊ฒฝ์šฐ), , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,..

    ๐Ÿ‘ฉ‍๐ŸŽค ํ”„๋ก ํŠธ์—”๋“œ/html

    HTML ๊ธฐ๋ณธ ํ‹€์— ๋Œ€ํ•ด ์•Œ์•„๋ณด์ž - <!DOCTYPE> / <head> / <meta> / <title>

    vscode์—์„œ ! + tab ๋ˆ„๋ฅด๋ฉด ๋‚˜์˜ค๋Š” "๊ทธ ์ฝ”๋“œ" ์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด์ž ๋ฐ”๋กœ ์ด ์ฝ”๋“œ์ด๋‹ค ํ•ญ์ƒ ! + tab ๋ˆŒ๋Ÿฌ์„œ ์ž๋™์™„์„ฑ์œผ๋กœ ๋งŒ๋“ค์–ด์ง€๋Š” ์ฝ”๋“œ๋ผ ๋œฏ์–ด๋ณผ ์ƒ๊ฐ๋„ ์•ˆํ•˜๊ณ  ๊ทธ๋ ‡๊ตฐ .. ํ•˜๊ณ  ์žˆ์—ˆ๋Š”๋ฐ ์˜ค๋Š˜์€ ์ฝ”๋“œ๋ฅผ ํ•œ ์ค„์”ฉ ๋œฏ์–ด๋ณผ ์˜ˆ์ •์ด๋‹ค ๋ชจ๋“  HTML ๋ฌธ์„œ๋Š” ์œผ๋กœ ์‹œ์ž‘ํ•ด์•ผํ•œ๋‹ค ์€ html ํƒœ๊ทธ๋Š” ์•„๋‹ˆ์ง€๋งŒ ๋ธŒ๋ผ์šฐ์ €์—๊ฒŒ ๋ฌธ์„œ ์ข…๋ฅ˜๋ฅผ ์•Œ๋ ค์ฃผ๋Š” ์ •๋ณด๋กœ DTD(Document Type Definition)์ด๋‹ค HTML5 HTML5์—์„œ๋Š” ์šฐ๋ฆฌ๊ฐ€ ์ž์ฃผ ๋ณด๋Š” ๋งŒ ์ž‘์„ฑํ•ด์ฃผ๋ฉด ๋œ๋‹ค HTML 4.01 https://docs.emmet.io/cheat-sheet/ ์—์„œ html๋ฅผ ์ฐพ์•„๋ณด๋ฉด ์˜ˆ์ „ HTML์—์„œ๋Š” ์–ด๋–ป๊ฒŒ ์„ ์–ธํ•˜๋Š”์ง€ ์ž์„ธํžˆ ๋ณผ ์ˆ˜ ์žˆ๋‹ค HTML 4.01 DTD์—๋Š” 3๊ฐ€์ง€ ๋ชจ๋“œ๊ฐ€ ์žˆ๋‹ค Strict mode(์—„๊ฒฉ ๋ชจ๋“œ..

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