๐Ÿ’›[๋ถ€์ŠคํŠธ์ฝ”์Šค_์›น UI ๊ฐœ๋ฐœ] 2. HTML ํƒœ๊ทธ

๐Ÿ‘พยท2021๋…„ 1์›” 14์ผ
0

HTML & CSS

๋ชฉ๋ก ๋ณด๊ธฐ
2/20
  • HTML ๋ฒ„์ „์ด ์—…๊ทธ๋ ˆ์ด๋“œ๋˜๋ฉด์„œ ํƒœ๊ทธ๊ฐ€ ์ถ”๊ฐ€๋˜๊ธฐ๋„ ์‚ญ์ œ๋˜๊ธฐ๋„ ํ•จ
  • ํ˜„์žฌ ํƒœ๊ทธ ๊ฐฏ์ˆ˜๋Š” ๋Œ€๋žต 100์—ฌ๊ฐœ ๋„˜์Œ
  • ๋Œ€๋ถ€๋ถ„์˜ ์›นํŽ˜์ด์ง€๋“ค์€ ์‹ค์ œ 20~30์—ฌ๊ฐœ์˜ ํƒœ๊ทธ๋งŒ ์‚ฌ์šฉํ•œ๋‹ค

์ฐธ์กฐํ•  ํƒœ๊ทธ ๋ ˆํผ๋Ÿฐ์Šค๋“ค

https://developer.mozila.org/en-US/docs/Web/HTML/Element
http://html5doctor.com/element-index/
https://www.w3schools.com/tags/default.asp


์ œ๋ชฉ

์ œ๋ชฉ(HEADING) ํƒœ๊ทธ
๋ฌธ์„œ๋‚ด์˜ ์ œ๋ชฉ์„ ํ‘œํ˜„ํ•  ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ํƒœ๊ทธ

<h1>Hello</h1>
  • ์ œ๋ชฉ์˜ ๋ ˆ๋ฒจ์— ๋”ฐ๋ผ <h1>~<h6> ํƒœ๊ทธ๊นŒ์ง€ ์กด์žฌ
  • ์ˆซ์ž๊ฐ€ ๋‚ฎ์„์ˆ˜๋ก ๋” ํฐ ๋‹จ์œ„์˜ ์ œ๋ชฉ์„ ์‚ฌ์šฉ.
  • <h1>ํƒœ๊ทธ๋Š” ๋ณดํ†ต ํ•ด๋‹นํŽ˜์ด์ง€๋ฅผ ๋Œ€ํ‘œํ•˜๋Š” ํฐ์ œ๋ชฉ์œผ๋กœ ์‚ฌ์šฉ๋˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ๋‹ค.

๋‹จ๋ฝ์š”์†Œ

๋‹จ๋ฝ๊ณผ ๊ฐœํ–‰ (paragraph, linebreak)
<p> ํƒœ๊ทธ: ๊ธ€์˜ ๋‹จ๋ฝ์„ ๋‚˜ํƒ€๋‚ธ๋‹ค
<br> ํƒœ๊ทธ : ๊ธ€์ž๋ฅผ ๊ฐœํ–‰

  • <p> ํƒœ๊ทธ๋ฅผ ๋„ฃ์œผ๋ฉด ๋‹จ๋ฝ๋ณ„๋กœ ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ๊ฐœํ–‰๋จ
  • <p> ํƒœ๊ทธ ๋‚ด๋ถ€์—์„œ ์ž„์˜๋กœ ๊ฐœํ–‰์„ ํ•˜๋ ค๋ฉด <br> ํƒœ๊ทธ ์‚ฌ์šฉ
  • <p> ํƒœ๊ทธ๋ฅผ ์ด์šฉํ•˜๋ฉด ํƒœ๊ทธ ์ž์ฒด์—์„œ ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ๊ฐœํ–‰์„ ํ•ด์ฃผ์ง€๋งŒ, <p> ํƒœ๊ทธ ๋‚ด๋ถ€์—์„œ ๊ฐ•์ œ๋กœ ๊ฐœํ–‰์„ ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” <br> ํƒœ๊ทธ๋ฅผ ์ด์šฉํ•ด์•ผ ํ•œ๋‹ค.

ํ…์ŠคํŠธ๋ฅผ ๊พธ๋ฉฐ์ฃผ๋Š” ์š”์†Œ

<b> ํƒœ๊ทธ : ๊ธ€์ž๋ฅผ ๊ตต๊ฒŒ ํ‘œํ˜„ํ•œ๋‹ค. bold
<i> ํƒœ๊ทธ : ๊ธ€์ž๋ฅผ ๊ธฐ์šธ์—ฌ์„œ ํ‘œํ˜„. ์ดํƒค๋ฆญ์ฒด
<u> ํƒœ๊ทธ : ๊ธ€์ž์— ๋ฐ‘์ค„์„ ํ‘œํ˜„. underline
<s> ํƒœ๊ทธ : ๊ธ€์ž์˜ ์ค‘๊ฐ„์„ ์„ ํ‘œํ˜„

<p>
    <b>Lorem</b> <i>ipsum</i> dolor sit amet<br>
    <u>Lorem</u> <s>ipsum</s> dolor sit amet
</p>

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

์ฐธ๊ณ 

์•ต์ปค ์š”์†Œ Anchor

HTML์˜ HT : ํ•˜์ดํผ ํ…์ŠคํŠธ : ๋งํฌ๋ฅผ ๋œปํ•จ

<a> ํƒœ๊ทธ : ๋งํฌ๋ฅผ ์ƒ์„ฑํ•˜๋Š” ํƒœ๊ทธ
a ํƒœ๊ทธ, ์•ต์ปค ํƒœ๊ทธ, ๋งํฌ ํƒœ๊ทธ๋“ฑ์œผ๋กœ ๋ถˆ๋ฆผ

<a href="http://www.naver.com/" target="_blank">๋„ค์ด๋ฒ„</a>

๋„ค์ด๋ฒ„

href ์†์„ฑ

  • ๋งํฌ๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด์„œ ์•ต์ปค๋Š” ๋ฐ˜๋“œ์‹œ href ์†์„ฑ์„ ๊ฐ€์ ธ์•ผํ•œ๋‹ค.
    • ํ•˜์ดํผ ๋ ˆํผ๋Ÿฐ์Šค
    • ์†์„ฑ๊ฐ’์œผ๋กœ ๋งํฌ์˜ ๋ชฉ์ ์ง€๊ฐ€ ๋˜๋Š” url์ด ๋“ค์–ด๊ฐ€๊ฒŒ ๋จ

target ์†์„ฑ

  • ๋งํฌ๋œ ๋ฆฌ์†Œ์Šค๋ฅผ ์–ด๋””์— ํ‘œ์‹œํ• ์ง€ ๋‚˜ํƒ€๋‚ธ๋‹ค
  • ์†์„ฑ๊ฐ’ : self, blank, parent, top
    • parent, top : ํ”„๋ ˆ์ž„์ด๋ผ๋Š” ํŠน์ • ์กฐ๊ฑด์—์„œ๋งŒ ๋™์ž‘. ํ”„๋ ˆ์ž„ ๊ธฐ์ˆ ์€ ํ˜„์žฌ ์ž˜ ์“ฐ์ด์ง€ ์•Š์Œ
    • self : ์šฐ๋ฆฌ๊ฐ€ ๋ณด๊ณ ์žˆ๋˜ ํ™”๋ฉด ์ž์ฒด๋ฅผ ์™ธ๋ถ€ ๋งํฌ ํŽ˜์ด์ง€๋กœ ์ด๋™ํ•œ๋‹ค. default๊ฐ’
    • blank: ์ƒˆ๋กœ์šด์ฐฝ, ๋นˆ ์ฐฝ์— ์™ธ๋ถ€ํŽ˜์ด์ง€๊ฐ€ ๋‚˜ํƒ€๋‚˜๊ฒŒ๋” ํ•œ๋‹ค.

๋‚ด๋ถ€ ๋งํฌ

  • ์•ต์ปคํƒœ๊ทธ๋Š” ๊ผญ ์™ธ๋ถ€ํŽ˜์ด์ง€๋กœ ์ด๋™ํ•˜๋Š”๊ฒƒ ์•„๋‹˜
    ํŽ˜์ด์ง€ ๋‚ด๋ถ€์˜ ํŠน์ • ์š”์†Œ๋กœ ์ดˆ์ ์„ ์ด๋™์‹œํ‚ฌ ์ˆ˜ ์žˆ์Œ = ๋‚ด๋ถ€ ๋งํฌ
    ex) ํŽ˜์ด์ง€ ๋งจ ๋ฐ‘์—์„œ ๋งจ ์œ„๋กœ ์˜ฌ๋ผ๊ฐ€๊ณ ์ž ํ• ๋•Œ
    ๊ทธ๋•Œ๋Š” href ์†์„ฑ๊ฐ’์œผ๋กœ #๋ฅผ ์“ฐ๊ณ  ๋’ค์— ์ด๋™์‹œํ‚ค๊ณ ์ž ํ•˜๋Š” ์š”์†Œ์˜ id
<a href=#์š”์†Œid></a>

์˜๋ฏธ๊ฐ€ ์—†๋Š” ์ปจํ…Œ์ด๋„ˆ ์š”์†Œ

ํƒœ๊ทธ์—๋Š” ์•„๋ฌด๋Ÿฐ ์˜๋ฏธ๋„ ์—†๋Š” ํƒœ๊ทธ๋“ค ์กด์žฌ.

ํƒœ๊ทธ ์ž์ฒด์—๋Š” ์•„๋ฌด๋Ÿฐ ์˜๋ฏธ๋„ ๊ฐ€์ง€์ง€ ์•Š๊ณ , ์ˆœ์ „ํžˆ ๋ฌด์–ธ๊ฐ€๋ฅผ ๋‹ด๊ธฐ ์œ„ํ•œ ๋˜๋Š” ์–ด๋–ค ์š”์†Œ๋“ค์„ ๋ฌถ๊ธฐ ์œ„ํ•œ ์šฉ๋„๋กœ๋งŒ ์‚ฌ์šฉ๋˜๋Š” ํƒœ๊ทธ๋“ค

  • ์‹ค๋ฌด์—์„œ ์Šคํƒ€์ผ์„ ์ฃผ๊ธฐ ์œ„ํ•ด์„œ๋‚˜, ์„œ๋ฒ„์—์„œ ๋ณด๋‚ด๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ๋‹ด๊ธฐ ์œ„ํ•œ ๋ชฉ์ ์œผ๋กœ ์ด๋Ÿฐ ์˜๋ฏธ์—†๋Š” ์š”์†Œ๋“ค ์ž์ฃผ ์‚ฌ์šฉ๋จ
  • ์ด๋Ÿฐ ์˜๋ฏธ ์—†๋Š” ํƒœ๊ทธ๋“ค์˜ ์‚ฌ์šฉ๋นˆ๋„๊ฐ€ ๋งค์šฐ ๋†’๋‹ค

<div> ํƒœ๊ทธ : ๋ธ”๋ก๋ ˆ๋ฒจ ํƒœ๊ทธ
<span> ํƒœ๊ทธ : ์ธ๋ผ์ธ ๋ ˆ๋ฒจ ํƒœ๊ทธ

<div>
    <span>Lorem</span> ipsum dolor sit.
</div>
Lorem ipsum dolor sit.
  • ๋ธ”๋ก๋ ˆ๋ฒจ ์š”์†Œ๊ฐ€ ํ‘œํ˜„์ด ๋˜๋ฉด ๋ชจ๋‹ˆํ„ฐ์˜ ํ•œ ๋ผ์ธ ํ•˜๋‚˜๋ฅผ ๋‹ค ์ฑ„์›Œ์„œ ํ‘œํ˜„๋จ
  • ์ธ๋ผ์ธ ๋ ˆ๋ฒจ ์š”์†Œ๋“ค์€ ๋ธ”๋ก๋ ˆ๋ฒจ ์š”์†Œ์˜ ์•ˆ์— ๋“ค์–ด๊ฐ
  • <p>๊ฐ€ ๋ธ”๋ก๋ ˆ๋ฒจ์š”์†Œ, <b>, <i>, <u>, <s> ๋“ค์ด ์ธ๋ผ์ธ ๋ ˆ๋ฒจ ํƒœ๊ทธ

๋ฆฌ์ŠคํŠธ ์š”์†Œ

๋ฆฌ์ŠคํŠธ : ์ผ๋ จ๋œ ํ•ญ๋ชฉ๋“ค์ด ๋‚˜์—ด๋œ ๊ฒƒ๋“ค

์‹ค์‹œ๊ฐ„ ๊ฒ€์ƒ‰์–ด, ๋‰ด์Šค, ์‡ผํ•‘ ์ƒํ’ˆ๋“ค์ด ์ „๋ถ€ ๋ฆฌ์ŠคํŠธ๋กœ ์ด๋ฃจ์–ด์ง
์ฝ˜ํ…์ธ ๊ฐ€ ๋งŽ์€ ์‚ฌ์ดํŠธ์ผ์ˆ˜๋ก ๋ถ„์•ผ๋‚˜ ํ•ญ๋ชฉ์œผ๋กœ ๋‚˜๋‰˜๋Š”๊ฒƒ์ด ๋งŽ๊ธฐ ๋•Œ๋ฌธ์— ๋ฆฌ์ŠคํŠธ๋กœ ํ‘œํ˜„๋ ๋งŒํ•œ ์š”์†Œ๋“ค์ด ๋งŽ๋‹ค

์ˆœ์„œ๊ฐ€ ์—†๋Š” ๋ฆฌ์ŠคํŠธ unordered list
๋‚˜์—ด๋œ ํ•ญ๋ชฉ๋“ค์ด ์ˆœ์„œ์™€ ์ƒ๊ด€์ด ์—†์„๋•Œ ์“ฐ๋Š” ๋ฆฌ์ŠคํŠธ

<ul> 
    <li> ์ฝฉ๋‚˜๋ฌผ</li> 
    <li> ํŒŒ</li> 
    <li> ๊ตญ  ๊ฐ„์žฅ</li> 
    ... 
</ul> 
  • ์ฝฉ๋‚˜๋ฌผ
  • ํŒŒ
  • ๊ตญ ๊ฐ„์žฅ
  • ...

<ul>ํƒœ๊ทธ ์ž…๋ ฅ ํ›„ ๊ฐ๊ฐ์˜ ํ•ญ๋ชฉ๋“ค์„ <li>ํƒœ๊ทธ๋กœ ์ž…๋ ฅํ•œ๋‹ค

์ˆœ์„œ๊ฐ€ ์žˆ๋Š” ๋ฆฌ์ŠคํŠธ ordered list
๋‚˜์—ด๋œ ํ•ญ๋ชฉ๋“ค์ด ์ˆœ์„œ์™€ ๊ด€๋ จ์ด ์žˆ์„๋•Œ ์‚ฌ์šฉํ•˜๋Š” ๋ฆฌ์ŠคํŠธ

<ol>
    <li>๋ƒ„๋น„์— ๊ตญ๋ฌผ์šฉ ๋ฉธ์น˜๋ฅผ ๋„ฃ๊ณ  ํ•œ์†Œ๋” ๋“์—ฌ ๋ฉธ์น˜ ์œก์ˆ˜๋ฅผ 7์ปต(1,400ml) ๋งŒ๋“ ๋‹ค.</li>
    <li>์ฝฉ๋‚˜๋ฌผ์„ ๋„ฃ๊ณ  ๋šœ๊ป‘์„ ๋ฎ์–ด ์ฝฉ๋‚˜๋ฌผ์ด ์ต์„ ๋•Œ๊นŒ์ง€ ๋“์ธ๋‹ค.</li>
    <li>๋šœ๊ป‘์„ ์—ด๊ณ  ๋Œ€ํŒŒ, ๋งˆ๋Š˜, ๊ณ ์ถง๊ฐ€๋ฃจ๋ฅผ ๋„ฃ๊ณ  ๋“์ธ๋‹ค.</li>
    ...
</ol>
  1. ๋ƒ„๋น„์— ๊ตญ๋ฌผ์šฉ ๋ฉธ์น˜๋ฅผ ๋„ฃ๊ณ  ํ•œ์†Œ๋” ๋“์—ฌ ๋ฉธ์น˜ ์œก์ˆ˜๋ฅผ 7์ปต(1,400ml) ๋งŒ๋“ ๋‹ค.
  2. ์ฝฉ๋‚˜๋ฌผ์„ ๋„ฃ๊ณ  ๋šœ๊ป‘์„ ๋ฎ์–ด ์ฝฉ๋‚˜๋ฌผ์ด ์ต์„ ๋•Œ๊นŒ์ง€ ๋“์ธ๋‹ค.
  3. ๋šœ๊ป‘์„ ์—ด๊ณ  ๋Œ€ํŒŒ, ๋งˆ๋Š˜, ๊ณ ์ถง๊ฐ€๋ฃจ๋ฅผ ๋„ฃ๊ณ  ๋“์ธ๋‹ค.
  4. ...

<dl> ๋ฆฌ์ŠคํŠธ
definition list (์ •์˜), description list(์„ค๋ช…์„ ๊ธฐ์ˆ )
์šฉ์–ด์™€ ๊ทธ์— ๋Œ€ํ•œ ์ •์˜๋ฅผ ๋‚˜ํƒ€๋‚ธ๋‹ค

<dl>
    <dt>๋ฆฌํ”Œ๋ฆฌ ์ฆํ›„๊ตฐ</dt>
    <dd>ํ—ˆ๊ตฌ์˜ ์„ธ๊ณ„๋ฅผ ์ง„์‹ค์ด๋ผ ๋ฏฟ๊ณ  ๊ฑฐ์ง“๋œ ๋ง๊ณผ ํ–‰๋™์„ ์ƒ์Šต์ ์œผ๋กœ ๋ฐ˜๋ณตํ•˜๋Š” ๋ฐ˜์‚ฌํšŒ์  ์„ฑ๊ฒฉ์žฅ์• ๋ฅผ ๋œปํ•˜๋Š” ์šฉ์–ด</dd>
    <dt>ํ”ผ๊ทธ๋ง๋ฆฌ์˜จ ํšจ๊ณผ</dt>
    <dd>ํƒ€์ธ์˜ ๊ธฐ๋Œ€๋‚˜ ๊ด€์‹ฌ์œผ๋กœ ์ธํ•˜์—ฌ ๋Šฅ๋ฅ ์ด ์˜ค๋ฅด๊ฑฐ๋‚˜ ๊ฒฐ๊ณผ๊ฐ€ ์ข‹์•„์ง€๋Š” ํ˜„์ƒ</dd>
    <dt>์–ธ๋”๋… ํšจ๊ณผ</dt>
    <dd>์‚ฌ๋žŒ๋“ค์ด ์•ฝ์ž๋ผ๊ณ  ๋ฏฟ๋Š” ์ฃผ์ฒด๋ฅผ ์‘์›ํ•˜๊ฒŒ ๋˜๋Š” ํ˜„์ƒ</dd>
</dl>
๋ฆฌํ”Œ๋ฆฌ ์ฆํ›„๊ตฐ ํ—ˆ๊ตฌ์˜ ์„ธ๊ณ„๋ฅผ ์ง„์‹ค์ด๋ผ ๋ฏฟ๊ณ  ๊ฑฐ์ง“๋œ ๋ง๊ณผ ํ–‰๋™์„ ์ƒ์Šต์ ์œผ๋กœ ๋ฐ˜๋ณตํ•˜๋Š” ๋ฐ˜์‚ฌํšŒ์  ์„ฑ๊ฒฉ์žฅ์• ๋ฅผ ๋œปํ•˜๋Š” ์šฉ์–ด ํ”ผ๊ทธ๋ง๋ฆฌ์˜จ ํšจ๊ณผ ํƒ€์ธ์˜ ๊ธฐ๋Œ€๋‚˜ ๊ด€์‹ฌ์œผ๋กœ ์ธํ•˜์—ฌ ๋Šฅ๋ฅ ์ด ์˜ค๋ฅด๊ฑฐ๋‚˜ ๊ฒฐ๊ณผ๊ฐ€ ์ข‹์•„์ง€๋Š” ํ˜„์ƒ ์–ธ๋”๋… ํšจ๊ณผ ์‚ฌ๋žŒ๋“ค์ด ์•ฝ์ž๋ผ๊ณ  ๋ฏฟ๋Š” ์ฃผ์ฒด๋ฅผ ์‘์›ํ•˜๊ฒŒ ๋˜๋Š” ํ˜„์ƒ
  • <ul>, <ol>๋ฆฌ์ŠคํŠธ์™€ ๊ตฌ์กฐ๊ฐ€ ๋‹ค๋ฅด๋‹ค. <ul>, <ol> ๋ฆฌ์ŠคํŠธ๋Š” ํ•ญ๋ชฉ๋“ค์„ ๋‹จ์ˆœํžˆ ๋‚˜์—ดํ•˜๋Š”๊ฒƒ
  • <dl> ๋ฆฌ์ŠคํŠธ๋Š” ์šฉ์–ด์™€ ์„ค๋ช…์ด ํ•˜๋‚˜์˜ ์„ธํŠธ๋ฅผ ์ด๋ฃจ๊ณ  ํ•˜๋‚˜ ์ด์ƒ์˜ ํ•ญ๋ชฉ์œผ๋กœ ๋ฆฌ์ŠคํŠธ๊ฐ€ ์ด๋ฃจ์–ด์ง€๋Š” ๊ตฌ์กฐ.
    • <li>ํƒœ๊ทธ๊ฐ€ ์•„๋‹Œ <dt>์™€ <dd>ํƒœ๊ทธ๋ฅผ ์ด์šฉํ•ด์„œ ํ•ญ๋ชฉ ๋‚˜ํƒ€๋ƒ„
    • <dt>์—๋Š” ์šฉ์–ด, <dd>์—๋Š” ๊ทธ์— ๋Œ€ํ•œ ์ •์˜ ๋˜๋Š” ์„ค๋ช…์ด ๋“ค์–ด๊ฐ
    • ์šฉ์–ด ํ•˜๋‚˜์— ์—ฌ๋Ÿฌ๊ฐœ์˜ ์ •์˜๊ฐ€ ๋“ค์–ด๊ฐˆ ์ˆ˜ ์žˆ๋‹ค.

๋ฆฌ์ŠคํŠธ ํƒœ๊ทธ๋„ ์ค‘์ฒฉ์ด ๊ฐ€๋Šฅํ•˜๋‹ค.

<h1>์›”๋“œ์ปต ์กฐ ํŽธ์„ฑ</h1>
<ol>
  <li>
    A์กฐ
    <ul>
      <li>๋Ÿฌ์‹œ์•„</li>
      <li>์šฐ๋ฃจ๊ณผ์ด</li> 
      <li>์ด์ง‘ํŠธ</li>
    </ul>
  </li>
  <li>
    B์กฐ
    <ul>
      <li>์ด๋ž€</li>
      <li>์ŠคํŽ˜์ธ</li> 
      <li>ํฌ๋ฅดํˆฌ๊ฐˆ</li>
    </ul>
  </li>
  <li>
    C์กฐ
    <ul>
      <li>ํฌ๋กœ์•„ํ‹ฐ์•„</li>
      <li>์•„๋ฅดํ—จํ‹ฐ๋‚˜</li> 
      <li>์•„์ด์Šฌ๋ž€๋“œ</li>
    </ul>
  </li>
<ol>

์›”๋“œ์ปต ์กฐ ํŽธ์„ฑ

  1. A์กฐ
    • ๋Ÿฌ์‹œ์•„
    • ์šฐ๋ฃจ๊ณผ์ด
    • ์ด์ง‘ํŠธ
  2. B์กฐ
    • ์ด๋ž€
    • ์ŠคํŽ˜์ธ
    • ํฌ๋ฅดํˆฌ๊ฐˆ
  3. C์กฐ
    • ํฌ๋กœ์•„ํ‹ฐ์•„
    • ์•„๋ฅดํ—จํ‹ฐ๋‚˜
    • ์•„์ด์Šฌ๋ž€๋“œ
  • <ol>ํƒœ๊ทธ์˜ ์ž์‹์œผ๋กœ๋Š” <li>ํƒœ๊ทธ๋งŒ ์˜ฌ ์ˆ˜ ์žˆ์Œ. <div>, <p> ํƒœ๊ทธ ๋“ฑ ๋ถˆ๊ฐ€๋Šฅ
  • <li>ํƒœ๊ทธ๋Š” <ol>ํƒœ๊ทธ๋‚˜ <ul>ํƒœ๊ทธ๋งŒ์„ ๋ถ€๋ชจ๋กœ ๊ฐ€์งˆ ์ˆ˜ ์žˆ์Œ
  • <li>ํƒœ๊ทธ์˜ ์ž์‹์œผ๋กœ๋Š” ๋‹ค๋ฅธ ์š”์†Œ๋“ค์ด ๋“ค์–ด์˜ฌ ์ˆ˜ ์žˆ๋‹ค.
  • ๋ฆฌ์ŠคํŠธ๋ฅผ ์ค‘์ฒฉํ• ๋•Œ <ol>์ด๋‚˜ <ul> ๋ฆฌ์ŠคํŠธ ๋ฐ‘์˜ ์ž์‹์œผ๋กœ <li>ํƒœ๊ทธ๋งŒ ์˜ฌ ์ˆ˜ ์žˆ๋‹ค.
  • ์ค‘์ฒฉ์„ ํ• ๋•Œ์—๋Š” <li>ํƒœ๊ทธ์•ˆ์— ์š”์†Œ๋“ค์„ ์‚ฝ์ž…ํ•ด์•ผ ํ•œ๋‹ค.

์ด๋ฏธ์ง€ ์š”์†Œ

<img> ํƒœ๊ทธ
๋ฌธ์„œ์˜ ์ด๋ฏธ์ง€๋ฅผ ์‚ฝ์ž…ํ•˜๋Š” ํƒœ๊ทธ

๋‹ซ๋Š”ํƒœ๊ทธ๊ฐ€ ์—†๋Š” ๋นˆ ํƒœ๊ทธ

<img src="./images/pizza.png" alt="ํ”ผ์ž">

src ์†์„ฑ
์ด๋ฏธ์ง€ ๊ฒฝ๋กœ๋ฅผ ์ง€์ •ํ•˜๊ธฐ ์œ„ํ•œ ํ•„์ˆ˜ ์†์„ฑ

๊ฒฝ๋กœ์—๋Š” ์ƒ๋Œ€๊ฒฝ๋กœ์™€ ์ ˆ๋Œ€๊ฒฝ๋กœ ๋‘๊ฐ€์ง€ ์กด์žฌ

์ƒ๋Œ€๊ฒฝ๋กœ : ํ˜„์žฌ ์›น ๋ฌธ์„œ์˜ ํŽ˜์ด์ง€๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์ƒ๋Œ€์ ์œผ๋กœ ์ด๋ฏธ์ง€์˜ ์œ„์น˜๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ๊ฒฝ๋กœ
์ ˆ๋Œ€ ๊ฒฝ๋กœ : ์‹ค์ œ ๊ทธ ์ด๋ฏธ์ง€๊ฐ€ ์œ„์น˜ํ•ด ์žˆ๋Š” ๊ณณ์˜ ์ „์ฒด ๊ฒฝ๋กœ

  • ์ƒ๋Œ€๊ฒฝ๋กœ๋Š” ๊ฐ™์€ ์ด๋ฏธ์ง€๋ฅผ ์‚ฝ์ž…ํ•˜๋”๋ผ๋„ ๋ถˆ๋Ÿฌ์˜ค๋Š” ํŽ˜์ด์ง€์˜ ์œ„์น˜์— ๋”ฐ๋ผ์„œ ์ด๋ฏธ์ง€์˜ ์ฃผ์†Œ๊ฐ€ ๋‹ฌ๋ผ์งˆ ์ˆ˜ ์žˆ๋‹ค
  • ์ ˆ๋Œ€๊ฒฝ๋กœ๋Š” ์–ด๋Š ํŽ˜์ด์ง€์—์„œ ๋ถˆ๋Ÿฌ์˜ค๋”๋ผ๋„ ํ•ญ์ƒ ๊ฐ™์€ ์ฃผ์†Œ๋ฅผ ๊ฐ€์ง€๊ฒŒ ๋œ๋‹ค
<!-- ์ƒ๋Œ€๊ฒฝ๋กœ -->
<img src="./images/pizza.png" alt="ํ”ผ์ž">

<!-- ์ ˆ๋Œ€๊ฒฝ๋กœ -->
<img src="C:/users/document/images/pizza.png" alt="ํ”ผ์ž">
<img src="http://www.naver.com/pizza.png" alt="ํ”ผ์ž">

์ƒ๋Œ€๊ฒฝ๋กœ๋ฅผ ์“ธ๋•Œ๋Š” .์„ ์ด์šฉ
./ : ํ˜„์žฌ ํŽ˜์ด์ง€๊ฐ€ ์žˆ๋Š” ํด๋”๋ฅผ ๋‚˜ํƒ€๋‚ธ๋‹ค. ์ƒ๋žต๋„ ๊ฐ€๋Šฅํ•จ
../ : ์ƒ์œ„ ํด๋”๋กœ ํ•œ๋ฒˆ ์ด๋™ํ•˜๋Š” ๋ช…๋ น
../../ : ์ƒ์œ„ํด๋”๋กœ ๋‘๋ฒˆ ์ด๋™
ํ˜„์žฌํด๋”์—์„œ ํ•˜์œ„ ํด๋”๋กœ ๊ฐˆ๋•Œ๋Š” ํด๋”๋ช…๋งŒ ์ ์œผ๋ฉด ๋จ folder๋ช…/์ด๋ฏธ์ง€ ํŒŒ์ผ

์ ˆ๋Œ€๊ฒฝ๋กœ๋Š” ์ด๋ฏธ์ง€์˜ ์ „์ฒด ๊ฒฝ๋กœ๋ฅผ ๋‹ค ์ ์–ด์•ผ ํ•œ๋‹ค

alt ์†์„ฑ
์ด๋ฏธ์ง€์˜ ๋Œ€์ฒด ํ…์ŠคํŠธ๋ฅผ ์ž…๋ ฅํ•œ๋‹ค

  • ๋Œ€์ฒด ํ…์ŠคํŠธ : ์ด๋ฏธ์ง€๋ฅผ ์„ค๋ช…ํ•˜๋Š” ๊ธ€.
  • ์ผ๋ฐ˜์ ์ธ ์ƒํ™ฉ์—์„œ๋Š” ๋…ธ์ถœ ๋˜์ง€ ์•Š๊ณ  ์›น ์ ‘๊ทผ์„ฑ ์ธก๋ฉด์—์„œ ์ค‘์š”ํ•œ ์†์„ฑ.
    • ์‹œ๊ฐ์žฅ์• ์ธ์€ ์Šคํฌ๋ฆฐ ๋ฆฌ๋”๊ธฐ๋ฅผ ์ด์šฉํ•ด์„œ ์ปดํ“จํ„ฐ๋ฅผ ์ด์šฉํ•˜๋Š”๋ฐ, ๋ˆˆ์œผ๋กœ ์ฝ˜ํ…์ธ  ํ™•์ธ์ด ๋˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ์ด๋ฏธ์ง€์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ ์•Œ ์ˆ˜ ์—†๋‹ค.
    • ๊ทธ๋•Œ ์Šคํฌ๋ฆฐ ๋ฆฌ๋”๊ธฐ์™€ ๊ฐ™์€ ๋ณด์กฐ ๊ธฐ๊ธฐ๊ฐ€ ์ด๋ฏธ์ง€๋ฅผ ๋Œ€์‹ ํ•ด์„œ ๋Œ€์ฒด ํ…์ŠคํŠธ์˜ ์†์„ฑ์„ ์ฝ์–ด์ค€๋‹ค.
    • ๋˜ํ•œ ์„œ๋ฒ„์—์„œ ์ด๋ฏธ์ง€๋ฅผ ๋ชป ๊ฐ€์ ธ์˜ค๋Š”๊ฒฝ์šฐ ๋œจ๋Š” ์—‘๋ฐ• ํ‘œ์‹œ ์˜†์— ๋Œ€์ฒดํ…์ŠคํŠธ๊ฐ€ ๋…ธ์ถœ๋˜๊ธฐ๋„ ํ•จ
  • alt ์†์„ฑ ์—ญ์‹œ ํ•„์ˆ˜๋กœ ๋„ฃ์–ด์ฃผ๋Š”๊ฒƒ์ด ์ข‹๋‹ค.
  • alt์†์„ฑ์— ๋„ˆ๋ฌด ๋””ํ…Œ์ผํ•œ ์ด๋ฏธ์ง€์˜ ์„ค๋ช…์ด ๋“ค์–ด๊ฐ€๋Š”๊ฒƒ๋ณด๋‹ค ์ „๋‹ฌํ•ด์•ผ ํ•˜๋Š” ์ •๋ณด๋งŒ ๋„ฃ์–ด์ฃผ๋Š”๊ฒŒ ์ข‹์Œ
    ex) ํ”ผ์ž (O) / ์†Œ์„ธ์ง€๊ฐ€ 6๊ฐœ ์˜ฌ๋ผ๊ฐ„ ํ”ผ์ž (X)

width์†์„ฑ, height ์†์„ฑ
์ด๋ฏธ์ง€์˜ ๊ฐ€๋กœ, ์„ธ๋กœ ํฌ๊ธฐ ์ง€์ •ํ•˜๋Š” ์†์„ฑ

  • ์ด๋ฏธ์ง€์˜ ํฌ๊ธฐ๋Š” ๋ณดํ†ต ํ™”๋ฉดํฌ๊ธฐ์— ๋”ฐ๋ผ ๊ฐ™์ด ์ปค์ง€๊ฑฐ๋‚˜ ์ž‘์•„์ง€๋Š” ๋“ฑ ์œ ๋™์ ์œผ๋กœ ๋ณ€ํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์Œ. ์ฆ‰ ํ•ญ์ƒ ๊ณ ์ •์ ์ธ ํฌ๊ธฐ๋ฅผ ์œ ์ง€ํ•˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ๋ณดํ†ต css๋กœ ํฌ๊ธฐ๋ฅผ ์ œ์–ดํ•œ๋‹ค.
  • ๋งŒ์•ฝ ์ด๋ฏธ์ง€์˜ ํฌ๊ธฐ๊ฐ€ ๊ณ ์ •์ ์ด๋ผ๋ฉด width,height ์†์„ฑ์„ ์“ฐ๋Š”๊ฒŒ ์„ฑ๋Šฅ์ ์ธ ์ธก๋ฉด์—์„œ ๋” ์ข‹์Œ.
  • width, height ์†์„ฑ์— ๋‹จ์œ„๋ฅผ ์“ฐ์ง€ ์•Š์œผ๋ฉด ์ž๋™์ ์œผ๋กœ ํ”ฝ์…€๋กœ ์ธ์‹ํ•ด์„œ ๋™์ž‘ํ•จ
  • width๋‚˜ height ๋‘˜ ์ค‘ ํ•˜๋‚˜์—๋งŒ ๊ฐ’์„ ์ฃผ๊ฒŒ ๋˜๋ฉด ๋‹ค๋ฅธ ํ•˜๋‚˜๋Š” ์•Œ์•„์„œ ์›๋ณธ ์ด๋ฏธ์ง€์˜ ๋น„์œจ์„ ์œ ์ง€ํ•œ ์ƒํƒœ๋กœ ๊ฐ™์ด ์ค„์–ด๋“ ๋‹ค.

์ด๋ฏธ์ง€ ํ™•์žฅ์ž ํฌ๋งท

  • gif
    : ์ƒ‰์ด ์ œํ•œ์ ์ด์ง€๋งŒ ์šฉ๋Ÿ‰์ด ์ž‘๋‹ค. ์• ๋‹ˆ๋ฉ”์ด์…˜๊ณผ ํˆฌ๋ช… ์ด๋ฏธ์ง€๋ฅผ ์ง€์›
    ์›€์งค๋“ค์ด ๋‹ค gifํฌ๋งท์œผ๋กœ ๋˜์–ด์žˆ์Œ. ์›€์งค์€ ํ•ด์ƒ๋„๊ฐ€ ๋‚ฎ์€๋ฐ ์ƒ‰์ด 256์ƒ‰์œผ๋กœ ์ œํ•œ๋˜์–ด ์žˆ๊ธฐ ๋•Œ๋ฌธ

  • jpg
    : ์ „ํ†ต์ ์œผ๋กœ ์›น์—์„œ ๊ฐ€์žฅ ๋งŽ์ด ์‚ฌ์šฉ๋˜๋Š” ํฌ๋งท. ์ž์—ฐ์Šค๋Ÿฌ์šด ์ƒ‰์ƒ ํ‘œํ˜„์ด ๊ฐ€๋Šฅ, ์••์ถ•๋ฅ ์ด ๋†’์•„์„œ ์šฉ๋Ÿ‰๋„ ์ ์ ˆ. ์‚ฌ์ง„์ด๋‚˜ ์ผ๋ฐ˜์ ์ธ ๊ทธ๋ฆผ์— ๋‹ค ์‚ฌ์šฉ๋จ. ํˆฌ๋ช… ์ง€์›ํ•˜์ง€ ์•Š์Œ

  • png
    : jpg์™€ ๋น„๊ตํ–ˆ์„๋•Œ ์ด๋ฏธ์ง€ ์†์‹ค์ด ์—†์Œ. ๊ฐ€์žฅ ๋†’์€ ํ€„๋ฆฌํ‹ฐ์˜ ์ด๋ฏธ์ง€๋ฅผ ํ‘œํ˜„๊ฐ€๋Šฅ. ์šฉ๋Ÿ‰๋„ ์กฐ๊ธˆ ๋” ๋†’์Œ. ๋ฐ˜ํˆฌ๋ช…๊นŒ์ง€ ์ง€์›. ์›น์—์„œ ์š”์ƒˆ ๊ฐ€์žฅ ํ•ซํ•˜๊ณ  ์œ ์šฉํ•œ ํŒŒ์ผ ํฌ๋งท


ํ…Œ์ด๋ธ” ์š”์†Œ

<table> ํƒœ๊ทธ
๋ฐ์ดํ„ฐ ํ‘œ๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ํƒœ๊ทธ

  • ํ‘œ๋Š” ํ•œ์นธ ํ•œ์นธ์˜ ์…€๋กœ ์ด๋ฃจ์–ด์ ธ ์žˆ๋‹ค
  • ๊ฐ€๋กœ๋ฐฉํ–ฅ : ํ–‰ row
  • ์„ธ๋กœ๋ฐฉํ–ฅ : ์—ด column
  • ์…€์„ ํ‘œํ˜„ํ•ด์ฃผ๋Š” ํƒœ๊ทธ : <td>, <th>
  • ์…€๋“ค์„ ๊ฐ์‹ธ์ฃผ๋Š”, ํ•˜๋‚˜์˜ ํ–‰์„ ํ‘œํ˜„ํ•˜๋Š” ํƒœ๊ทธ : <tr> table-row
  • ์ด๋“ค ์ „๋ถ€๋ฅผ ๊ฐ์‹ธ์ฃผ๋Š” tableํƒœ๊ทธ
  • ํ‘œ๋Š” ๊ฐ€๋กœ๋กœ ๊ทธ๋ฆฐ๋‹ค๊ณ  ์ƒ๊ฐ
  • 4x4 ํ‘œ
    : ํ–‰ ํ•˜๋‚˜์— ์…€ 4๊ฐœ
    -> <td>ํƒœ๊ทธ 4๊ฐœ๊ฐ€ ๋“ค์–ด๊ฐ = ํ•˜๋‚˜์˜ ํ–‰
    ํ•˜๋‚˜์˜ ํ–‰์„ ํ‘œํ˜„ํ•˜๋Š” <tr> ํƒœ๊ทธ๋กœ <td> ํƒœ๊ทธ๊ฐ์‹ธ์คŒ
    4ํ–‰ -> 4๋ฒˆ ๋ฐ˜๋ณต
<table>
  <tr>
  	<td></td><td></td><td></td><td></td>
  </tr>
  <tr>
    <td></td><td></td><td></td><td></td>
  </tr>
  <tr>
    <td></td><td></td><td></td><td></td>
  </tr>
  <tr>
    <td></td><td></td><td></td><td></td>
  </tr>
</table>
-> ํ…Œ๋‘๋ฆฌ๊ฐ€ ์—†๋Š” ํ…Œ์ด๋ธ”. ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ œ๊ณตํ•˜๋Š” ํ…Œ์ด๋ธ”์˜ ๊ธฐ๋ณธ ์Šคํƒ€์ผ์—๋Š” ํ…Œ๋‘๋ฆฌ๊ฐ€ ์—†๋‹ค
  • ํ…Œ์ด๋ธ”์€ ๋ณต์žกํ•œ ๋ฐ์ดํ„ฐ๋ฅผ ์‹œ๊ฐ์ ์œผ๋กœ ๋ณด๊ธฐ ํŽธํ•˜๊ฒŒ ๋ณด์—ฌ์ค€๋‹ค๋Š” ์žฅ์ 
  • ์กฐ๊ทธ๋งŒ ํ‘œ๋ฅผ ์ž‘์„ฑํ•˜๋Š”๋ฐ๋„ ๋งŽ์€ ํƒœ๊ทธ๊ฐ€ ๋“ค์–ด๊ฐ€๋Š” ๋‹จ์ 
    • ํ–‰๊ณผ ์—ด์˜ 2์ฐจ์› ๋ฐ์ดํ„ฐ๋ฅผ ํ‘œํ˜„ํ•ด์•ผ ํ•˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.
    • ์ฝ”๋“œ๋„ ์ฝ๊ธฐ ์–ด๋ ต์ง€๋งŒ ๊ธฐ๊ณ„(์Šคํฌ๋ฆฐ ๋ฆฌ๋”๊ธฐ๋“ฑ์˜ ๋ณด์กฐ๊ธฐ๊ธฐ)๋„ ํ•ด์„ํ•˜๊ธฐ ์–ด๋ ต๋‹ค.

๋”ฐ๋ผ์„œ ํ‘œ๋ฅผ ๊ตฌ์กฐ์ ์œผ๋กœ ํŒŒ์•…ํ•˜๊ธฐ ์œ„ํ•ด ๋„์›€์ด ๋˜๋Š” ๋ช‡๊ฐœ์˜ ํƒœ๊ทธ๊ฐ€ ๋” ์กด์žฌ
ํ‘œ๋ฅผ ๊ทธ๋ฆด๋•Œ์—๋Š” ์ด๋Ÿฐ ๊ตฌ์กฐ ๊ด€๋ จ ํƒœ๊ทธ๋“ค์„ ์ž˜ ์ด์šฉํ•ด์„œ ๋งŒ๋“ค์–ด์•ผ ํ•œ๋‹ค.

ํ‘œ ๊ตฌ์กฐ ๊ด€๋ จ ํƒœ๊ทธ
<caption> ํƒœ๊ทธ : ํ‘œ์˜ ์ œ๋ชฉ์„ ๋‚˜ํƒ€๋ƒ„
<table>ํƒœ๊ทธ์˜ ์ž์‹์œผ๋กœ ๊ฐ€์žฅ ์œ„์— ์„ ์–ธ์ด ๋˜์–ด์•ผํ•œ๋‹ค
<thead> : ์ œ๋ชฉ ํ–‰์„ ๊ทธ๋ฃนํ™”
<tfoot> : ๋ฐ”๋‹ฅํ–‰์„ ๊ทธ๋ฃนํ™”
<tbody> : ํ…Œ์ด๋ธ” ๋ณธ๋ฌธ ํ–‰์„ ๊ทธ๋ฃนํ™”

<table>
    <caption>Monthly Savings</caption>
    <thead>
        <tr>
            <th>Month</th>
            <th>Savings</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>January</td>
            <td>$100</td>
        </tr>
        <tr>
            <td>February</td>
            <td>$80</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Sum</td>
            <td>$180</td>
        </tr>
    </tfoot>
</table>
Monthly Savings
Month Savings
January $100
February $80
Sum $180
  • <tr> ํƒœ๊ทธ๋“ค์ด <thead>, <tfoot>, <tbody> ํƒœ๊ทธ๋กœ ๊ฐ์‹ธ์ ธ ์žˆ๋‹ค. ๋ชจ๋‘ ํ…Œ์ด๋ธ”์˜ ๊ตฌ์กฐ๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ํƒœ๊ทธ๋“ค
  • ์ œ๋ชฉํ–‰์„ ๋‚˜ํƒ€๋‚ผ๋•Œ์—๋Š” <td>๋Œ€์‹  <th>ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉ
  • ์ œ๋ชฉํ–‰์€ ์ข€ ๋” ๊ตต์€ ๊ธ€์”จ๋กœ ํ‘œํ˜„๋œ๋‹ค
  • <tfoot>์€ <tbody> ๋’ค์— ์œ„์น˜ํ•ด์•ผ ํ•œ๋‹ค. <tfoot>์˜ ์œ„์น˜๊ฐ€ <tbody> ์•ž์— ๋‚˜์˜ฌ ๊ฒฝ์šฐ ์›น ์ ‘๊ทผ์„ฑ์˜ ํ‚ค๋ณด๋“œ์˜ ์ดˆ์  ์ด๋™ ์ˆœ์„œ ํ•ญ๋ชฉ์— ๋ฌธ์ œ๊ฐ€ ์žˆ๊ธฐ ๋•Œ๋ฌธ

์…€ ๋ณ‘ํ•ฉ ์†์„ฑ
colspan : ์…€์„ ๊ฐ€๋กœ๋ฐฉํ–ฅ์œผ๋กœ ๋ณ‘ํ•ฉ
rowspan : ์„ธ๋กœ๋ฐฉํ–ฅ์œผ๋กœ ๋ณ‘ํ•ฉ
์†์„ฑ๊ฐ’ : ๋ณ‘ํ•ฉํ•  ์…€์˜ ๊ฐฏ์ˆ˜

์…€ ๊ฐฏ์ˆ˜ ๊ณ„์‚ฐ๋ฐฉ๋ฒ•

  • ๋ณ‘ํ•ฉ๋˜์ง€ ์•Š์€ ํ–‰์˜ ์›๋ž˜ ์…€ ๊ฐฏ์ˆ˜๋ฅผ ์„ธ๊ณ  ๋ชจ๋“  ํ–‰์ด ์ด ์…€ ๊ฐฏ์ˆ˜๋งŒํผ ์…€ ํƒœ๊ทธ๋ฅผ ๊ฐ–๊ณ  ์žˆ๋Š”๋‹ค๊ณ  ์ƒ๊ฐ. ex) 2๊ฐœ
  • ํŠน์ •์…€์— colspan์ด ๋“ค์–ด๊ฐ€๊ฒŒ ๋˜๋ฉด ์ด ์…€์€ colspan์˜ ์†์„ฑ๊ฐ’๋งŒํผ ์…€์„ ๊ฐ–๊ณ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐ. ์‹ค์ œ๋กœ <td>ํƒœ๊ทธ๊ฐ€ ํ•˜๋‚˜์ด์ง€๋งŒ ์†์„ฑ๊ฐ’๋งŒํผ, ์ฆ‰ 2๊ฐœ๋งŒํผ์˜ ๊ฐฏ์ˆ˜๊ฐ€ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•˜๊ณ  ๊ณ„์‚ฐํ•ด์•ผํ•จ.
  • rowspan์ด ๋“ค์–ด๊ฐ„ ์…€์€ ๊ทธ ๋‹ค์Œํ–‰, ๊ทธ ๋‹ค์Œ <tr>ํƒœ๊ทธ์—์„œ ์…€ ๊ฐฏ์ˆ˜๋ฅผ ์…€๋•Œ 1์„ ๋”ํ•œ ์ƒํƒœ๋กœ ์‹œ์ž‘ํ•˜๊ธฐ
<table>
    <caption>Monthly Savings</caption>
    <thead>
        <tr>
            <th>Month</th>
            <th>Savings</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>January</td>
            <td>$100</td>
        </tr>
        <tr>
            <td>February</td>
            <td rowspan="2">$80</td> <!--1+1-->
        </tr>
        <tr>
          <td>March</td>
         </tr>
    </tbody>
    <tfoot>
        <tr>
          <td colspan="2">Sum</td> <!--1-->
        </tr>
    </tfoot>
</table>
Monthly Savings
Month Savings
January $100
February $80
March
Sum
<table>
  <caption>Specification values</caption>
  <thead>
  <tr>
    <th rowspan="2">Grade.</th>
    <th rowspan="2">Point.</th>
    <th colspan="2">Strength.</th>
    <th rowspan="2">Percent.</th>
  </tr>
  <tr>
    <th>kg/mm</th>
    <th>lb/in</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>Hard</td>
    <td>0.45</td>
    <td>56.2</td>
    <td>80,000</td>
    <td>20</td>
  </tr>
  <tr>
    <td>Medium</td>
    <td>0.45</td>
    <td>49.2</td>
    <td>70,000</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Soft</td>
    <td>0.45</td>
    <td>42.2</td>
    <td>60,000</td>
    <td>30</td>
  </tr>
  </tbody>
</table>
Specification values
Grade. Point. Strength. Percent.
kg/mm lb/in
Hard 0.45 56.2 80,000 20
Medium 0.45 49.2 70,000 25
Soft 0.45 42.2 60,000 30

ํ…Œ์ด๋ธ” ๊ด€๋ จ ๊ธฐํƒ€ ํƒœ๊ทธ ๋ฐ ์†์„ฑ

colgroup, col ํƒœ๊ทธ
scope, headers์†์„ฑ์€ ์ž˜ ์‚ฌ์šฉ๋œ๋‹ค.


ํผ ์š”์†Œ

์ธํ„ฐ๋„ท์„ ํ•˜๋‹ค๋ณด๋ฉด ์–ด๋–ค ์š”์†Œ์˜ ํ…์ŠคํŠธ๋ฅผ ์ง์ ‘ ์ž…๋ ฅ, ์–ด๋–ค ์š”์†Œ๋“ค ์ค‘ ํ•˜๋‚˜๋ฅผ ์„ ํƒ, ์–ด๋–ค ์š”์†Œ๋ฅผ ํด๋ฆญํ•ด์„œ ์–ด๋–ค ๋™์ž‘์„ ์‹คํ–‰์‹œํ‚ค๋Š” ๋“ฑ
์‚ฌ์šฉ์ž๊ฐ€ ์ง์ ‘ ์•ก์…˜์„ ์ทจํ•˜๊ณ  ๊ทธ ๊ฐ’์„ ์„œ๋ฒ„์— ์ „๋‹ฌํ•˜๋Š” ๊ฒฝ์šฐ ์กด์žฌ
ex) ํšŒ์›๊ฐ€์ž…, ๊ฐœ์ธ ์ •๋ณด ์„ ํƒ ๋“ฑ

ํผ ์š”์†Œ : ์„œ๋ฒ„์— ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌํ•˜๊ธฐ ์œ„ํ•œ ์š”์†Œ

input ์š”์†Œ

  • ๋‚ด์šฉ์ด ์—†๋Š” ๋นˆ ์š”์†Œ
  • ์ธ๋ผ์ธ ๋ ˆ๋ฒจ ์š”์†Œ
  • type ์†์„ฑ์˜ ๊ฐ’์— ๋”ฐ๋ผ์„œ ์—ฌ๋Ÿฌ ์ข…๋ฅ˜์˜ ์ž…๋ ฅ ์–‘์‹์œผ๋กœ ๋‚˜ํƒ€๋‚œ๋‹ค.

type="text"

  • id, ์ด๋ฆ„, ์ฃผ์†Œ, ์ „ํ™”๋ฒˆํ˜ธ ์ฒ˜๋Ÿผ ์ง์ ‘ ํ…์ŠคํŠธ๋ฅผ ์ž…๋ ฅํ•˜๋Š” ๊ฒฝ์šฐ์— ์‚ฌ์šฉ
  • placeholder ์†์„ฑ ์กด์žฌ.
    • ์‚ฌ์šฉ์ž๊ฐ€ ๊ฐ’์„ ์ž…๋ ฅํ•˜๊ธฐ ์ „์— ๋ฏธ๋ฆฌ placeholder์˜ ์†์„ฑ๊ฐ’ ๋‚ด์šฉ์ด ๋…ธ์ถœ๋œ๋‹ค
    • ์‚ฌ์šฉ์ž๊ฐ€ ์ž…๋ ฅํ•˜๋ฉด ์‚ฌ๋ผ์ง€๊ฒŒ๋” ๋งŒ๋“ค์–ด์„œ ๋งˆ์น˜ ์–‘์‹ ๊ฐ€์ด๋“œ์ฒ˜๋Ÿผ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค
์•„์ด๋””: <input type="text" placeholder="์˜๋ฌธ์œผ๋กœ๋งŒ ์จ์ฃผ์„ธ์š”">

type="password"

  • ์•”ํ˜ธ๋ฅผ ์ž…๋ ฅ๋ฐ›๋Š” ์šฉ๋„
  • ํ™”๋ฉด์—๋Š” type="text"์™€ ๋™์ผํ•ด ๋ณด์ด์ง€๋งŒ ๊ฐ’์„ ์ž…๋ ฅํ• ๋•Œ ๋…ธ์ถœ์ด ๋˜์ง€ ์•Š์Œ.
  • ์„œ๋ฒ„์— ์ „๋‹ฌํ• ๋•Œ๋งŒ ์ž…๋ ฅํ•œ ๊ฐ’์ด ๋„˜์–ด๊ฐ
<input type="password">

type="radio"

  • ํ•˜๋‚˜๋งŒ ์„ ํƒ๊ฐ€๋Šฅํ•œ ์„ ํƒ์ง€.
  • ๋‹ค๋ฅธ ํ•˜๋‚˜๋ฅผ ์„ ํƒํ•˜๋ฉด ๋‹ค๋ฅธ ํ•˜๋‚˜๋Š” ์ž๋™์œผ๋กœ ์ทจ์†Œ๋˜๋Š” ์ƒํ˜ธ๋ฐฐํƒ€์ ์ธ ํ•ญ๋ชฉ๋“ค ์‚ฌ์ด์— ์“ฐ๋Š” ํƒ€์ž…
  • name ์†์„ฑ
    • ๊ฐ™์€ ์„ฑ๊ฒฉ์˜ radio ๋ฒ„ํŠผ์ž„์„ ๋ช…์‹œํ•ด์•ผํ•จ
    • radio๊ฐ€ ์—ฌ๋Ÿฌ๊ฐœ ๋‚˜์˜ฌ ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ name์œผ๋กœ ๋ช…์‹œํ•˜์ง€ ์•Š์œผ๋ฉด ๋ธŒ๋ผ์šฐ์ €๋Š” ์„œ๋กœ ์ƒํ˜ธ๋ฐฐํƒ€์ ์ธ ๊ด€๊ณ„์ž„์„ ํ™•์ธํ•  ์ˆ˜ ์—†๋‹ค
<input type="radio" name="gender"> ๋‚จ์ž
<input type="radio" name="gender"> ์—ฌ์ž

type="checkbox"

  • ์ค‘๋ณต์œผ๋กœ ์„ ํƒ๊ฐ€๋Šฅํ•จ
  • radio์™€ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ name์†์„ฑ์„ ์ด์šฉํ•ด์„œ ๊ฐ’์„ ๋ฌถ์–ด์ค˜์•ผ ์‹ค์ œ ๊ฐ’์ด ์ „๋‹ฌ๋  ๋•Œ ์ž˜ ๊ตฌ๋ถ„๋ผ์„œ ์ „๋‹ฌ๋œ๋‹ค
<input type="checkbox" name="hobby"> ๋“ฑ์‚ฐ
<input type="checkbox" name="hobby"> ๋…์„œ
<input type="checkbox" name="hobby" checked> ์šด๋™
  • radio, checkbox๋Š” checked๋ผ๋Š” ์†์„ฑ ์กด์žฌ
  • ๊ฐ’์ด ์—†๋Š” ํ˜•ํƒœ์ด๋‹ค. boolean ์†์„ฑ
  • ์†์„ฑ์ด ์กด์žฌํ•˜๋ฉด ๊ทธ๊ฒƒ๋งŒ์œผ๋กœ true, ์ฐธ์ด๋˜๊ณ  ์†์„ฑ์ด ์—†์œผ๋ฉด ๊ฑฐ์ง“, false๊ฐ€ ๋˜๋Š” ๋™์ž‘
  • ํ•ด๋‹น ์†์„ฑ์ด ์กด์žฌํ•˜๋ฉด ์‚ฌ์šฉ์ž๊ฐ€ ์ฒดํฌ๋ฅผ ํ•˜๊ฑฐ๋‚˜ ์„ ํƒํ•˜์ง€ ์•Š๋”๋ผ๋„ ๋ฏธ๋ฆฌ ๊ธฐ๋ณธ๊ฐ’์œผ๋กœ ์ฒดํฌ๋œ ์ƒํƒœ๋กœ ๋‚˜์˜ค๊ฒŒ๋” ํ•˜๋Š” ์†์„ฑ

type="file"

  • ๋‚ด ์ปดํ“จํ„ฐ์— ์žˆ๋Š” ํŒŒ์ผ๋“ค์„ ์„œ๋ฒ„์— ์˜ฌ๋ฆด๋•Œ ์‚ฌ์šฉํ•˜๋Š” ํƒ€์ž…
  • ๋ณธ์ธ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€ ๋“ฑ๋ก, ๊ฒŒ์‹œ๋ฌผ์˜ ์ฒจ๋ถ€ํŒŒ์ผ์„ ์˜ฌ๋ฆด๋•Œ ์‚ฌ์šฉ
<input type="file">

image, submit, reset, button ๋ชจ๋‘ ํด๋ฆญ์ด ๊ฐ€๋Šฅํ•œ ๋ฒ„ํŠผ์„ ๋งŒ๋“ค์–ด์ฃผ๋Š” ํƒ€์ž…

type="submit"

  • ๊ฐ’์„ ์ œ์ถœ, ์ „์†กํ•˜๋Š” ๋ฒ„ํŠผ
  • ๊ฐ’์ด ์„œ๋ฒ„๋กœ ์ „์†ก๋จ

type="reset"

  • ๊ฐ’์„ ์ดˆ๊ธฐํ™”ํ•˜๋Š” ๋ฒ„ํŠผ
  • ๊ฐ’์„ ์ดˆ๊ธฐ์ƒํƒœ๋กœ ๋ณ€๊ฒฝํ•˜๋Š” ๋™์ž‘. ๊ฐ’์„ ์ „๋‹ฌํ•˜๊ฑฐ๋‚˜ ํ•˜์ง€ ์•Š์Œ

type="button"

  • ์•„๋ฌด๋Ÿฐ ๊ธฐ๋ณธ๋™์ž‘๋„ ์ฃผ์–ด์ง€์ง€ ์•Š๋Š” ๋ฒ„ํŠผ
  • ๊ฐœ๋ฐœ์ž๊ฐ€ ์ง์ ‘ ์ปค์Šคํ…€ํ•ด์„œ ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•ด์ฃผ์–ด์•ผํ• ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ํƒ€์ž…

submit, reset, button type๋ชจ๋‘ value ์†์„ฑ์œผ๋กœ ๋ฒ„ํŠผ ์ด๋ฆ„ ๋ณ€๊ฒฝ ๊ฐ€๋Šฅ

type="image"

  • submit ๋ฒ„ํŠผ๊ณผ ๋™์ผํ•˜๊ฒŒ ๊ฐ’์„ ์ „์†กํ•˜๋Š” ๋™์ž‘
  • ๋ฒ„ํŠผ์˜ ๋ชจ์–‘์— ์ด๋ฏธ์ง€๋ฅผ ์‚ฝ์ž…ํ•  ์ˆ˜ ์žˆ๋‹ค
  • src ์†์„ฑ๊ณผ alt ์†์„ฑ์ด ๋ฐ˜๋“œ์‹œ ํ•„์š”. width, height์†์„ฑ๋„ ๊ฐ€๋Šฅ
<form action="./test.html">
    ๋ฉ”์‹œ์ง€: <input type="text" name="message"><br>
    <input type="submit" value="์ „์†ก">
    <input type="reset" value="์ทจ์†Œ">
    <input type="image" src="http://placehold.it/50x50?text=click" alt="click" width="50" height="50">
    <input type="button" value="๋ฒ„ํŠผ">
</form>

select ์š”์†Œ

  • ์„ ํƒ๋ชฉ๋ก์ƒ์ž, ์ฝค๋ณด ๋ฐ•์Šค
  • ๋ช‡๊ฐœ์˜ ์„ ํƒ์ง€๋ฅผ ๋…ธ์ถœ์‹œํ‚ค๊ณ  ๊ทธ์ค‘ ํ•˜๋‚˜๋ฅผ ์„ ํƒํ•˜๊ฒŒ๋” ํ•˜๋Š” ์š”์†Œ
<select>
    <option>์„œ์šธ</option>
    <option>๊ฒฝ๊ธฐ</option>
    <option>๊ฐ•์›</option>
    ...
</select>
  • <select>ํƒœ๊ทธ์˜ ์ž์‹์œผ๋กœ <option>ํƒœ๊ทธ๊ฐ€ ๋“ค์–ด๊ฐ
  • <option>ํƒœ๊ทธ์— ๊ฐ ํ•ญ๋ชฉ์„ ๋„ฃ์œผ๋ฉด ๋œ๋‹ค
  • <option> ํƒœ๊ทธ ์†์„ฑ : selected
    radio, checkbox์˜ checked์™€ ๋™์ผํ•œ ๊ธฐ๋Šฅ

TEXTAREA ์š”์†Œ
์‚ฌ์šฉ์ž์—๊ฒŒ ์—ฌ๋Ÿฌ์ค„์˜ ํ…์ŠคํŠธ๋ฅผ ์ž…๋ ฅ๋ฐ›๊ณ ์ž ํ• ๋•Œ ์‚ฌ์šฉ๋˜๋Š” ํƒœ๊ทธ

type="text"๋Š” ํ•œ์ค„๋งŒ ์ž…๋ ฅ๊ฐ€๋Šฅํ–ˆ์Œ

<textarea rows="5" cols="30" placeholder="์ž๊ธฐ์†Œ๊ฐœ๋Š” ์งง๊ฒŒ ํ•ด์ฃผ์„ธ์š”">
    ...
</textarea>
  • ๋ฐ•์Šค์˜ ํฌ๊ธฐ๋ฅผ ์กฐ์ ˆํ•˜๋Š” ์†์„ฑ -> cols, rows ์†์„ฑ
    • cols ์†์„ฑ๊ฐ’
      : ํ•œ์ค„์— ํ‘œํ˜„๋˜๋Š” ๊ธ€์ž์ˆ˜. ์˜๋ฌธ๊ธฐ์ค€์ด๊ธฐ ๋•Œ๋ฌธ์— ํ•œ๊ธ€๋กœ๋Š” ์ •ํ™•ํ•˜์ง€ ์•Š์„ ์ˆ˜ ์žˆ๋‹ค
    • rows ์†์„ฑ๊ฐ’
      : ํ•œ๋ฒˆ์— ๋ณด์ผ ๊ธ€์ž์˜ ๋ผ์ธ ์ˆ˜
  • placeholder ์†์„ฑ ๊ฐ€๋Šฅ

BUTTON ์š”์†Œ
์‚ฌ์šฉ์ž๊ฐ€ ํด๋ฆญ๊ฐ€๋Šฅํ•œ ๋ฒ„ํŠผ์„ ๋งŒ๋“ค์–ด์คŒ

  • type์†์„ฑ ๊ฐ’์œผ๋กœ submit, reset, button 3๊ฐ€์ง€ ์กด์žฌ
  • button๊ณผ input type์˜ ์š”์†Œ๋“ค์€ ๋ชจ๋‘ ๊ฐ๊ฐ ๊ฐ™์€ ์—ญํ• ์„ ํ•˜๋Š” type๋“ค์ด๋‹ค.
  • ์ฐจ์ด์ 
    • input type๋“ค์€ ๋‹ค ๋นˆํƒœ๊ทธ์˜€์ง€๋งŒ button์€ ์•„๋‹˜
    • buttonํƒœ๊ทธ๋Š” ์•ˆ์— ๋‚ด์šฉ์„ ์ง์ ‘ ๋„ฃ์„ ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์Šคํƒ€์ผ์ ์ธ ์ธก๋ฉด์—์„œ ์ข€ ๋” ์ž์œ ๋กœ์šด ํ‘œํ˜„์ด๊ฐ€๋Šฅํ•จ.
      (input type="image" ๋Œ€์‹  button์š”์†Œ์— image ์š”์†Œ๋ฅผ ๋„ฃ์œผ๋ฉด ๋จ)
<button type="submit|reset|button">๋ฒ„ํŠผ์ด๋ฆ„</button>

์ง€๊ธˆ๊นŒ์ง€ ํผ ์š”์†Œ๋“ค์€ ์‚ฌ์šฉ์ž๊ฐ€ ๊ฐ’์„ ์ž…๋ ฅํ•˜๋Š” ํผ ์š”์†Œ๋“ค
์ด์ œ๋ถ€ํ„ฐ๋Š” ์™ธ์ ์ธ ํผ ๊ด€๋ จ ์š”์†Œ๋“ค

LABEL ์š”์†Œ
ํผ ์š”์†Œ์™€ ์—ฐ๊ฒฐํ•ด์ฃผ๊ธฐ ์œ„ํ•จ์œผ๋กœ ์‚ฌ์šฉ๋จ

์›น ์ ‘๊ทผ์„ฑ ํ–ฅ์ƒ์— ๋„์›€์ด ๋˜๋ฏ€๋กœ ํ•„์ˆ˜์ ์œผ๋กœ ์„ ์–ธํ•ด์•ผํ•จ

  • ์—ฐ๊ฒฐํ•ด์ฃผ๊ณ ์ž ํ•˜๋Š” ํผ ์š”์†Œ์˜ id ์†์„ฑ๊ฐ’๊ณผ ํ•ด๋‹น label์š”์†Œ์˜ for์†์„ฑ์˜ ๊ฐ’์„ ๋™์ผํ•˜๊ฒŒ ์ ์–ด์•ผํ•จ.
  • label์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด, ์š”์†Œ์˜ ์ด๋ฆ„๋ถ€๋ถ„ ์ฆ‰ label์„ ํด๋ฆญํ•˜๋ฉด ํ•ด๋‹น ํผ ์š”์†Œ๋ฅผ ํด๋ฆญํ•œ๊ฒƒ์ฒ˜๋Ÿผ ๋™์ž‘ํ•จ.
<label for="name">์ด๋ฆ„</label>: <input type="text" id="name"><br>
<label for="nickname">์ด๋ฆ„</label>: <input type="text" id="nickname"><br>
<label for="address">์ด๋ฆ„</label>: <input type="text" id="address"><br>

์ด๋ฆ„:

์ด๋ฆ„:

์ด๋ฆ„:

'์ด๋ฆ„'์„ ํด๋ฆญํ•˜๋ฉด ํผ ์š”์†Œ๋ฅผ ํด๋ฆญํ•œ๊ฒƒ์ฒ˜๋Ÿผ ์ž…๋ ฅ ํ•„๋“œ์— ์ดˆ์ ์ด ๊ฐ„๋‹ค.

radio, checkbox์—์„œ๋Š” label์š”์†Œ๋ฅผ ํ•ญ๋ชฉ๋งˆ๋‹ค ์ฃผ์–ด์•ผํ•จ

์„ฑ๋ณ„: <label for="male">๋‚จ์ž</label><input type="radio" name="gender" id="male" checked>,<label for="female">์—ฌ์ž</label><input type="radio" name="gender" id="female"> 

์„ฑ๋ณ„: ๋‚จ์ž,์—ฌ์ž


FIELDSET, LEGEND์š”์†Œ
ํผ ์š”์†Œ๋“ค์„ ๊ตฌ์กฐํ™”ํ•˜๊ธฐ ์œ„ํ•ด ํ•„์š”ํ•œ ํƒœ๊ทธ๋“ค

<fieldset> ํƒœ๊ทธ : ํผ ์š”์†Œ๋ฅผ ๊ทธ๋ฃนํ™”ํ•ด์ฃผ๋Š” ํƒœ๊ทธ
<legend> ํƒœ๊ทธ : fieldset ํƒœ๊ทธ๋กœ ๋ฌถ์ธ ๊ทธ๋ฃน์˜ ์ด๋ฆ„์„ ์ง€์ •ํ•ด์ฃผ๋Š” ํƒœ๊ทธ

  • <legend> ํƒœ๊ทธ๋ฅผ ์“ธ๋•Œ์—๋Š” fieldset ์š”์†Œ์— ๊ฐ€์žฅ ๋จผ์ € ์ž์‹์œผ๋กœ ์„ ์–ธ์ด ๋˜์–ด์•ผํ•œ๋‹ค.
  • <fieldset> ํƒœ๊ทธ๋กœ ํผ์„ ๊ทธ๋ฃนํ™”ํ• ๋•Œ์—๋Š” ๋ณดํ†ต ํผ์˜ ์„ฑ๊ฒฉ์— ๋”ฐ๋ผ์„œ ๊ตฌ๋ถ„ํ•จ.
    • ํšŒ์›๊ฐ€์ž…์„ ํ• ๋•Œ ํ•„์ˆ˜๋กœ ์ž…๋ ฅ๋ฐ›๋Š” ๋ถ€๋ถ„/๋ถ€๊ฐ€์ ์œผ๋กœ ์ž…๋ ฅ๋ฐ›๋Š” ๋ถ€๋ถ„
    • ์ด๋ฒคํŠธ ํŽ˜์ด์ง€ ์—์„œ ์ด๋ฒคํŠธ๋ฅผ ์‘๋ชจํ•˜๋Š” ๋ถ€๋ถ„/๊ฐœ์ธ์ •๋ณด๋ฅผ ์ž…๋ ฅํ•˜๋Š” ๋ถ€๋ถ„
<fieldset>
    <legend>๊ธฐ๋ณธ ์ •๋ณด</legend>
    ... ํผ ์š”์†Œ๋“ค ...
</fieldset>
<fieldset>
    <legend>๋ถ€๊ฐ€ ์ •๋ณด</legend>
    ... ํผ ์š”์†Œ๋“ค ...
</fieldset>

<form>ํƒœ๊ทธ
ํผ ์š”์†Œ๋“ค์„ ๊ฐ€์žฅ ํฌ๊ฒŒ ๊ฐ์‹ธ์ฃผ๋Š” ํƒœ๊ทธ

fieldset ์š”์†Œ๊นŒ์ง€ ๋‹ค ๊ฐ์‹ผ๋‹ค.
form ์š”์†Œ๋“ค์˜ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฌถ์–ด์„œ ์‹ค์ œ ์„œ๋ฒ„๋กœ ์ „์†กํ•ด์ฃผ๋Š” ์—ญํ• ์„ ํ•˜๋Š” ์ค‘์š”ํ•œ ํƒœ๊ทธ

๋ฐ์ดํ„ฐ๋ฅผ ๋ฌถ๋Š”๋‹ค
: ์–ด๋–ค ํŽ˜์ด์ง€์˜ ์ขŒ์ธก์—๋Š” ์–ด๋–ค ๊ฒŒ์‹œ๊ธ€์„ ์ž…๋ ฅํ•  ์ˆ˜ ์žˆ๋Š” ๋ถ€๋ถ„, ์šฐ์ธก์—๋Š” ์ด๋ฒคํŠธ ํŽ˜์ด์ง€๊ฐ€ ์žˆ๋‹ค๊ณ  ํ• ๋•Œ, ๊ฒŒ์‹œ๊ธ€์„ ์ž…๋ ฅํ•˜๊ณ  ์ „์†ก๋ฒ„ํŠผ์„ ๋ˆŒ๋ €์„๋•Œ ์ด๋ฒคํŠธ ์ž…๋ ฅ ์–‘์‹๊นŒ์ง€ ๊ฐ’์ด ์„œ๋ฒ„๋กœ ์ „์†ก๋˜๋ฉด ์•ˆ๋จ.
์ด๋ฒคํŠธ ํผ ์š”์†Œ์— ์ œ๋Œ€๋กœ ๊ฐ’์ด ์ž…๋ ฅ๋˜์ง€ ์•Š์•˜๊ธฐ ๋•Œ๋ฌธ์— ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๊ณ , ๊ฐ’๋“ค์ด ์ฒ˜๋ฆฌ๋˜๋Š” ๊ฐœ๋ฐœ ๋กœ์ง์ด ๋‹ค๋ฅด๊ธฐ ๋•Œ๋ฌธ์— ๊ฐ’์„ ๋ณด๋‚ด์•ผํ•˜๋Š” ์œ„์น˜๋„ ์™„์ „ํžˆ ๋‹ค๋ฅด๋‹ค.
์›ํ•˜๋Š” ํผ๋“ค์˜ ๊ฐ’๋งŒ ์„œ๋ฒ„๋กœ ์ „์†ก์„ ํ•ด์•ผํ•˜๋Š”๋ฐ, ์ด๋•Œ formํƒœ๊ทธ๋ฅผ ์ด์šฉํ•ด์„œ ๋‘ ์˜์—ญ์„ ๊ตฌ๋ถ„์ง€์–ด์ฃผ๋ฉด ์›ํ•˜๋Š” ํผ ์š”์†Œ๋“ค์˜ ๊ฐ’๋งŒ ์„œ๋ฒ„๋กœ ์ „์†ก์„ ํ•  ์ˆ˜ ์žˆ๋‹ค.

action ์†์„ฑ

ํผ ๋ฐ์ดํ„ฐ๋ฅผ ์ฒ˜๋ฆฌํ•˜๊ธฐ ์œ„ํ•œ ์„œ๋ฒ„์˜ ์ฃผ์†Œ๊ฐ€ ๋“ค์–ด๊ฐ
๊ฐ’์ด ์ „์†ก๋˜๋ฉด action ์†์„ฑ์— ์ ํ˜€์žˆ๋Š” ์œ„์น˜๋กœ ๊ฐ’์„ ๋˜์ ธ์ฃผ๊ฒŒ ๋œ๋‹ค.

method ์†์„ฑ

๊ฐ’์„ ์ „์†กํ• ๋•Œ ์–ด๋–ค ๋ฐฉ์‹์œผ๋กœ ์ „์†กํ• ์ง€๋ฅผ ์ง€์ •ํ•ด์ฃผ๋Š” ์†์„ฑ. get/post๋‘๊ฐ€์ง€ ๋ฐฉ๋ฒ• ์กด์žฌ

  • get
    ๋ณด๋‚ธ ๊ฐ’๋“ค์ด url์— ๋ถ™์–ด์„œ ์ „์†ก์ด ๋จ
    ๋ฏผ๊ฐํ•œ ์ •๋ณด๋ฅผ ๋‹ค๋ฃจ๋Š” ํฌ๋งท์—๋Š” ์‚ฌ์šฉํ•˜๋ฉด ์•ˆ๋จ. ํšŒ์›๊ฐ€์ž…, ๋กœ๊ทธ์ธ ์ •๋ณด ๋“ฑ
  • post
    url์— ํ‘œ์‹œ๋˜์ง€ ์•Š์Œ
<form action="/result.html" method="get">
    <fieldset>
        <legend>๊ธฐ๋ณธ ์ •๋ณด</legend>
        ... ํผ ์š”์†Œ๋“ค ...
    </fieldset>
    <fieldset>
        <legend>๋ถ€๊ฐ€ ์ •๋ณด</legend>
        ... ํผ ์š”์†Œ๋“ค ...
    </fieldset>
</form>

<form> ํƒœ๊ทธ๋Š” ๊ฐ’, ๋ฐ์ดํ„ฐ๋ฅผ ๋‹ค๋ฃจ๋Š” ๋ถ€๋ถ„์ด๋ฏ€๋กœ ์„œ๋ฒ„๊ฐœ๋ฐœ์ž๊ฐ€ ์ œ์–ดํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ํ›จ์”ฌ ๋งŽ๋‹ค.

0๊ฐœ์˜ ๋Œ“๊ธ€