๐ฉโ๐ค ํ๋ก ํธ์๋/html

์น ์ ๊ทผ์ฑ์ ๊ณ ๋ คํ์ฌ ์ฝํ ์ธ ์จ๊ธฐ๊ธฐ - sr-only / off-screen / a11yHidden
sr-only ์คํฌ๋ฆฐ๋ฆฌ๋์์๋ ์ฝ์ ์ ์์ง๋ง ํ๋ฉด์์๋ ๋ณด์ด์ง ์๊ฒ ํ๋ ๋ฐฉ๋ฒ์ด๋ค. ์ฃผ๋ก ๋ถํธ์คํธ๋ฉ ํด๋์ค๋ช ์ผ๋ก ์ฌ์ฉ๋๋ค. ์ ์ฌ์ฉํ ๊น? sr-only๋ screen reader-only๋ผ๋ ๋ป์ผ๋ก ์ฃผ๋ก ๋ถํธ์คํธ๋ฉ ํด๋์ค๋ช ์ผ๋ก ์ฌ์ฉ๋๋ค ๋ถํธ์คํธ๋ฉ ๊ณต์๋ฌธ์์ ๋ฐ๋ฅด๋ฉด, ์คํฌ๋ฆฐ ๋ฆฌ๋๋ ์ฐ๋ฆฌ๊ฐ ๋ชจ๋ input ์์์ label์ ํฌํจํ์ง ์๋๋ค๋ฉด ์ด๋ ค์์ ๊ฒช์ ๊ฒ์ด๋ค. ์ด๋ฌํ ์ธ๋ผ์ธ ํผ๋ค์ ์ํด ์ฐ๋ฆฌ๋ .sr-only ํด๋์ค๋ฅผ ์ฌ์ฉํจ์ผ๋ก์จ label์ ๊ฐ์ถ ์ ์๋ค. ์ฐ๋ฆฌ๋ ํญ์ ์คํฌ๋ฆฐ ๋ฆฌ๋๋ฅผ ๊ณ ๋ คํ์ฌ ์น ์ ๊ทผ์ฑ์ ์ ๊ฒฝ์จ์ผํ๊ธฐ ๋๋ฌธ์ label์ ์์ ์ง์ฐ๋ ๊ฒ๋ณด๋ค ์ด๋ฌํ ํด๋์ค๋ฅผ ์ฌ์ฉํ์ฌ label์ ๊ฐ์ถ๋ ๋ฐฉ๋ฒ์ ์ฌ์ฉํด์ผํ๋ค. ์ฆ, ์ฐ๋ฆฌ๋ ์ ๊ทผ์ฑ์ ์ํด ์คํฌ๋ฆฐ๋ฆฌ๋๊ฐ ์ฝ์ ์ ์๋๋ก ์ฝํ ์ธ ๋ฅผ ์จ๊ฒจ์ผํ๋ค ์ด๋ป..
<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..

HTML5์ ์ฝํ ์ธ ๋ชจ๋ธ(Content Models)
HTML5์ ์ฝํ ์ธ ๋ชจ๋ธ์ด๋? ์ธ๋ผ์ธ ์์, ๋ธ๋ก ์์๋ก ๊ตฌ๋ถํ๋ ํ๊ทธ๋ฅผ ๊ฐ ํ๊ทธ๋ณ๋ก ๋น์ทํ ์ฑ๊ฒฉ๋ผ๋ฆฌ ๊ทธ๋ฃนํํ ๊ฒ์ด๋ค ์ฝํ ์ธ ๋ชจ๋ธ์ ์์ ์์์ ๋ค์ด์ฌ ์ ์๋ ํ๊ทธ๊ฐ ์ ํ๋์ด์๋ค 1. Sectioning Root ๊ณ์ธต๊ตฌ์กฐ๋ก ๊ตฌ๋ถ๋์ง ์๊ณ ๋ ๋ฆฝ์ ์ธ ์ฝํ ์ธ ๋ก ๋ถ๋ฆฌ๋๋ค ๊ณ์ธต๊ตฌ์กฐ: , ์์๋ผ์ธ์ ์ํฅ์ ์ฃผ์ง ์๋๋ค , , , , , 2. Metadata ๋ฌธ์์ ์ ๋ณด๋ฅผ ๋ํ๋ด๋ ๋ฉํ๋ฐ์ดํฐ, ์คํ์ผ ์์, ์คํฌ๋ฆฝํธ ์์๋ฅผ ๋ํ๋ธ๋ค ์น ๋ธ๋ผ์ฐ์ ์ ์ง์ ์ ์ผ๋ก ํ์๋์ง ์๋๋ค ๋ฌธ์์ ๋ฌธ์๊ฐ์ ๊ด๊ณ๋ฅผ ์ค์ ํ๋ค , , , , , , 3. Flow ์ ๋ค์ด๊ฐ๋ ๋๋ถ๋ถ์ ์์๊ฐ ํด๋น๋๋ค , , , ( ์์์ ์์์ธ ๊ฒฝ์ฐ), , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,..
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(์๊ฒฉ ๋ชจ๋..