์น ํผ๋ธ๋ฆฌ์
๊ฐ ๋ง์ด ์ฌ์ฉํ๋
HTML, CSS์ ํต์ฌ๊ธฐ์ ์ ๋ฐฐ์๋ณด์ธ์!
์น ํผ๋ธ๋ฆฌ์
๊ฐ
๋๊ณ ์ถ์ผ์ ๊ฐ์?
HTML๊ณผ CSS์ ๋ํด ๊ณต๋ถํ๊ณ ์ถ์ผ์ ๊ฐ์? ๊ทธ๋ฐ ๋ถ๋ค๊ป ์ ์ ์ง์์ ๊ณต์ ํด๋๋ฆฌ๊ณ ํจ๊ป ๋์๊ฐ๊ธฐ ์ํด ๊ฐ์๋ฅผ ์ ์ํ์ต๋๋ค. ์น ํผ๋ธ๋ฆฌ์
๊ฐ ๋๊ธฐ ์ํด ์๊ณ ์์ด์ผ ํ๋ HTML๊ณผ CSS์ ๊ธฐ์ด๋ฅผ ๋ค์ง๋ ์ด ๊ฐ์๋ฅผ ๋ฃ๊ณ ์ค์ค๋ก์ ๋ฅ๋ ฅ์ ํฅ์์์ผ ๋ณด์ธ์!
์ด๋ฐ ๋ถ๋ค๊ป ์ถ์ฒ๋๋ ค์.
โ
HTML๊ณผ CSS์ ๊ธฐ์ด๋ฅผ ๋ค์ง๊ณ ์ถ์ผ์ ๋ถ
โ
์น ํผ๋ธ๋ฆฌ์
๋ก ์ทจ์
ํ๊ณ ์ถ์ผ์ ๋ถ
โ
๋ค์ํ ์์ ๋ก ๋ฐฐ์ด ๋ด์ฉ์ ์์ฉํด๋ณด๊ณ ์ถ์ผ์ ๋ถ
โ
์๋์ ์ธ ๊ฐ์๊ฐ ์๋ ๋ฅ๋์ ์ธ ๊ฐ์๋ฅผ ๋ฃ๊ณ ์ถ์ผ์ ๋ถ
์ด๋ก ์ ์ด์ ๊ทธ๋ง!
์ปค๋ฆฌํ๋ผ๋ง๋ค ์ํด์๋ ๋ค์ํ ์์ ๋ฅผ ๋ง๋ค์ด๋ณด๋ฉฐ HTML ํ๊ทธ์ CSS ์คํ์ผ๋ง์ ๋ ์ฌ๋ฐ๊ฒ ๊ณต๋ถํ ์ ์์ต๋๋ค. ์ด๋ ต์ง ์์ต๋๋ค! ์ด๊ธ์์ ๋๋์ด์ ๋ง์ถฐ ์ ์๋ ๊ฐ์๋ก ์ด๋ ต์ง ์๊ฒ ํ์ตํ ์ ์์ต๋๋ค. ๊ฐ์๋ฅผ ๋ค์ ํ ์ฌ๋ฌ ๋์์ธ์ ์ฝ๋ฉํ ์ ์๋ ๋ฅ๋ ฅ์ ๊ธธ๋ฌ๋ณด์ธ์!
ํ์ต ๋ด์ฉ ๐
- div ํ๊ทธ ๊ฐ๋
์ค๋ช
- div ํ๊ทธ๋ก ์์๋ณด๋ position
- div ํ๊ทธ๋ก ์์๋ณด๋ flex box
- span, p ํ๊ทธ ๊ฐ๋
์ค๋ช
- span, p ํ๊ทธ๋ก ์์๋ณด๋ font style
- a ํ๊ทธ ๊ฐ๋
์ค๋ช
- a ํ๊ทธ๋ก ์์๋ณด๋ hover ํจ๊ณผ
- ul ํ๊ทธ ๊ฐ๋
์ค๋ช
- table ํ๊ทธ ๊ฐ๋
์ค๋ช
- input ํ๊ทธ ๊ฐ๋
์ค๋ช
โ
์์ 1 - ์ํ ๋ฆฌ๋ทฐ์ฐฝ ๋ง๋ค๊ธฐ
div, span, p ํ๊ทธ๋ฅผ ์ด์ฉํ์ฌ ์ํ ๋ฆฌ๋ทฐ์ฐฝ์ ๋ง๋ค์ด๋ด
์๋ค.

โ
์์ 2 - ํ์๊ฐ์
ํผ ๋ง๋ค๊ธฐ
table, input ํ๊ทธ๋ฅผ ์ด์ฉํ์ฌ ํ์๊ฐ์
ํผ์ ๋ง๋ค์ด๋ด
์๋ค.

โ
์์ 3 - ์๋ธ ๋ฉ๋ด๊ฐ ์๋ ๋ฉ๋ด๋ฐ ๋ง๋ค๊ธฐ
a, ul ํ๊ทธ ๋ฑ์ ์ด์ฉํ์ฌ ๋ฉ๋ด๋ฐ๋ฅผ ๋ง๋ค์ด๋ด
์๋ค.

โ
์์ 4 - ๋ก๊ทธ์ธ ํ๋ฉด ๋ง๋ค๊ธฐ
๋ฐฐ์ด ํ๊ทธ๋ค์ ์ด์ฉํ์ฌ ์ค๋ฌด์์ ๋ง์ด ๋ง๋๋ ๋ก๊ทธ์ธ ํ๋ฉด์ ๋ง๋ค์ด๋ด
์๋ค.

โ
์์ 5 - ์ํ๋ฆฌ์คํธ ๋ง๋ค๊ธฐ
๋ฐฐ์ด ํ๊ทธ๋ค์ ์ด์ฉํ์ฌ ์ํ ๋ฆฌ์คํธ๋ฅผ ๋ง๋ค์ด๋ด
์๋ค.

์๋
ํ์ธ์, ๊นํ์ง์
๋๋ค โ๏ธ
์๋
ํ์ธ์, ์น ํผ๋ธ๋ฆฌ์
๊นํ์ง์
๋๋ค.
ํ์ฌ ์น ํผ๋ธ๋ฆฌ์
๋ก ๊ทผ๋ฌดํ๋ฉด์ ์ฌ๋ฌ ์คํฌ๋ค์ ์๊ณ ์๊ณ 4๋
๊ฐ ๊ด๋ จ ์ ๊ณต ์ง์์ ์ต๋ํ๋ฉฐ ์ ๋ง์ ์คํ์ผ์ ๊ฐ์ถฐ์์ต๋๋ค. ๋ํ ์ง๊ธ์ ์ง์๊ณต์ ์๋ก ์ฌ๋ฌ๋ถ๊ป ์ง์์ ๊ณต์ ํด๋๋ฆฌ๋ ์ผ๊น์ง ํ๊ณ ์์ต๋๋ค.
์์ ์ง๋ฌธ Q&A ๐ฌ
Q. ๋น์ ๊ณต์๋ ๋ค์ ์ ์๋ ๊ฐ์์ธ๊ฐ์?
๋ฌผ๋ก ์
๋๋ค. ๋น์ ๊ณต์๋ ์ฝ๊ฒ ๋ฐฐ์ฐ์ค ์ ์๋๋ก ์ด๋ ต์ง ์๊ฒ ๋ง๋ค์์ต๋๋ค!
Q. ๊ฐ์๋ฅผ ๋ฃ๊ธฐ ์ ์ค๋นํด์ผ ํ ๊ฒ์ด ์๋์?
์๋ฌด๊ฒ๋ ์ค๋นํ์ง ์์ ์ํ๋ก ์ค์
๋ ์๊ด์์ต๋๋ค! ๋ชจ๋ ๊ฒ์ ์ฌ๋ฌ๋ถ๊ป ๋ ๋จน์ฌ๋๋ฆด ๊ฑฐ์์.
Q. ์์
๋ด์ฉ์ ์ด๋ ์์ค๊น์ง ๋ค๋ฃจ๋์?
HTML ์ฃผ์ ํ๊ทธ๋ค์ ๋ํ ์ค๋ช
๊ณผ CSS ์ ํ์, ๊ฐ๋จํ ์คํ์ผ๋ง ๋ฑ์ ๋ฐฐ์ฐ๊ณ ์์ฉํ๋ ๋ฒ๊น์ง๋ฅผ ๋ฐฐ์๋๋ค!