๋ฌธ์ฅ์ ์์ฑํ๋ค๊ฐ ๊ฐ์กฐ ํจ๊ณผ๋ฅผ ๋ฃ๊ณ ์ถ์ ๋๋ strong, em์ ์ฌ์ฉํ๋ค.
- strong
strong์ ๊ธ์จ๊ฐ ๋๊บผ์ ์ง๋ ํจ๊ณผ๋ฅผ ๊ฐ์ง๋ค.- em
em์ ๊ธ์จ๋ฅผ ๊ธฐ์ธ์ด์ง๊ฒ ํ๋ ํจ๊ณผ๋ฅผ ๊ฐ์ง๋ค.
<p lang="en">
hello!dklafn;sdfns;fn;sdkfnsfn;asf <br />
<strong>๊ตต๊ฒ ์ฐ๊ณ ์ถ๋ค!</strong> aklsn;fkaensf;snfa;es <br />
<em>๊ธฐ์ธ์ฌ ์ฐ๊ณ ์ถ๋ค!</em>
asf;ns;fknas;fsdfdsfa
</p>
๊ฐ์กฐํ๊ณ ์ถ์ ๋ถ๋ถ์ ํ๊ทธ๋ก ๊ฐ์ธ์ฃผ๋ฉด ๋๋ค!
ํํ ์๊ณ ์๋ ํ์ดํผ๋งํฌ ์ฒ๋ผ ํน์ ์น ์ฃผ์์ ์ฐ๊ฒฐํด์ฃผ๋ ๊ธฐ๋ฅ์ ํ๋ค.
ํ๊ทธ ๋ด์ attr์ ์ ์ ํ๊ฒ ์ฌ์ฉํ๋ฉด ๋ค์ํ ๊ธฐ๋ฅ์ ๊ตฌํํ ์ ์๋ค.
๊ตฌํ ๊ฐ๋ฅํ ๊ธฐ๋ฅ์ ์๋์ ๊ฐ๋ค.
- ์น url ์ ๋ ฅ
- ์๋ ๊ฒฝ๋ก ์ ๋ ฅ
- ๋ฉ์ผ ์์ฑ
- ์ ํ ๊ฑธ๊ธฐ
<a href="http://www.naver.com">์น url ๋งํฌ.. hypertext reference == href</a>
<br />
<a href="http://www.naver.com" target="_blank">์ด๊ฑด ์๋ก์ด ํญ์์ ์ด์ด์ค๋ค.</a>
<br />
<a href="">๋ค๋ฅธ ํ์ผ์ ์๋ ๊ฒฝ๋ก๋ ์
๋ ฅ ๊ฐ๋ฅ</a> <br />
<a href="#hello">id๋ฅผ ํ์ฉํด์ ํ์ด์ง ๋ด ์ด๋ ๊ฐ๋ฅ</a> <br />
<a href="mailto:[email protected]">๋งํฌ๋ ์ด๋ฉ์ผ๋ก ๋ฉ์ผ ์ฐ๊ธฐ</a> <br />
<a href="tel:01012345678">๋ชจ๋ฐ์ผ์์ ์ฌ์ฉ์...์ ํ ๊ฑธ๊ธฐ ๊ฐ๋ฅ</a> <br />
<a href="http://www.naver.com" target="_blank">
<p>
์ด ๊ธ์ ๋๋ฅด๋ฉด ๋ค์ด๋ฒ๋ก ์ด๋ํ๊ฒ ๋ ๊ฑฐ์ผ!! ์ด๋ฐ ์์ผ๋ก ํํ ํ ์๋ ์์ด~
</p>
</a>
์ฒซ ์งธ, ๋จ์ํ๊ฒ url์ ์ ์ด์ ํด๋น ์น ํ์ด์ง๋ก ์ด๋ํ๋ ๊ฒ์ด๋ค.
์ฌ๊ธฐ์ target: _blank๋ฅผ ์ฌ์ฉํ๋ฉด ์๋ก์ด ํญ์์ ์น ํ์ด์ง๊ฐ ์ด๋ฆฌ๋๋ก ๋ง๋ค ์ ์๋ค.
๋ ์งธ, ์๋ ๊ฒฝ๋ก๋ฅผ ์ ๋ ฅํ๋ ๊ฒ์ด๋ค. ๋ง์ฝ, ์ฌ๋ฌ๊ฐ์ HTML ํ์ผ์ ๋ง๋ค๊ฒ ๋๋ค๋ฉด ๊ทธ ํ์ผ์ ์์น๋ฅผ ์ ๋ ฅํจ์ผ๋ก์ ๊ทธ ํ์ด์ง๋ก ์ด๋ํ ์ ์๋ ๊ฒ์ด๋ค.
์ ์งธ, mailto: ๋ฅผ ์ฌ์ฉํ์ฌ ๋งํฌ๋์ด์๋ ์ด๋ฉ์ผ ์ฃผ์๋ก ๋ฉ์ผ ์ฐ๊ธฐ๊ฐ ๊ฐ๋ฅํ๋ค.
๋ท ์งธ, tel: ์ ์ฌ์ฉํ์ฌ ๋งํฌ๋์ด์๋ ํด๋์ ํ ๋ฒํธ๋ก ์ ํ๊ฐ ๊ฐ๋ฅํ๋ค. ์ด๋ ํด๋์ ํ์์ ์น ํ์ด์ง๋ฅผ ์ฌ์ฉํ ๋ ๋งค์ฐ ์ ์ฉํ๊ฒ ์ฐ์ผ ๊ธฐ๋ฅ์ด๋ค.
๊ทธ ์ธ, p ํ๊ทธ ๋ฑ์ ํ์ฉํ ๋ฌธ์ฅ์ด๋ ์ด๋ฏธ์ง ์นด๋ ๋ฑ์๋ a ํ๊ทธ๋ก ๊ฐ์ธ์ฃผ๋ฉด ๋งํฌ๋ฅผ ์ฐ๊ฒฐํ ์ ์๋ค.
์ด๋ฏธ์ง๋ src(source)์์ง์ ์ด๋ฏธ์ง url์ ์ ๋ ฅํด์ ๋ถ๋ฌ์ฌ ์๋ ์๊ณ , ์๋ ๊ฒฝ๋ก๋ฅผ ์ง์ ํด์ ํ์ผ์ ์ ์ฅ๋ ์ด๋ฏธ์ง๋ฅผ ๋ถ๋ฌ์ฌ ์๋ ์๋ค.
alt(alternative)๋ ์ด๋ฏธ์ง๊ฐ ๋ก๋ฉ๋์ง ๋ชปํ๋ ์ํฉ์ ๊ทธ ์๋ฆฌ๋ฅผ ๋์ฒดํ๋๋ก ํ๋ ํ ์คํธ์ด๋ค. ์ด๋ ์ฅ์ ๊ฐ ์์ผ์ ๋ถ๋ค์ ์ํด ์น์ ์ฝ์ด์ฃผ๋ ๊ธฐ๋ฅ์ด ์๋ํ ๋ ์ด๋ฏธ์ง ๋์ ์ฝํ๋ ๋ถ๋ถ์ด๊ธฐ๋ ํ๋ค.
<img
src="https://newsroom-prd-data.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2018/08/b_01.png"
alt="์ฌํ ์ด๋ฏธ์ง"
/>
<img src="./images/b_01.png" alt="" />
๋ฆฌ์คํธ๋ ์์๊ฐ ์๋ค๋ฉด ul(unordered list)๋ฅผ ์ฌ์ฉํ๋ค.
์์๊ฐ ์๋ค๋ฉด ol(ordered list)๋ฅผ ์ฌ์ฉํ๋ค.
ul๊ณผ ol์ ์ง๊ณ ์์์์๋ก li(list item)๋ง์ ๊ฐ์ง๋ค. ์ฆ, ๋ค๋ฅธ ํ๊ทธ๋ ์์ ์์๋ก ์ฌ์ฉํ ์ ์๋ค๋ ๋ป์ด๋ค.
๋ง์ฝ, ๋ค๋ฅธ ํ๊ทธ๋ฅผ ์ฌ์ฉํ๊ณ ์ถ๋ค๋ฉด li ํ๊ทธ๋ก ๊ฐ์ธ์ ์ฌ์ฉํด์ผํ๋ค.
<ul>
<li>unordered list == ul</li>
<li>list item == li</li>
<li>ul ์ง๊ณ ์์์์๋ li๋ง ๊ฐ๋ฅํ๋ค. li ์์ ๋ค๋ฅธ ํ๊ทธ๋ฅผ ๋ฃ๋ ๊ฒ์ ๊ฐ๋ฅ</li>
<li><a href="http://naver.com" target="_blank">๋ค์ด๋ฒ</a></li>
<li>์์๊ฐ ๋ฐ๋ก ์ ํด์ ธ ์์ง ์๋ค</li>
</ul>
<h2>๊ธ์์น ๊ฒ์์ด</h2>
<ol>
<li>orderd list == ol</li>
<li>์์๊ฐ ์์ด์ผ ํ๋ ๋ฆฌ์คํธ์ ์ฌ์ฉ</li>
<li>์ฃผ๋์ด ๊ฐ๋ฐ์</li>
<li><a href="http://naver.com">๋ค์ด๋ฒ</a></li>
</ol>
ol์ ๊ฒฝ์ฐ ๊ธฐ๋ณธ์ ์ผ๋ก ์ซ์๊ฐ ๋ถ์ด์ ์์๋ฅผ ํ์ํด์ค๋ค.
๋ฆฌ์คํธ ๋งจ ์์ ํ์๋๋ ๋ชจ์์ ํ๊ทธ์ attr์ ์ถ๊ฐ๋ก ์
๋ ฅํด์ ๋ฐ๊ฟ ์๋ ์๊ณ , CSS๋ฅผ ์ฌ์ฉํด์ ๋ฐ๊ฟ ์๋ ์๋ค.
๋ฐฑ๊ณผ์ฌ์ ์ฒ๋ผ ์ฉ์ด์ ๋ป์ ํ์ํ ๋ ์ฐ๋ ํ๊ทธ์ด๋ค.
ํน์ key & value ๋ก ์ ๋ณด๋ฅผ ์ ๊ณตํ ๋๋ ์ฐ์ธ๋ค.dl == description list
dt == description term
dd == description data
dfn == definition
<dl>
<dt>
<dfn> ๋ฐ๊ธฐ์ </dfn>
</dt>
<dt>Pak ki young</dt>
<dd>๋ฐ๊ธฐ์์ ํ๋ฃจ๋นจ๋ฆฌ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๊ฐ ๋๊ณ ์ถ๋ค.</dd>
<dd><a href="http://www.naver.com">gg</a></dd>
<dt>ํ๋ก ํธ ์๋</dt>
<dd>๋ฐ๊ธฐ์์ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๊ฐ ๋๊ณ ์ถ์ด!</dd>
<dd>๋ฐฑ์๋์ ์ฐ๊ฒฐ์ด ๋๋ ์ง์
!</dd>
<div>
<dt>์ด๋ ๊ฒ๋ ๊ฐ๋ฅํ์ง</dt>
<dd>๋ฐ๊ธฐ์์ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๊ฐ ๋๊ณ ์ถ์ด!</dd>
<dd>๋ฐฑ์๋์ ์ฐ๊ฒฐ์ด ๋๋ ์ง์
!</dd>
</div>
</dl>
4๋ฒ์์ ๋ค๋ฃฌ ๋ฆฌ์คํธ์ ๋ง์ฐฌ๊ฐ์ง๋ก dl์ ์ง๊ณ ์์์์๋ก๋ dt, dd, dfn, div๋ง ๊ฐ๋ฅํ๋ค.
๋ฐ๋ผ์ ๋ค๋ฅธ ํ๊ทธ๋ฅผ ์ฌ์ฉํ๊ณ ์ถ๋ค๋ฉด ์ง๊ณ ์์์์ ํ๊ทธ๋ค๋ก ๊ฐ์ธ์ ์ฌ์ฉํด์ผํ๋ค.
์ฐธ๊ณ ๋ก, dfn ํ๊ทธ๋ em ํ๊ทธ์ ํจ๊ณผ์ฒ๋ผ ํ
์คํธ๊ฐ ๊ธฐ์ธ์ด์ง ํํ๋ก ํ์๋๋ค.
blockquote์ ๊ฒฝ์ฐ ๋ฌธ๋จ์ด๋ ๋ด์ฉ ์ ์ฒด๊ฐ ์ธ์ฉ๋ฌธ์ผ ๊ฒฝ์ฐ ์ฃผ๋ก ์ฌ์ฉํ๋ค.
q์ ๊ฒฝ์ฐ ์ธ์ฉ๋ฌธ์ด ์งง์์ ๊ฐ๋จํ๊ฒ ํ๊ทธ๋ก ๊ฐ์ธ์ ํํํ ๋ ์ฌ์ฉํ๋ค.
๋ํ ์ธ์ฉ๋ฌธ์ ์ถ์ฒ๋ฅผ ํ์ํ๊ธฐ ์ํด์ cite ํ๊ทธ๋ฅผ ์ฌ์ฉํ๋ค.
<blockquote cite="http://www.naver.com">
์ฐ๋ฆฌ๊ฐ ๊ฒช์ ์ ์๋ ๊ฐ์ฅ ์๋ฆ๋ค์ด ์ฒดํ์ ์ ๋น๋ค. <br />
์ ๋น๋ ๋ชจ๋ ์ฐธ์์ ๊ณผ ๊ณผํ์ ๊ฒฐ๊ณผ์ด๋ค.
<cite>์๋ฒํธ ์์ธ์ํ์ธ</cite>
</blockquote>
<p>๋๋ ๋งํ๋ค.<q>ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๊ฐ ๋๊ณ ์ถ๋ค๊ณ !</q></p>
cite๋ ํ๊ทธ ์ attr๋ก ์ฌ์ฉํด์ ์ถ์ฒ๋ฅผ ํ์ํ ์๋ ์๊ณ , ํ๊ทธ์ฒ๋ผ ์ฌ์ฉํด์ ๊ธฐ์ธ์ด์ง ํ
์คํธ๋ก ์ถ์ฒ๋ฅผ ์ ์ด์ค ์๋ ์๋ค.
qํ๊ทธ์ ๊ฒฝ์ฐ ํ๊ทธ๋ก ๊ฐ์ผ ๋ถ๋ถ์ ์ธ์ฉ๋ฌธ ํ์ ""(ํฐ ๋ฐ์ดํ)๊ฐ ์์ฑ๋๋ค.
div, span์ ๋ค๋ฅธ ํ๊ทธ์ฒ๋ผ ์น ํ์ด์ง์์ ์ด๋ค ๊ธฐ๋ฅ์ ๋ด๋นํ๋ ํ๊ทธ๊ฐ ์๋๋ค.
์ฃผ๋ก ์์ฑ๋ ๋ฌธ์์ ์์๋ค์ ๋ฌถ์ด์ ์ฒ๋ฆฌํ๊ณ ์ถ์ ๋(์๋ฅผ๋ค์ด CSS) ์ฃผ๋ก ์ฌ์ฉํ๋ค.
์๋ฅผ๋ค์ด, span ํ๊ทธ๋ ํ ์คํธ๋ฅผ ๊ฐ์ธ์ ์ฌ์ฉํ๋ฉด ๊ทธ ๋ถ๋ถ๋ง ํจ๊ณผ๋ฅผ ์ ์ฉํ ์ ์๊ฒ ๋ง๋ค ์ ์๋ค.
form๊ณผ input๊ณผ button์ ๊ฑฐ์ ๊ฐ์ด ์ฌ์ฉ๋๋ค๊ณ ๋ด๋ ๋ฌด๋ฐฉํ๋ค.
์ฐ์ form ํ๊ทธ๋ถํฐ ์ดํด๋ณด๋๋ก ํ์. form์ ์ฌ์ฉ์๋ก๋ถํฐ input์ ๋ฐ๊ธฐ ์ํด ์ฌ์ฉํ๋ค.
<form action="API ์ฃผ์" method="GET|POST"></form>
์์ ๊ฐ์ attr๋ฅผ ๊ฐ์ง๊ณ ์๋ ํ๊ทธ์ด๋ค.
action์ ์ฌ์ฉ์์๊ฒ์ ๋ฐ์ input์ ์๋ฒ์ ๋ณด๋ด ์ฒ๋ฆฌํ๊ธฐ ์ํ ์์ฑ์ผ๋ก, ์ด ๋ฐ์ดํฐ๋ฅผ ์ฒ๋ฆฌํ๊ธฐ ์ํด API ์๋ฒ์ ์ ๊ทผ ๊ฐ๋ฅํ URL์ ์ ์ด์ค์ผํ๋ค.
method๋ ๋ฐ์ดํฐ๋ฅผ ๋ณด๋ด๋ ๋ฐฉ์์ผ๋ก, ๋ฐ์ดํฐ๊ฐ ํฌ๋ฉด POST, ์์ผ๋ฉด GET์ ์ฌ์ฉํ๋ค๊ณ ์๊ฐํ์.
๋ค์์ผ๋ก๋ form ๋ด๋ถ์์ ์ฌ์ฉํ input ํ๊ทธ์ ๋ํด์ ์์๋ณด์.
input์ ์ธํ, ์ธํ ํ๋(input field)๋ผ๊ณ ๋ถ๋ฅด๊ธฐ๋ ํ๋ค.
<input type="text" />
input ํ๊ทธ๋ ์์ ๊ฐ์ ํํ๋ฅผ ๊ฐ์ง๋ค.
type์ด๋ผ๋ attr์ ์ด๋ค ๊ฒ์ ๋ฃ๋๋์ ๋ฐ๋ผ ๋ค์ํ ๊ธฐ๋ฅ์ด ์กด์ฌํ๋ค.
<form action="" method="get">
<input
type="text"
placeholder="์๋ด ๋ฌธ๊ตฌ"
maxlength="15"
minlength="5"
required
value="์ด๊ธฐ๊ฐ"
/>
<input type="text" disabled />
<input type="email" placeholder="์ด๋ฉ์ผ์ ์
๋ ฅํ์ธ์" />
<input type="password" placeholder="๋น๋ฐ๋ฒํธ" minlength="6" />
<input type="url" placeholder="ํฌํธํด๋ฆฌ์ค URL์ ์ ์ผ์์ค" />
<input
type="tel"
placeholder="์ ํ๋ฒํธ (***-****-****)"
pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}"
/>
<input
type="number"
placeholder="๋์ด๋ฅผ ์
๋ ฅํ์ธ์(12์ธ ์ด์ ~ 122์ธ ์ดํ)"
min="12"
max="122"
/>
<input type="file" accept=".png, .jpg" />
</form>
์ฒซ ์งธ, text์ผ ๊ฒฝ์ฐ์๋ ์ผ๋ฐ์ ์ธ ํ
์คํธ ์
๋ ฅ์ด ๊ฐ๋ฅํ๋ค.
๋ ์งธ, email์ผ ๊ฒฝ์ฐ์๋ ์ด๋ฉ์ผ ํ์์ ์
๋ ฅ๋ฐ๋ ์นธ์ ์์ฑํ๋ค. ๋ฐ๋ผ์ @๊ฐ ๋ค์ด๊ฐ ์๋ ์ด๋ฉ์ผ ํ์์ด ์๋๋ผ๋ฉด ์๋ชป๋ ํ์์ด๋ผ๋ ๊ฒฝ๊ณ ๋ฌธ์ด ํ์ ๋๋ค.
์
์งธ, password์ผ ๊ฒฝ์ฐ์๋ ๋น๋ฐ๋ฒํธ๋ฅผ ์
๋ ฅ๋ฐ๋ ์นธ์ ์์ฑํ๋ค. ์ฌ๊ธฐ์ ์
๋ ฅ๋๋ ํ
์คํธ๋ .ํ์๋ก ํ์๋๋ค.
๋ท ์งธ, url์ผ ๊ฒฝ์ฐ์๋ http:// ์ ๊ฐ์ด url์ ์
๋ ฅํ ์ ์๋ ์นธ์ ์์ฑํ๋ค. ๋ฐ๋ผ์ url ํ์์ ๋ง์ถฐ์ ์ ์ง์์ผ๋ฉด ๊ฒฝ๊ณ ๋ฌธ์ด ํ์ ๋๋ค.
๋ค์ฏ ์งธ, tel์ผ ๊ฒฝ์ฐ์๋ ์ ํ๋ฒํธ๋ฅผ ์
๋ ฅํ ์ ์๋ค. ์ด ๋ pattern ์์ฑ์ ์ด์ฉํ์ฌ [] ์ฌ์ด์ ์ซ์๋ฅผ {} ๊ฐ ์ ๋๋ก ์ ํํ ์ ์๋ค. placeholder์ ํจ๊ป ํ์ํ ์ด ์ ํ์ ๋ง์กฑํ์ง ๋ชปํ๋ฉด ๊ฒฝ๊ณ ๋ฌธ์ด ๋ฐ์ํ๋ค.
์ฌ์ฏ ์งธ, number์ผ ๊ฒฝ์ฐ์๋ ์ซ์๋ง์ ์
๋ ฅํ ์ ์๋ค. ์ฌ๊ธฐ์๋ min, max๋ฅผ ํตํด์ ์ต์, ์ต๋ ์
๋ ฅ ๊ฐ๋ฅ ์ซ์ ๋ฒ์๋ฅผ ์ง์ ํ ์ ์๋ค.
์ผ๊ณฑ ์งธ, file์ผ ๊ฒฝ์ฐ์๋ ํ์ผ์ ์ ์ถํ ์ ์๋ ์นธ์ ์์ฑํ๋ค. ์ฌ๊ธฐ์ accept๋ฅผ ํตํด์ ์ ์ถ ๊ฐ๋ฅํ ํ์ผ ํ์์ ์ ํํ ์๋ ์๋ค.
์์์ ์ธ๊ธ๋ attr์ ์ ์ธํ๊ณ ๋ ๊ธฐ๋ณธ์ ์ผ๋ก ์๋์ attr์ด ๊ณตํต์ ์ผ๋ก ์ฐ์ธ๋ค.
placeholder๋ก ์๋ด ๋ฌธ๊ตฌ๋ฅผ ์์ฑํด์ค ์ ์๋ค.
maxlength, minlength๋ฅผ ํตํด ํ
์คํธ์ ์ต๋, ์ต์ ๊ธธ์ด๋ฅผ ์ ํ ํ ์๋ ์๋ค. ์ฃผ์ํ ์ ์ type์ด number์ธ input์์๋ min, max๋ฅผ ์ฌ์ฉํ๋ค๋ ์ ์ด๋ค.
value๋ฅผ ํตํด ์ด๊ธฐ๊ฐ์ ๋จผ์ ๊ธฐ์
ํด๋์ ์ ์๋ค.
required๋ฅผ ์
๋ ฅํ๋ฉด ํด๋น input์ ๋ฐ๋์ ๊ฐ์ด ์
๋ ฅ๋์ผ์ง ๋ค์ ๋์์ ์งํ ํ ์ ์๋ค.
๋ฐ๋๋ก disabled๋ฅผ ์
๋ ฅํ๋ฉด ํด๋น input์ ์๋ฌด๊ฒ๋ ์
๋ ฅํ ์ ์๊ฒ ๋ง์ ์ ์๋ค.
label์ input์ ๋ํ ์ด๋ฆ์ ๋ถ์ฌ์ค๋ค.
๋ฐ๋ผ์ ์ฌ๋ฌ๊ฐ์ input ์ค์์ ์ด๋ค input์ด ํด๋น label๊ณผ ์ฐ๊ฒฐ๋๋์ง ํ์ํด์ค์ผํ๋ค.
๊ทธ ๊ธฐ๋ฅ์ ๋ด๋นํ๋๊ฒ for ์์ฑ์ด๋ค. input์ id์ ๊ฐ์ ๊ฐ์ label์ for ์์ฑ์ ์ ๋ ฅํด์ฃผ๋ฉด ํด๋น input๊ณผ label์ ์ฐ๊ฒฐ๋๋ค.
์ด๋ ๊ฒ ์ฐ๊ฒฐํ label์ ํด๋ฆญํ๋ฉด ๋ง์น input์ ํด๋ฆญํ ๊ฒ ์ฒ๋ผ ๋ฐ์ํ๋ค!
<form>
<label for="thisInput">๋ ์ด๋ธ ์คํ</label>
<input type="text" id="thisInput" placeholder="๋ ์ด๋ธ ์คํ" />
<button>submit</button>
</form>
์ ์ฝ๋์์ ๋ณผ ์ ์๋ฏ id์ for๊ฐ ๊ฐ์ ๊ฐ์ ๊ฐ์ง๊ณ ์๋ ๊ฒ์ ๋ณผ ์ ์๋ค.
์ด๋ฅผ ํตํด ํด๋น input๊ณผ label์ ์ฐ๊ฒฐ๋์๋ค.
์ฌ์ค ์ด๋ ๊ฒ label์ ์ฌ์ฉํ๋ ์ด์ ๋ 8๋ฒ์์ ๋งํ input ํ๊ทธ์ ๋ ๋ค๋ฅธ type๊ณผ ๊ด๋ จ์ด ๊น๋ค.
input ํ๊ทธ์ ๋ ๋ค๋ฅธ type์ผ๋ก๋ radio, checkbox๊ฐ ์๋ค.
radio๋ ์ฌ๋ฌ ๊ฐ์ ์ ํ์ง ์ค ํ๋๋ง ์ ํ ๊ฐ๋ฅํ input ํ๊ทธ์ type์ด๋ค.
<form action="" method="get">
<input type="radio" id="hi" name="greeting" value="hello" />
<label for="hi">hi</label>
<input type="radio" id="bye" name="greeting" value="goodBye" />
<label for="bye">bye</label>
<hr />
<input type="radio" id="anhi" name="angreeting" value="anhello" />
<label for="anhi">anhi</label>
<input type="radio" id="anbye" name="angreeting" value="angoodBye" />
<label for="anbye">anbye</label>
<button>submit</button>
</form>
๋ง์ฝ radio ๋ฒํผ ์ค ํ๋๊ฐ ์ ํ๋์๋๋ฐ ๋ ๋ค๋ฅธ radio ๋ฒํผ์ด ๋ค์ค ์ ํ๋๋ ๊ฒ์ ๋ง๊ธฐ ์ํด์ input ํ๊ทธ์ name ์์ฑ์ ์ฌ์ฉํ๋ค.
name ์์ฑ์ด ๊ฐ์ ๊ฐ์ ๊ฐ์ง๋ฉด ๊ทธ ํ๊ทธ๋ค์ ๊ฐ์ ๊ทธ๋ฃน์ ์ํ ๊ฒ์ผ๋ก ์ธ์์ด ๋์ด์ ๋ค์ค ์ ํ์ด ๋๋ ๊ฒ์ ๋ง์ ์ ์๋ค.
์ ์ฝ๋์์๋ greeting ๊ทธ๋ฃน๊ณผ angreeting ๊ทธ๋ฃน์ผ๋ก ๋๋ ์ ธ ์๊ณ ๊ฐ๊ฐ์ ๊ทธ๋ฃน์์๋ ๋ค์ค ์ ํ์ด ๋ถ๊ฐ๋ฅํ๋ค.
์ด๋ฌํ ๋ฒํผ๋ค์ด ์๋ form์ ์๋ฒ์ submitํ๋ฉด ์ด๋ค name ๊ทธ๋ฃน์ ์ํ ์ด๋ค radio๊ฐ ์ ํ๋์๋์ง๋ฅผ ์๋ฒ์ ๋ณด๋ด๋๋ฐ, ๋ฌธ์ ๋ ๊ทธ๋ฅผ ๊ตฌ๋ถํ ์ ์๋ ๋ฐฉ๋ฒ์ด ์๋ค๋ ๊ฒ์ด๋ค.
๋ฐ๋ผ์, input ํ๊ทธ์ value ์์ฑ์ ์ฌ์ฉํ์ฌ ํด๋น radio์ ๊ณ ์ ํ ์ด๋ฆ์ ๋ถ์ฌ์ค๋ค.
์ด๋ ๊ฒ ์๋ฒ์ ์ ์ถ๋ url์ name = value & name = value ๊ฐ ๋ถ์ด์๊ฒ ๋๋ค.
์๋ฅผ๋ค์ด, hi์ anbye๋ฅผ ์ ํํด์ ์๋ฒ์ ์ ์ถํ๋ฉด url์๋ greeting = hello & angreeting = angoodbye๊ฐ ๋ถ์ด์์ ๊ฒ์ด๋ค.
๋ค์์ผ๋ก๋ checkbox type์ ์ดํด๋ณด์.
checkbox๋ ์ฌ๋ฌ ๊ฐ์ ์ ํ์ง ์ค ์ฌ๋ฌ ๊ฐ๋ฅผ ์ ํ ๊ฐ๋ฅํ input ํ๊ทธ์ type์ด๋ค.
<form action="" method="get">
<input type="checkbox" id="ko" name="lang" value="ko" />
<label for="ko">ํ๊ตญ์ด</label>
<input type="checkbox" id="en" name="lang" value="en" />
<label for="en">์์ด</label>
<input type="checkbox" id="jp" name="lang" value="jp" />
<label for="jp">์ผ๋ณธ์ด</label>
<button>submit</button>
</form>
์ ์ฝ๋๋ฅผ ๋ณด๋ฉด ์๊ฒ ์ง๋ง radio ํ๊ทธ์ ์ฌ์ฉ๋ฒ์ด ์์ ํ ๋์ผํ๋ค.
๋ค๋ฅธ ์ ์ ๋ค์ค ์ ํ์ด ๊ฐ๋ฅํ๋ค๋ ์ ์ด๋ค.
select๋ ๋ค์ํ option ์ค ํ๋๋ฅผ ์ ํํ ์ ์๋๋ก ํ๋ค์ด ๋ฉ๋ด๋ฅผ ๋ง๋ค์ด ์ค๋ค.
ํ๋ค์ด ๋ฉ๋ด์๋ option ํ๊ทธ๋ฅผ ์ฌ์ฉํ์ฌ ๋ง๋ ํ ์คํธ๋ค์ด ํ์๋๋ค.
<form action="" method="get">
<label for="langSelect">์ธ์ด</label>
<select name="lang" id="langSelect">
<option value="ko">ko</option>
<option value="en">en</option>
<option value="jp">jp</option>
</select>
<select multiple name="skill" id="skill">
<option value="html">html</option>
<option value="css">css</option>
<option value="js">js</option>
</select>
<button type="submit">submit</button>
</form>
multiple ์์ฑ์ ์ถ๊ฐํ๋ฉด cmd๋ ctrl์ ๋๋ฅธ์ฑ๋ก ๋ค์ค ์ ํ์ด ๊ฐ๋ฅํ๋๋ก ๋ง๋ค ์๋ ์๋ค.
์ผ๋ฐ์ ์ธ inputํ๊ทธ๊ฐ ํ ์ค ์ ๋์ ์ ๋ ฅ์ ๋ฐ์๋ผ ์ ์๋ค๋ฉด, textarea๋ ์ฌ๋ฌ ์ค์ input์ ๋ฐ์ ์ ์๋ค.
</form>
<label for="field">field</label>
<textarea
name=""
id="field"
cols="30"
rows="10"
placeholder="์๊ธฐ์๊ฐ๋ฅผ ์
๋ ฅํ์ธ์"
></textarea>
cols์ rows ์์ฑ์ ์ฌ์ฉํ์ฌ ํ๊ณผ ์ด์ ์ต๋์น๋ฅผ ์ค์ ํ ์ ์๋ค.
๋ํ, placeholder ์์ฑ์ ์ฌ์ฉํ์ฌ ์๋ด ๋ฌธ๊ตฌ๋ฅผ ์ ์ ์๋ ์๋ค.
์ฌํ input๊ณผ ๋ง์ฐฌ๊ฐ์ง๋ก label๊ณผ ์ฐ๊ฒฐ์ ํ ์๋ ์๋ค.
button ํ๊ทธ๋ ์์์๋ถํฐ form, input ํ๊ทธ์ ํจ๊ป ๋ง์ด ์ฐ์ฌ์๋ค.
button ํ๊ทธ๋ฅผ ์ฌ์ฉํ ๋๋ ํญ์ type attr๋ฅผ ๋ฐ๋์ ์จ์ค์ผํ๋ค.
attr์๋ 3๊ฐ์ง๊ฐ ์๋ค.
์ฒซ ์งธ, submit์ด๋ค. ๋ณดํต form์ ์ ์ถํ ๋ ์ฌ์ฉํ๋ค. ๊ฐ์ฅ ๋ง์ด ์ฌ์ฉํ๋ ์์ฑ์ด๊ธฐ๋ ํ๋ค.
๋ ์งธ, button์ด๋ค. ๋ณดํต JS์ ์ฐ๊ฒฐํด์ ๋๋ ์ ๋ JS ์ฝ๋๊ฐ ์คํ๋๊ฒ ํ๋ ๋ฑ์ ๊ธฐ๋ฅ์ ๊ตฌํํ ๋ ์ฐ์ธ๋ค.
์ ์งธ, reset์ด๋ค. form, input์ ๊ธฐ์ ํ ๋ด์ฉ์ ์ ๋ถ ๋ฆฌ์ ํด๋ฒ๋ฆฌ๋ ๊ธฐ๋ฅ์ ๊ตฌํํ๋ค.
<form action="">
<input type="text" />
<!--type attr์ ๊ผญ ์ ์ด์ค์ผํ๋ค!-->
<!--form์ ์ ์ถํ ๋ ์ฌ์ฉ-->
<button type="submit">๋ฒํผ1</button>
<!--๋๋ ์ ๋ js ์คํ๋๊ฒ ํ๋ ๋ฑ์ ๊ธฐ๋ฅํ ๋ ์ด๋ค.-->
<button type="button">๋ฒํผ2</button>
<!--form ๋ฑ์ ๋ฆฌ์
ํ๊ณ ์ถ์ ๋ ์ฌ์ฉ-->
<button type="reset">๋ฒํผ3</button>
</form>
๋ฐ์ดํฐ๋ฅผ ๋ด์ ํ๋ฅผ ํ ์ด๋ธ์ด๋ผ๊ณ ํ๋ค.
๋ฆฌ์คํธ์ ๋น์ทํ ๋๋์ผ๋ก ํ๊ทธ๋ฅผ ์ฌ์ฉํ๋ค๊ณ ์๊ฐํ๋ฉด ์ฝ๋ค.
table์ ๋ง๋ค๊ฒ ๋ค๊ณ ํ๊ณ , tr, th, td ํ๊ทธ๋ฅผ ํ์ฉํ์ฌ ์์์์๋ฅผ ์์ฑํ๋ค.
tr == table row๋ฅผ ์๋ฏธํ๋ค. ์ฆ, ํ ์ด๋ธ์ ํ ํ์ ์์ฑํด์ฃผ๋ฉฐ, ์ด ํ๊ทธ ์์ ์์ฑํ๋ ๊ฒ๋ค์ ๋ชจ๋ ํ ํ์ ํ์๋๋ค.
th == table head๋ฅผ ์๋ฏธํ๋ค. ์ด ํ๊ทธ ์์ ์์ฑํ๋ ๊ฒ์ bold์ฒด๋ก ์์ฑ๋๋ฉฐ, ํด๋น ํ์ด๋ ์ด์ ๋ํํ๋ ๊ฒ์ ์์ฑํ ๋ ์ฌ์ฉํ๋ค. ๋ฐ๋ผ์ ์ฒซ๋ฒ์งธ tr์์ th๋ฅผ ๋ช ๊ฐ ์ ์ํ๋์ ๋ฐ๋ผ ๋ค์ ํ์ ์์ฑํ ์ฝ๋์ ๊ฐ์๊ฐ ์ ํด์ง๊ฒ ๋ ๊ฒ์ด๋ค.
td == table data๋ฅผ ์๋ฏธํ๋ค. ํ๋์ ์ ์ ๋ค์ด๊ฐ ๋ฐ์ดํฐ๋ฅผ ์ ๋ ฅํ๋ ํ๊ทธ์ด๋ค.
<table>
<thead>
<tr>
์์
<th>ID</th>
<th>์ด๋ฆ</th>
<th>๊ฐ๋ฐ๋ถ์ผ</th>
</tr>
</thead>
<tbody>
<tr>
<td>00001</td>
<td>๋ฐ๊ธฐ์</td>
<td>ํ๋ก ํธ์๋</td>
</tr>
<tr>
<td>00002</td>
<td>๊น์๋ฌด๊ฐ</td>
<td>ํ์คํ</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>2์์ด๋</td>
<td>2๋ช
</td>
<td>2์ง๊ตฐ</td>
</tr>
</tfoot>
</table>
์ ์ฝ๋๋ฅผ ๋ณด๋ฉด thead, tbody, tfoot ํ๊ทธ๊ฐ table ๊ด๋ จ ํ๊ทธ๋ค์ ๊ฐ์ธ๊ณ ์๋ ๊ฒ์ ํ์ธํ ์ ์๋ค.
์ด๋ค์ ๋ธ๋ผ์ฐ์ ๊ฐ html ํ์ผ์ ์ฝ์ ๋ ์ด๋ค ๋ถ๋ถ์ด head์ธ์ง ์ด๋ค ๋ถ๋ถ์ด body์ธ์ง ์ด๋ค ๋ถ๋ถ์ด foot์ธ์ง ๋ ๋ช
ํํ๊ฒ ๊ตฌ๋ถํ ์ ์๊ฒ ๋ง๋ค์ด์ค๋ค.
๋ณดํต thead์ ๊ฒฝ์ฐ header ์ญํ ์ ํ๋ th๊ฐ ๋ชจ์ฌ ์๋ ๋ถ๋ถ์ ๊ฐ์ผ๋ค.
tbody์ ๊ฒฝ์ฐ body ์ญํ ์ ํ๋ td๊ฐ ๋ชจ์ฌ ์๋ ๋ถ๋ถ์ ๊ฐ์ผ๋ค. ๋ฌผ๋ก ํด๋น ํ์์์ ์ญํ ์ ๋ฐ๋ผ th๊ฐ ๊ฐ์ธ์ง ์๋ ์๋ค!
tfoot์ ๊ฒฝ์ฐ ์ด ํฉ๊ณ ๊ฐ์ ์ต์ข
๊ฒฐ๋ก ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ๋ ์ฌ์ฉํ๋ค.
์๋์ ๊ฐ์ ์๊ฐํ ํ ์ด๋ธ์ ์์ ๋ก ๋ง๋ค์ด๋ณด์๋ค.
์ดํดํ๋๋ฐ ํฐ ๋์์ด ๋์์ผ๋ฏ๋ก ๊ธธ๋๋ผ๋ ํ๋ฒ์ฏค ๋ณด๋๊ฒ ์ข์ ๊ฒ ๊ฐ๋ค.
CSS ๋ถ๋ถ์ ๋ฌด์ํ๊ณ HTML ํํธ๋ง ๋ณด๋๋ก ํ์.
<table>
<thead>
<tr>
<th></th>
<th scope="col">์</th>
<th scope="col">ํ</th>
<th scope="col">์</th>
<th scope="col">๋ชฉ</th>
<th scope="col">๊ธ</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1๊ต์</th>
<td rowspan="2" class="html-css-basic">์์ด๋ณด HTML & CSS</td>
<td class="coding">๋ชจ๊ฐ์ฝ</td>
<td rowspan="2" class="html-css-basic">์์ด๋ณด HTML & CSS</td>
<td class="coding">๋ชจ๊ฐ์ฝ</td>
<td rowspan="2" class="html-css-basic">์์ด๋ณด HTML & CSS</td>
</tr>
<tr>
<th scope="row">2๊ต์</th>
<td rowspan="2" class="js-skillup">JavaScript ์คํฌ์
</td>
<td rowspan="2" class="js-skillup">JavaScript ์คํฌ์
</td>
</tr>
<tr>
<th scope="row">3๊ต์</th>
<td class="js-basic">JavaScript ์์๋ฐ</td>
<td class="js-basic">JavaScript ์์๋ฐ</td>
<td class="js-basic">JavaScript ์์๋ฐ</td>
</tr>
<tr>
<th scope="row" colspan="6">์ ์ฌ ์๊ฐ</th>
</tr>
<tr>
<th scope="row">4๊ต์</th>
<td class="sass-basic">SASS ๊ธฐ์ด๋ฐ</td>
<td rowspan="2" class="portfolio">
HTML & CSS<br />
ํฌํธํด๋ฆฌ์ค๋ฐ
</td>
<td rowspan="2">Open Seminar</td>
<td rowspan="2" class="portfolio">
HTML & CSS<br />
ํฌํธํด๋ฆฌ์ค๋ฐ
</td>
<td class="sass-basic">SASS ๊ธฐ์ด๋ฐ</td>
</tr>
<tr>
<th scope="row">5๊ต์</th>
<td class="coding">๋ชจ๊ฐ์ฝ</td>
<td class="coding">๋ชจ๊ฐ์ฝ</td>
</tr>
</tbody>
</table>
์ฐ์ , ์๊ฐํ์์๋ ์์ผ์ด ์ค์ํ ์งํ๋ก ์ฌ์ฉ๋๋ฏ๋ก ์์ผ ํ์ tr๋ก ์์ฑํ ํ ๊ฐ๊ฐ์ ์์ผ์ th๋ก ์ฒ๋ฆฌํด์ฃผ์๋ค. ๋ํ, ์ด๋ค์ ์งํฉ์ด ํ
์ด๋ธ์ ํค๋ ์ญํ ์ ํ ๊ฒ์ด๋ฏ๋ก thead๋ก ๊ฐ์ธ์ฃผ์๋ค. ์ด 6๊ฐ์ ์
์ ์์ฑํ์ผ๋ฏ๋ก ๋ค์ ํ๋ถํฐ๋ 6๊ฐ์ ์
์ ๋ง๋ค์ด์ผ ํ
์ด๋ธ์ด ์ ์์ ์ผ๋ก ๋ง๋ค์ด์ง ๊ฒ์ด๋ค.
๋ค์ ํ์ผ๋ก ๋์ด๊ฐ๊ธฐ ์ ์ scope๋ผ๋ attr์ ๋ณผ ์ ์๋ค. ์ด ์์ฑ์ ํค๋๊ฐ ์ด๋ค ๋ฐฉํฅ์ ๋ํํ๋์ง๋ฅผ ์๋ ค์ค๋ค. value๊ฐ col์ธ ๊ฒ์ ๋ณด๋ฉด ํด๋น ์ด์ ๋ํํ๋ ํค๋๋ผ๋ ๊ฒ์ ์ ์ ์๋ค.
๋ค์์ผ๋ก๋ ๊ฐ ๊ต์์ ๋ง๋ ์๊ฐํ๋ฅผ ๋ง๋ค ๊ฒ์ด๋ฏ๋ก ๋ณธ๊ฒฉ์ ์ธ ๋ฐ์ดํฐ๊ฐ ์์ฑ๋ ๊ณณ์ด๋ผ ์๊ฐํ์ฌ tbody๋ฅผ ์ฌ์ฉํด ๊ฐ์ธ์ฃผ์๋ค. ๋ช ๊ต์์ธ์ง ์๋ ค์ฃผ๋ ๋ถ๋ถ์ ๊ทธ ํ์ ๋ํํ๋ ํค๋ ์ญํ ์ ํ๋ฏ๋ก thํ๊ทธ๋ฅผ ์ฌ์ฉํ์๊ณ , scope attr์ value๋ฅผ row๋ก ์ค์ ํ๋ค.
์์์ผ์๋ 1-2๊ต์๊ฐ ๊ฐ์ ๊ณผ๋ชฉ์ด๋ฏ๋ก ๋ ๊ฐ ํ์ ๊ณต๊ฐ์ ์ฐจ์งํ๊ฒ ๋ง๋ค์ด์ค์ผํ๋๋ฐ, ์ด๋ฐ ์
๋ณํฉ ๋์์ ์ง์ํ๋ attr์ด ๋ฐ๋ก rowspan, colspan์ด๋ค. rowspan์ 2๋ก ์ค์ ํ์ฌ ํ 2์นธ์ ํ๋๋ก ๋ณํฉํ ๊ฒ์ ํ์ธํ ์ ์๋ค.
์ด๋ ๊ฒ ์
๋ณํฉ์ ์งํํ๊ฒ ๋๋ฉด, ๋ค์ ํ์์ ์์ฑํ๋ ๋ฐ์ดํฐ๋ค์ด ์๋์ ์ผ๋ก ๋ฐ๋ ค๋๊ฒ ๋๋ค. ๋ฐ๋ผ์ ์
๋ณํฉ์ ์งํํ ํ์ ๋ค์ ํ์ ์์ฑํ ๋๋ ๋ณํฉ๋ ์
๊ฐ์๋งํผ ๋ฐ์ดํฐ๋ฅผ ๋นผ๊ณ ์์ฑํด์ผ ์ ์์ ์ธ ๋ชจ์์ด ๋์จ๋ค.
์๋ฅผ๋ค์ด, 2๊ต์ ํํธ๋ฅผ ๋ณด๋ฉด, 1๊ต์์์ rowspan์ ์ฌ์ฉํด 2๋ฒ์งธ ํ์ ์ด๋ฏธ ์ ์ ํ๊ณ ์์ผ๋ฏ๋ก ์ด ๊ณต๊ฐ์ ์ฌ์ฉํ ์ ์๊ฒ ๋๋ค. ๋ฐ๋ผ์ ๋ฐ์ดํฐ๊ฐ 2๊ฐ๋ง ์์ฑ๋ ๊ฒ์ ๋ณผ ์ ์๋ค.
์ด๋ฐ ์์ผ๋ก rowspan, colspan์ด ์ฌ์ฉ๋ ๊ฒฝ์ฐ ๋ฐ์ดํฐ ๊ฐ์๋ฅผ ์๋ง๊ฒ ๊ณ์ฐํ์ฌ ์์ฑํด์ผํ๋ค.
์ ์ฌ์๊ฐ์ ๊ฒฝ์ฐ ํ๋์ ํ์ ์ ๋ถ ์ฌ์ฉํ๊ณ ์์ผ๋ฏ๋ก, ํด๋น ํ์ ๋ชจ๋ ์ด์ ๋ณํฉํ๋ฉด ๋๋ค. ์ด ๋ณํฉ์ ์์ ๋งํ๋ฏ colspan์ ์ฌ์ฉํ๋ฉด ๋๋ค. thead์์ 6๊ฐ์ th๋ฅผ ๋ง๋ค์์ผ๋ฏ๋ก ๋ชจ๋ ์นธ์ ํตํฉํ๋ ค๋ฉด colspan์ 6์ผ๋ก ์ค์ ํ๋ฉด ๋ ๊ฒ์ด๋ค.
img ํ๊ทธ๋ ์ด๋ฏธ ์์์ ์ถฉ๋ถํ ๋ค๋ค์ผ๋ฏ๋ก audio, video, iframe๋ฅผ ์ดํด ๋ณด์.
์ฐ์ , audio๋ ์์ฑ ํ์ผ์ ์ ๋ ฅํ ๋ ์ฐ๋ ํ๊ทธ์ด๋ค.
๊ธฐ๋ณธ ํํ๋ ์๋์ ๊ฐ๋ค.
<audio src=""></audio>
source attr์ ์๋๊ฒฝ๋ก๋ฅผ ์
๋ ฅํด์ ํ์ผ์ ๋ถ๋ฌ์ค๋ฉด ๋๋ค.
๋ค๋ง, ์ด ์ํ๋ก ํ๊ทธ๋ฅผ ์
๋ ฅํด๋ ์น ํ์ด์ง์๋ ์ ํ ๋ณด์ด์ง์๊ณ ๋ค๋ฆฌ์ง๋ ์๋๋ค.
์ด ๋ ํ์ํ ๊ฒ์ด controls attr์ด๋ค.
์ด ์์ฑ์ ์ฌ์ฉํ๋ฉด ๋ณผ๋ฅจ ์กฐ์ , ์ฌ์ ์๊ฐ ๋ฑ์ ํ์ธ ํ ์ ์๋ค.
<audio src="" controls></audio>
๋ง์ฝ ์ด๋ฐ ๋ณผ๋ฅจ ์กฐ์ , ์ฌ์ ์๊ฐ ๊ฐ์ ํ์๋ฅผ ๋ณด๊ณ ์ถ์ง์๊ณ , ์ฌ์์ ํ๊ณ ์ถ๋ค๋ฉด
autoplay attr์ ์ฌ์ฉํ๋ฉด ๋๋ค.
<audio src="" autoplay></audio>
์ด๋ฐ ์ค๋์ค ํ์ผ์ ๊ณ์ํด์ ์ฌ์ํ๊ณ ์ถ๋ค๋ฉด loop attr์ ์ฌ์ฉํ๋ฉด ๋๋ค.
<audio src="" loop></audio>
์ด๋ ๊ฒ ํ๋์ ํ๊ทธ๋ก ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ๋ ์์ง๋ง, ์ฌ๋ฌ๊ฐ์ ํ์ผ์ ์ฝ์
ํ๋ ๋ฐฉ๋ฒ๋ ์๋ค.
์๋์ ๊ฐ์ด ์์ฑํ๋ ๊ฒ์ด ๊ทธ ๋ฐฉ๋ฒ์ด๋ค.
<audio>
<source src="./assets/audios/kimbug.wav" type="audio/wav" />
<source src="./assets/audios/kimbug.mp3" type="audio/mpeg" />
<source src="./assets/audios/kimbug.ogg" type="audio/ogg" />
<p>๋น์ ์ ๋ธ๋ผ์ฐ์ ๋ฅผ ๋ฒ๋ฆฌ์๊ณ ํฌ๋กฌ์ ์ฌ์ฉํ์๋๊ฒ ์ด๋จ๊น์?</p>
</audio>
์ด ๋ฐฉ๋ฒ์ ์ด๋ค ํ์ผ ํ์ฅ์๋ฅผ ์ง์ํ์ง ์๋ ๋ธ๋ผ์ฐ์ ์์ ๋์์ ์ํํ๊ฒ ํ๊ธฐ ์ํ ๊ฒ์ผ๋ก, ํน์ ๋ธ๋ผ์ฐ์ ์์ ์ง์ํ์ง ์๋ ํ์ผ ํ์ฅ์๊ฐ ์๋ค๋ฉด source ํ๊ทธ์ ๋งํฌ๋์ด ์๋ ํ์ผ๋ค ์ค ์ง์ํ๋ ํ์ผ์ ์ฌ์ํ๋ค.
๋ํ, ๋ฐ๋์ type attr์ ๊ฐ์ด ์ฌ์ฉํด์ผํ๋๋ฐ, "audio/ํ์ผ ํ์ฅ์ ์ฝ๋" ๋ฅผ ์์ฑํด์ฃผ๋ฉด ๋๋ค.
ํ์ผ ํ์ฅ์ ์ฝ๋์ ๊ฒฝ์ฐ ํ์ฅ์๋ง๋ค ์์ดํ๋ ๊ฒ์ํด์ ์ ๋ ๊ฒ์ด ์ข์ ๊ฒ ๊ฐ๋ค.
๋ง์ฝ, ์ด๋ ๊ฒ ์ ์ด๋์ ํ์ผ๋ค ์ค ํด๋น ๋ธ๋ผ์ฐ์ ์์ ์ง์ํ๋ ํ์ผ ํ์ฅ์๊ฐ ๋จ ํ๋๋ ์๋ค๋ฉด, ์ ์ฝ๋ ์์์ฒ๋ผ ๋ค๋ฅธ ํ๊ทธ๋ฅผ ์ฌ์ฉํ์ฌ ์๋ด ๋ฌธ๊ตฌ๋ฅผ ๋ณด์ด๋๋ก ํ ์ ์๋ค.
๋ค์์ผ๋ก๋ video ํ๊ทธ์ด๋ค.
video ํ๊ทธ๋ audio ํ๊ทธ์ ์ฌ์ฉ๋ฒ์ด ์ฌ์ฉ๋ฒ์ด ์์ ํ ๊ฐ๋ค.
<video src="" controls></video>
<video autoplay>
<source src="./assets/videos/kimbug.mp4" type="video/mp4" />
<source src="./assets/videos/kimbug.mov" type="video/mp4" />
<p>๋น์ ์ ๋ธ๋ผ์ฐ์ ๋ฅผ ์
๋ฐ์ดํธ ํ๋๊ฒ ์ด๋จ๊น์?</p>
<a href="https://browsehappy.com/">๋ธ๋ผ์ฐ์ ์
๋ฐ์ดํธ ํ๊ธฐ</a>
</video>
์ฌ๊ธฐ์ ๋์ฌ๊ฒจ ๋ณผ ์ ์ source ํ๊ทธ๋ฅผ ๊ฐ์ผ video์ autoplay attr์ ์ฌ์ฉํ๋ค๋ ๊ฒ์ด๋ค. ์ด ๋ฐฉ๋ฒ์ audio ํ๊ทธ์๋ ์ฌ์ฉ๋ฒ์ด ๊ฐ์ผ๋ ๋์ฌ๊ฒจ ๋ณด์.
๋ค์์ผ๋ก๋ iframe ํ๊ทธ์ด๋ค.
์ด ํ๊ทธ๋ html ์์ ๋ ๋ค๋ฅธ html์ ์๋ฒ ๋ํ ๋ ์ฐ์ธ๋ค.
<iframe src="" frameborder=""></iframe>
source attr์ ๋ณด์ฌ์ฃผ๊ณ ์ถ์ url์ด๋, html ํ์ผ์ ์๋ ๊ฒฝ๋ก๋ฅผ ์ ์ผ๋ฉด ๋๋ค.
๋ณดํต์ iframe์ ์ง์ ์์ฑํ๊ธฐ๋ณด๋ค ์ ํ๋ธ ๊ฐ์ ์์์ iframe ์ฝ๋๋ฅผ ๊ฐ์ ธ์์ ์ฌ์ฉํ๋ค.
์๋ฅผ๋ค์ด ์ด๋ ํ ์ ํ๋ธ ์์์ iframe ์ฝ๋๋ฅผ ๊ฐ์ ธ์ค ๊ฒฐ๊ณผ๋ ์๋์ ๊ฐ๋ค.
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/0_pvO4oDI64"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
๋ง์ ์์ฑ๋ค์ด ์ด๋ฏธ ์ค์ ๋์ด ์๋ ๊ฒ์ ๋ณผ ์ ์๋ค.
์ ์ฝ๋๋ ์์๋ง์ ๋์์ค๋ค.
์ด๋ฒ์๋ ์ ์ ํ๊ฒ ํ์ฉ๋๋ ํ๊ทธ๋ฅผ ๋ช ๊ฐ์ง ์ดํด๋ณด๋๋ก ํ๊ฒ ๋ค.
์ฒซ ์งธ, abbr ํ๊ทธ์ด๋ค.
abbreviation์ ์๋ฏธํ๋ฉฐ ๋ฒ์ญํ๋ฉด ์ฝ์๋ผ๋ ์๋ฏธ๋ฅผ ๊ฐ์ง๋ค.
์ด๋ค ์ฝ์์ ๋ํ ์ค๋ช ์ ํ๊ณ ์ถ์ ๋ ๊ทธ ์ฝ์๋ฅผ ์ด ํ๊ทธ๋ก ๊ฐ์ธ์ฃผ๋ฉด ๋๋ค.
<p>
๋...ํน์
<abbr title="Attention Deficit Hyperactivity Disorder">ADHD</abbr>๋?
</p>
๋ฐ๋์ title ์์ฑ์ ๊ฐ์ด ์ฌ์ฉํด์ค์ผํ๋ฉฐ, ์ฝ์์ ํ ๋ค์์ ์ ์ด์ค๋ค.
ํ๊ทธ๋ก ๊ฐ์ธ์ง ๋ถ๋ถ์ ์ ์ ์ผ๋ก ๋ฐ์ค์ด ์ณ์ง๋ฉฐ, ๋ง์ฐ์ค๋ฅผ ์ฌ๋ฆฌ๋ฉด title์ ์ ์ด๋์ ํ ๋ค์์ด ๋ณด์ด๊ฒ ๋๋ค.
๋ ์งธ, address ํ๊ทธ์ด๋ค. ์ฃผ๋ก ์ฐ๋ฝ์ฒ์ ๊ดํ ์ ๋ณด๋ฅผ ์ ๋ ฅํ ๋ ์ฐ๋ ํ๊ทธ์ด๋ค.
์ฐ๋ฝ์ฒ๋ผ๊ณ ํ๋ฉด ๋ค์๊ณผ ๊ฐ์๊ฒ ์์ ๊ฒ์ด๋ค.
- (๋ฌผ๋ฆฌ์ ์ฃผ์) ๋ฒ์ง์, ์๋, ๊ฒฝ๋..
- URL
- ์ ํ๋ฒํธ
- SNS
<address>
<h1>๋ฐ๊ฐ๋๋ฐ</h1>
<a href="https://youtube.com/c/kimbug">https://youtube.com/c/kimbug</a>
</address>
์ด๋ ๊ฒ address ํ๊ทธ ์์ ์ ์ ํ ์คํธ๋ค์ ํฐํธ๊ฐ ๊ธฐ์ธ์ด์ ธ์ ๋์ค๊ฒ ๋๋ค.
์ ์งธ, pre, code ํ๊ทธ์ด๋ค. pre๋ preformatted text๋ฅผ ์๋ฏธํ๋ค.
์ฆ, ํฌ๋งท๋๊ธฐ ์ ๋ ๊ฒ์ ํ ์คํธ๋ฅผ ๋งํ๋ค. code๋ ๋ง ๊ทธ๋๋ก ์ฝ๋๋ฅผ ์๋ฏธํ๋ฉฐ, ๋ฌด์กฐ๊ฑด pre ํ๊ทธ์ ๊ฐ์ด ์จ์ผํ๋ ๊ฒ์ ์๋๋ค.
์ฃผ๋ก ์ฝ๋๋ฅผ ๋ณด์ฌ์ฃผ๊ณ ์ถ์ ๋ ์ฌ์ฉํ๋ค.
<p>์๋ฅผ๋ค์ด, pํ๊ทธ๋ ์ํฐ๋ฅผ ์จ๋ ์น์ ํ์๋์ง์์ง๋ง</p>
<pre>
๊ทธ๋ฅ ์ด๋ ๊ฒ ์ฐ๋ฉด
๋ด๊ฐ html์ ์์ฑํ ๊ทธ๋๋ก
์ถ๋ ฅ์ด ๋๋ค.
์ฌ์ง์ด ํญ ํค ๋ง์ ๊ตฌํ์ด ๋จ.
ใ
ใ
ใด ใ
ใ
ใ
ใ
ใ
ใ
ใด ใ
ใ
<p>ใ
ใ
ใด ใ
ใ
ใ
ใ
ใ
ใ
ใด ใ
ใ
</p>
์ด๋ ๊ฒ ์จ๋ pre ๋ด๋ถ์์๋ ๊ทธ๋๋ก ์ถ๋ ฅ
<code>
console.log('hello ki0');
let ki0 = 100;
</code>
</pre>
<code> console.log('hello ki0'); let ki0 = 100; </code>
์ ์ฝ๋์ฒ๋ผ p ํ๊ทธ๋ ์ํฐ๋ฅผ ์ฝ๋์ ์๋ฌด๋ฆฌ ์
๋ ฅ์ ํด๋ ๊ฒฐ๊ตญ ์น ํ์ด์ง์ ๋ณด์ด๋ ๊ฒ์ ํ ์ค๋ก ๋ ํ
์คํธ์ธ๋ฐ, pre ํ๊ทธ๋ฅผ ์ฌ์ฉํ๋ฉด ์ด๋ฐ ํํ์ด ์ ๋ถ ์น ํ์ด์ง์ ๊ทธ๋๋ก ๋ณด์ด๊ฒ ๋๋ ๊ฒ์ด๋ค. ๋ํ ํฐํธ์๋ ๋ณํ๊ฐ ์๊ธด๋ค.
code ํ๊ทธ๋ pre ์์ ์์ฑํ๊ฒ ์๊ณ , ๋ฐ์ ์์ฑํ๊ฒ ์๋ค.
๋์ ์ฐจ์ด์ ์ ์ํฐ๋ ํญ ๊ฐ์ ์ฝ๋ ๊ฐ์์ฑ์ ๋์ฌ์ฃผ๋ ๊ฒ๋ค์ด ์ ์ฉ์ด ๋๋ ์๋๋์ด๋ค.
pre ํ๊ทธ ์์ ์์ฑํ code๋ ์
๋ ฅํ ํ
์คํธ ๊ทธ๋๋ก ์ถ๋ ฅ๋๋ ๋ฐ๋ฉด, ๋ฐ์ ์์ฑํ code๋ p ํ๊ทธ์ฒ๋ผ ์๋ฌด๋ฆฌ ์ํฐ๋ฅผ ์
๋ ฅํด๋ ํ๋์ ์ค๋ก ๋ณด์ด๊ฒ ๋๋ค.
์๋ฌด๊ฒ๋ ์์ฑํ์ง ์์ ์ํ์ HTML ์ฝ๋๋ฅผ ๋ณด๋ฉฐ, ์ด๋ค ๋ถ๋ถ์ด ์ด๋ค ์ญํ ์ ํ๋์ง ์ดํด๋ณด์.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="Rki0" />
<meta name="keywords" content="Rki0, html ๊ธฐ์ด, html ๊ณต๋ถ" />
<meta
name="description"
content="์ด ํ์ด์ง๋ ๋ฐ๊ธฐ์์ ํ๋ก ํธ์๋ ๊ธฐ์ด ๊ณต๋ถ๋ฅผ ์ํ ์คํ ์ฌ์ดํธ์
๋๋ค."
/>
<title>HTML์ ๊ธฐ๋ณธ ๊ณจ๊ฒฉ ๊ณต๋ถ</title>
<link rel="stylesheet" href="./style.css" />
<link
href="https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css"
rel="stylesheet"
type="text/css"
/>
<style>
h1 {
font-size: 3em;
}
</style>
</head>
<body>
<h1>Ki0</h1>
<p>์๋
ํ์ธ์ ํฐํธ์
๋๋ค.</p>
<script src=""></script>
<script>
let name = document.querySelector("h1");
name.addEventListener("click", function (event) {
this.innerText = "hi";
});
</script>
</body>
</html>
๊ฐ์ ๋จผ์ ๋ณด๊ฒ๋๋ ํ๊ทธ๋ DOCTYPE์ด๋ค. ์ด ํ๊ทธ๋ ๋ค์ ํ์ผ ํ์์ ๋ถ์ฌ์ค์ผ๋ก์ ์ด ํ์ผ์ด ์ด๋ ํ ๊ธฐ๋ฅ์ ํ ํ์ผ์ธ์ง๋ฅผ ์๋ ค์ค๋ค.
Document Type Declaration == DTD ์ ์ธ == ๋ฌธ์ ํ์ ์ ์ธ ์ด๋ผ๊ณ ๋ ํ๋ค.
์ ์ฝ๋์์๋ html์ด๋ผ๊ณ ์ ์์ผ๋ฏ๋ก "์ด ๋ฌธ์๋ HTML5(๊ฐ์ฅ ์ต์ ๋ฒ์ )์ผ๋ก ์์ฑ๋ ๋ฌธ์๋๊น ์ ๋ ๋๋ง ํด์ค~"๋ผ๊ณ ๋ธ๋ผ์ฐ์ ์๊ฒ ์๋ ค์ฃผ๋ ๊ฒ์ด๋ค.
๋ค์์ผ๋ก๋, html ํ๊ทธ์ด๋ค. ์ด ํ๊ทธ๋ถํฐ html ๋ฌธ์๊ฐ ์์๋๋ค๋ ๊ฒ์ ์๋ ค์ค๋ค.
์ด ํ๊ทธ ์์๋ head, body ํ๊ทธ๊ฐ ํฐ ๋ฉ์ด๋ฆฌ๋ก ๋ค์ด๊ฐ๋ค.
head ํ๊ทธ๋ ๋ง ๊ทธ๋๋ก ๋ฌธ์์ ๋๋ฅผ ๋ด๋นํ๋ค. ์ด๋ค ๋ฌธ์๊ฐ ์ฐธ์กฐ๋์๊ณ , ์ด๋ค ๋ฐฉ์์ผ๋ก ํ๋ฉด์ ์ ์ํ๊ณ , ์น ํ์ด์ง ์ ๋ชฉ์ ๋ญ๊ณ ๋ฑ๋ฑ...๋ง์ ์ ๋ณด๋ฅผ ํฌํจํ๋ค.
head ๋ด๋ถ์ ๋ค์ด๊ฐ๋ ํ๊ทธ๋ค์ ์ดํด๋ณด๋๋กํ์.
meta ํ๊ทธ๋ ๋ณดํต ์์ฑ์ผ๋ก name = "๋ฉํ๋ฐ์ดํฐ ์ข
๋ฅ, ์ฑ๊ฒฉ", content = "๋ฉํ๋ฐ์ดํฐ ๊ฐ" ์ ์
๋ ฅ๋ฐ๋๋ค.
์๋ ์ฝ๋๋ฅผ ํตํด ๋ ์์ธํ ์ดํด๋ณด๋๋ก ํ๊ฒ ๋ค.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="Rki0" />
<meta name="keywords" content="Rki0, html ๊ธฐ์ด, html ๊ณต๋ถ" />
<meta
name="description"
content="์ด ํ์ด์ง๋ ๋ฐ๊ธฐ์์ ํ๋ก ํธ์๋ ๊ธฐ์ด ๊ณต๋ถ๋ฅผ ์ํ ์คํ ์ฌ์ดํธ์
๋๋ค."
/>
viewport๋ ํ๋ฉด ํฌ๊ธฐ์ด๋ค. ์ฆ, ํ๋ฉด ์ ์ฒด๊ฐ viewport์ ์ฌ์ด์ฆ๋ผ๊ณ ์๊ฐํ๋ฉด ๋๋ค.
์ต๊ทผ์๋ ๋ธ๋ผ์ฐ์ ๋ฅผ ๋ณด๋ ๊ธฐ๊ธฐ์ ํฌ๊ธฐ๊ฐ ๋ค์ํด์ง๋ค๋ณด๋ viewport๊ฐ ๋งค์ฐ ์ค์ํ ์์ฑ์ด ๋์๋ค. ์ด๋ ๋ฐ์ํ ์ฌ์ดํธ๋ฅผ ๋ง๋๋๋ฐ ๋์์ ์ค๋ค!
width=device-width๋ width๋ฅผ ์ฌ์ฉ์ ํ๋ฉด์ ๊ฐ๋ก ์ฌ์ด์ฆ์ ๋ง์ถ๋ผ๋ ๋ป์ด๊ณ ,
initial-scale=1.0๋ ์๋ ์ฌ์ด์ฆ ๋น์จ๋ก ๋ณด์ฌ๋ฌ๋ผ๋ ๋ป์ด๋ค.
keywords ์์ฑ์ content์ ์์ฑ๋ ๊ฒ๋ค์ ๋๊ตฐ๊ฐ๊ฐ ๊ฒ์์ ํ๊ฒ ๋ ์ ์ฐ๋ฆฌ์ ํ์ด์ง๋ฅผ ๋ณด์ด๋๋ก ์ ๋ํ ์ ์๋ ๊ธฐ๋ฅ์ด ์๋ค.
description์ ๋ง๊ทธ๋๋ก ์ค๋ช
์ด๋ผ๋ ๋ป์ผ๋ก, ์ด ํ์ด์ง๊ฐ ๋ฌด์์ ๊ดํ ํ์ด์ง์ธ์ง ์ค๋ช
์ ์จ๋ฃ์ ๋ ์ฌ์ฉํ๋ค.
๋ค์์ผ๋ก ๋ณผ ๊ฒ์ title ํ๊ทธ์ด๋ค.
์ด ํ๊ทธ์ ์์ฑํ ๋ด์ฉ์ ์น ํ์ด์ง ํ๊ทธ์ ๋ณด์ธ๋ค.
์น ํ์ด์ง(ํน์ ๋ฌธ์)์ ๋์ ๋ชฉ ์ญํ ์ ํ๋ค.
<title>HTML์ ๊ธฐ๋ณธ ๊ณจ๊ฒฉ ๊ณต๋ถ</title>
์ ๋ชฉ์ด๋ฏ๋ก, ๊ฒ์ ์ต์ ํ(Search Engine Optimization)์ ๋งค์ฐ ์ค์ํ ์ญํ ์ ํ๋ค.
๊ฒ์ ์ต์ ํ๋ฅผ ์ํด title์ ์์ฑํ๋ ์์ํ ํ์ ์๋์ ๊ฐ๋ค.
- ํค์๋์ ๋จ์ ๋์ด์ ์ฌ๋งํ๋ฉด ํผํ์!
- ํ์ด์ง๋ง๋ค ๊ทธ์ ๋ง๊ฒ ๋ณ๊ฒฝํ์!
์๋ฅผ๋ค์ด, ํฌํธํด๋ฆฌ์ค ์ฌ์ดํธ์์ ํ, ์๊ธฐ์๊ฐ, ์ํ ํ์ด์ง ๋ฑ๋ฑ..์ ๋ถ ๋ค๋ฅด๊ฒ ์์ฑํ๋ ๊ฒ์ด๋ค. - ๋ฌด์์ ๊ดํ ๋ด์ฉ์ธ์ง ํ๋ฒ์ ์ ์ ์๊ฒ ์ ์!
๋ค์์ผ๋ก๋ link ํ๊ทธ์ด๋ค.
link ํ๊ทธ๋ css ํ์ผ์ ๋งํฌํ๋๋ฐ ์ฃผ๋ก ์ฌ์ฉ๋๋ค.
ํน์ ๋ณ๋์ font๋ ์์ด์ฝ์ ์ฌ์ฉํ ๋๋ ์ฌ์ฉํ๋ค.
href์ ๊ฐ์ ธ์ค๊ณ ์ํ๋ ํ์ผ์ ์๋ ๊ฒฝ๋ก๋ url์ ์ ๋๋ค.
<link rel="stylesheet" href="./style.css" />
<link
href="https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css"
rel="stylesheet"
type="text/css"
/>
๋ค์์ผ๋ก๋ style ํ๊ทธ์ด๋ค.
์ด ํ๊ทธ๋ html ๋ฌธ์ ๋ด์์ ์ง์ css ์ฝ๋๋ฅผ ์์ฑํ ๋ ์ฌ์ฉํ๋ค.
๋ณดํต์ css ํ์ผ์ ๋ณ๋๋ก ๋ง๋ค์ด์ linkํ๊ธฐ ๋๋ฌธ์ ๊ตณ์ด ์ฌ์ฉํ์ง ์๋๋ค.
link๋ก ์ฐ๊ฒฐํ css ํ์ผ์ ๋ฎ์ด๋ฒ๋ฆฌ๊ธฐ ๋๋ฌธ์ ์ฌ๋งํ๋ฉด ์ฌ์ฉํ์ง๋ง์.
<style>
h1 {
font-size: 3em;
}
</style>
์ด์์ผ๋ก head ํ๊ทธ์ ๋ค์ด๊ฐ๋ ํ๊ทธ๋ค์ ์์๋ณด์๋ค.
๋ค์์ผ๋ก๋ body ํ๊ทธ์ ๋ํด์ ์์๋ณด์. body ํ๊ทธ๋ ์ฒ์๋ถํฐ HTML ๊ณจ๊ฒฉ ์ ๊น์ง ๋ฐฐ์ ๋ ๋ฌธ์ ์์ฑ ํ๊ทธ๋ค์ ์ ๋ ๊ณณ์ผ๋ก,
์น ๋ฌธ์์ ๋ณด์ฌ์ค ๋ชจ๋ ์ปจํ ์ธ ๋ฅผ ๋ด๋ ๊ณณ์ด๋ค.
<body>
<h1>Ki0</h1>
<p>์๋
ํ์ธ์ ํฐํธ์
๋๋ค.</p>
<script src="./js/app.js"></script>
<script>
let name = document.querySelector("h1");
name.addEventListener("click", function (event) {
this.innerText = "hi";
});
</script>
</body>
body ํ๊ทธ ์์ ๋ค์ด๊ฐ๋ ํ๊ทธ ์ค ์์์ ๋ฐฐ์ฐ์ง ์์ script๋ผ๋ ํ๊ทธ๊ฐ ๋ณด์ธ๋ค.
์ด ํ๊ทธ๋ javascript ํ์ผ์ ์ฐ๊ฒฐํ ๋ ์ฐ๋ ํ๊ทธ์ด๋ค.
src ์์ฑ์ ํ์ฉํด์ ํ์ผ์ ์๋ ๊ฒฝ๋ก๋ฅผ ์
๋ ฅํด ๋ถ๋ฌ์ฌ ์๋ ์๊ณ ,
style ํ๊ทธ์ฒ๋ผ html ๋ฌธ์ ๋ด์ ์ง์ ์ ์ ์๋ ์๋ค.
script ํ๊ทธ๋ ๋ค์ด๋ก๋๊ฐ ์๋ฃ๋ ๋๊น์ง html ๋์์ ์ค์งํ๊ณ ์๊ธฐ ๋๋ฌธ์,
head ํ๊ทธ ๋ณด๋ค๋ body ํ๊ทธ์ ๋งจ ์๋์ ์์ฑํ๋ ํธ์ด๋ค.