ALOHA CLASS
/
Front-End
/
HTML
Search
Duplicate
Share
HTML ๊ธฐ๋ณธ
HTML ๊ธฐ๋ณธ
โข
๊ธฐ๋ณธ ๊ตฌ์กฐ
โข
๋จ์ถํค
โข
Emmet ์ฌ์ฉํ๊ธฐ
โข
Live Server
HTML ๊ธฐ๋ณธ
์ ๋ ฅ์์ ํ๊ทธ
์น ํ์ด์ง์์ ์ฌ์ฉ์๋ก๋ถํฐ ๋ฐ์ดํฐ๋ฅผ ์ ๋ ฅ๋ฐ๊ธฐ ์ํด ์ฌ์ฉํ๋ HTML ํ๊ทธ
ํ๊ทธ
์ค๋ช
์ฃผ์ ์์ฑ
<form>
๋ฐ์ดํฐ๋ฅผ ์๋ฒ๋ก ์ ์กํ๊ธฐ ์ํ ์์ญ์ ์ ์ํ๋ ํ๊ทธ
action
,
method
<input>
ํ ์คํธ ์ ๋ ฅ, ์ฒดํฌ๋ฐ์ค, ๋ผ๋์ค ๋ฒํผ ๋ฑ ๋ค์ํ ์ ๋ ฅ์ ๋ฐ์ ์ ์๋ ํ๊ทธ
type
,
name
,
value
,
placeholder
<select>
๋๋กญ๋ค์ด ๋ชฉ๋ก์ ์ ๊ณตํ์ฌ ์ฌ์ฉ์๊ฐ ์ต์ ์ ์ ํํ ์ ์๋๋ก ํ๋ ํ๊ทธ
name
,
multiple
,
size
<textarea>
์ฌ๋ฌ ์ค์ ํ ์คํธ ์ ๋ ฅ์ ๋ฐ์ ์ ์๋ ํ๊ทธ
name
,
rows
,
cols
,
placeholder
์ ๋ ฅ์์ ํ๊ทธ
๋ฉํฐ
๋ฏธ๋์ด ํ๊ทธ
HTML์์ ์ค๋์ค, ๋น๋์ค, ๊ทธ๋ํฝ ๋ฑ ๋ค์ํ ๋ฉํฐ๋ฏธ๋์ด ์ฝํ ์ธ ๋ฅผ ์น ํ์ด์ง์ ์ฝ์ ํ๊ฑฐ๋ ์ ์ดํ ์ ์๋ ํ๊ทธ๋ฅผ ๋งํฉ๋๋ค.
โข
audio
โข
video
โข
iframe
๋ฉํฐ๋ฏธ๋์ด ํ๊ทธ
๋ ์ด์์ ํ๊ทธ
์น ํ์ด์ง์ ๋ ์ด์์์ ๊ตฌ์ฑํ๊ณ ์คํ์ผ์ ์ ์ฉํ๋ ๋ฐ ์ฌ์ฉ๋๋ ํ๊ทธ์ ๋๋ค.
๊ด๋ก์ ์ผ๋ก ๋ธ๋ก ์์์ ํน์ง์ ๊ฐ์ง div ํ๊ทธ์ ์ธ๋ผ์ธ ์์์ธ span ํ๊ทธ๊ฐ ๋ ์ด์์ ํ๊ทธ๋ก ๋ง์ด ์ฌ์ฉ๋์์ต๋๋ค.
ํ๊ทธ
์ค๋ช
ํน์ฑ
<div>
๊ณต๊ฐ(์์ญ)์ ๋๋๊ธฐ ์ํด ์ฌ์ฉํ๋ ํ๊ทธ. ํ์ด์ง๋ฅผ ๋ ผ๋ฆฌ์ ์ธ ์์ญ์ผ๋ก ๋ถ๋ฆฌ.
- ๋ธ๋ก ์์ - ์์ ์์ญ์ ์ ์ฒด ๋๋น๋ฅผ ์ฐจ์ง
<span>
์์์ ๋ด์ฉ์ด ํ์ํ ํฌ๊ธฐ๋ง ์ฐจ์งํ๋ ํ๊ทธ. ๋์์ธ์ ์ผ๋ก ๊ตฌ๋ถ์ด ํ์ํ ์์๋ฅผ ์ง์ .
- ์ธ๋ผ์ธ ์์ - ๋ค๋ฅธ ์์์ ํ ์ค์ ๋๋ํ ๋ฐฐ์น
๋ ์ด์์ ํ๊ทธ
์๋ฉํฑ ํ๊ทธ (Semantic Tag)
์ฝํ ์ธ ์ ์๋ฏธ๋ ๋ชฉ์ ์ ๋ช ํํ๊ฒ ์๋ ค์ฃผ๋ ํ๊ทธ
Sematic : โ์๋ฏธ์โ
Semantic Tag : ์๋ฏธ๊ฐ ์๋ ํ๊ทธ
์๋ฉํฑ ํ๊ทธ