1. Settings
1-1. Shadow DOM ๋ณด๊ธฐ
ํฌ๋กฌ > ๊ฐ๋ฐ์ ๋๊ตฌ > ์ค์ > Preferences > Elements > Show user agent shadow DOM ์ผ๊ธฐ
์๋ ์์ฑ ๋์ด ์์ง๋ง ์๋ณด์ด๋ Shadow DOM ์ฝ๋๋ฅผ ๋ณผ ์ ์๋ค.
Shadow DOM ์ด๋? HTML์์ ์บก์ํ๊ฐ ํ์ํ ์์์ ์บก์ํ๋ฅผ ์ ์ฉํ ์ ์๊ฒ ํ๋ค.
- ์บก์ํ : ๋ฐ์์๋ ์ฝ๋๊ฐ ๋ณด์ด์ง ์๋๋ก ์์ชฝ์ผ๋ก ๋ฃ๋ ๊ฒ. HTML์ ๊ฒฝ์ฐ์๋ ์บก์ํ๋ฅผ ํ๋ฉด CSS ์์ * ๋ก ์ ํํด๋ ์บก์ํํ ์ฝ๋๋ ์ ํ๋์ง ์๋๋ค.
1-2. vscode-htmltagwrap
์ ์ง ๋ชจ๋ฅด๊ฒ ๋๋ฐ ์ค์น๊ฐ ์ด๋ฏธ ๋์ด ์์๋ค. ์์ฒญ๋๊ฒ ๋ถํธํ๊ฒ ์ฝ๋๋ฅผ ์ง๊ณ ์์๋ค...
- ํ
์คํธ๊ฐ ์์๋ ํ๊ทธ์ ๋ฃ๊ณ ์ถ์ ํ
์คํธ๋ฅผ option + W ๋๋ฅด๋ฉด ์์ชฝ์ด p ํ๊ทธ๋ก ๊ฐ์ธ์ง๊ณ , ์์ชฝ ํ๊ทธ ์์ ์ปค์๊ฐ ๋ค์ด๊ฐ์ ์ฝ๊ฒ ๋ค๋ฅธ ํ๊ทธ๋ก ๋ฐ๊ฟ ์ ์๋ค.
- option + ๋๋ธํด๋ฆญ์ผ๋ก ๋จ์ด ๋จ์๋ก ์ฌ๋ฌ๊ฐ ์ ํํด์, htmltagwrap (option + w) ๋ฅผ ํตํด ์ฌ๋ฌ ์ค์ ํ๊ทธ๋ฅผ ๋์์ ๋ถ์ผ ์ ์๋ค.
2. HTML
2-1. ๊ณผ์ ๋ฆฌ๋ทฐ
1102 ๊ณผ์ : Korea Startup Forum html ํด๋ก ์ฝ๋ฉ.
ul>li{menu$}*4
- ๊ฐํ์ด ๋์ด์๋ ๊ณณ์ br ํ๊ทธ๋ฅผ ์ฐ๋ฉด screen reader ๋ก ์ฝ์ ๋ ๋๊ธฐ๊ณ ๋ฐ์ํ ์์
์์๋ ๋ฌธ์ ๊ฐ ๋ ์ ์์ผ๋ฏ๋ก, ๊ทธ๋ฅ enter ์ณ๋๊ณ ๋์ค์ CSS ๋ฅผ ์ด์ฉํด์ ๊ฐํํ๊ฒ ํ์.
- entity code
๊ฐ์ ๊ฒ์ ์ฌ์ฉํ์ง ๋ง์
- section์ ์ ์๋ ์์๋ค๊ณผ ์ฐ๊ด์ด ์๋ ๊ฒ์, article์ ๋
๋ฆฝ์ ์ธ ๊ฒ์ (๊ฑ๋ง ๋ ๋ผ์ ๋ค๋ฅธ ๊ณณ์ ๋ฌ๋ ๋ฌธ์ ๊ฐ ์๋)
- ํ์ด์ง์ ๋ณด์ด์ง ์๋๋ผ๋ section์ ๋ํ heading์ ์ฃผ๋ ๊ฒ์ด ์ข๋ค.
- footer์๋ ๊ตฌํ์ ๋๋์ง ๋ง์!
a ํ๊ทธ์์ ๋ฉ์ผ, ์ ํ๋ก ์ด๋
href="mailto:๋ฉ์ผ์ฃผ์"
href="tel:์ ํ๋ฒํธ"
- ํด๋ก ์ฝ๋ฉํ ๊ฒ์ ์ฌ๋ฆด๋๋ ๋ด์ฉ์ lorem ipsum ์ด์ฉํด์ ๋ค ๋ฐ๊ฟ์ฃผ์.
- ์ฝ๊ด ๋์ ๊ฐ์ ๊ฒฝ์ฐ๋ radio ๋ฒํผ์ด ๋์ํ์ง ์์ต๋๋ค์ ๊ฐ๋๋ก
- ์ ํ๋ฒํธ ๊ฐ์ ๊ฒ์ placeholder๋ ๋ฃ๊ณ , ์ ๊ทํํ์์ผ๋ก ๊ฒ์ฆํด์ฃผ๊ธฐ.
- ๋ณดํต ํ์
์์๋ ์คํ ๋ฆฌ๋ณด๋๋ฅผ ๋ฐ์์ ์ฝ๋ฉ์ ์งํ
2-3. HTML
#2 HTML ์ 4๋ฒ๋ถํฐ ์ด์ด์ ์์ฑ!
3. CSS
#4-2์ ์์ฑํ์๋ค.