๐Ÿ’ปUnit4




1. ์›น๊ฐœ๋ฐœ ์ดํ•ดํ•˜๊ธฐ

์›น ๊ฐœ๋ฐœ์—๋Š” ์„ธ๊ฐ€์ง€์˜ ๊ฐœ๋ฐœ ์–ธ์–ด๊ฐ€ ํ•„์š”ํ•˜๋‹ค. HTML๊ณผ CSS ๊ทธ๋ฆฌ๊ณ  Javascript๊ฐ€ ์žˆ๋‹ค.

HTML์€ ์›น์˜ ๋‚ด์šฉ๊ณผ ๊ตฌ์กฐ๋ฅผ ๋‹ด๋‹นํ•˜๊ณ , CSS๋Š” ์ฝ˜ํ…์ธ ๋ฅผ ๊พธ๋ฉฐ์ฃผ๋Š” ์‹œ๊ฐ์ ์ธ ํ‘œํ˜„ ์ฆ‰ , ์Šคํƒ€์ผ์„ ๋‹ด๋‹นํ•˜๋Š” ๋””์ž์ธ ์–ธ์–ด์ด๋‹ค. Javascript๋Š” ๊ตฌ์กฐ์™€ ์Šคํƒ€์ผ์ด ์™„์„ฑ๋œ ๊ฐ๊ฐ์˜ ์š”์†Œ์— ๋™์ž‘์„ ๋ถ€์—ฌํ•˜๊ณ  ์ƒํ˜ธ์ž‘์šฉ์„ ํ•  ์ˆ˜์žˆ๊ฒŒ ๋งŒ๋“œ๋Š” ๋™์ ์ฒ˜๋ฆฌ ์–ธ์–ด์ด๋‹ค.


2. HTML

HTML

HTML(HyperText Markup Language)๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์™€ ๊ฐ™์€ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด๊ฐ€ ์•„๋‹Œ ์›นํŽ˜์ด์ง€์˜ ๋‚ด์šฉ๊ณผ ๊ตฌ์กฐ๋ฅผ ๋‹ด๋‹นํ•˜๋Š” ๋งˆํฌ์—… ์–ธ์–ด์ด๋‹ค.

1. ๊ธฐ๋ณธ๊ตฌ์กฐ์™€ ๋ฌธ๋ฒ•

  • HTML์€ ์š”์†Œtag<> ๋“ค์˜ ์ง‘ํ•ฉ
  • Tag : ๋ถ€๋“ฑํ˜ธ <>๋กœ ๋ฌถ์ธ HTML์˜ ๊ธฐ๋ณธ ๊ตฌ์„ฑ ์š”์†Œ
  • TREE STRUCTURE

2. HTML ์š”์†Œ

โšช ์š”์†Œ (Element)

<ํƒœ๊ทธ> ๋‚ด์šฉ </ํƒœ๊ทธ>

HTML ์š”์†Œ๋Š” ์‹œ์ž‘ํƒœ๊ทธ(start tag), ์ข…๋ฃŒ ํƒœ๊ทธ(end tag) , ํƒœ๊ทธ ์‚ฌ์ด์— ์œ„์น˜ํ•œ ๋‚ด์šฉ(content)๋กœ ๊ตฌ์„ฑ

โšช ์š”์†Œ์˜ ์ค‘์ฒฉ (Nested Element)

<ํƒœ๊ทธ><ํƒœ๊ทธ>๋‚ด์šฉ</ํƒœ๊ทธ></ํƒœ๊ทธ>

<ํƒœ๊ทธ>
    <ํƒœ๊ทธ>๋‚ด์šฉ</ํƒœ๊ทธ>
</ํƒœ๊ทธ>

์š”์†Œ๋Š” ์ค‘์ฒฉ , ์š”์†Œ๋Š” ๋‹ค๋ฅธ์š”์†Œ๋ฅผ ํฌํ•จํ•  ์ˆ˜ ์žˆ์–ด์„œ ๋ถ€๋ชจ์™€ ์ž์‹ ๊ด€๊ณ„๊ฐ€ ์ด๋ฃจ์–ด ์ง„๋‹ค.
๋“ค์—ฌ์“ฐ๊ธฐ(Indent)๋ฅผ ์ด์šฉํ•ด์„œ ์ž์‹์š”์†Œ๋ฅผ ๊ตฌ๋ถ„ํ•œ๋‹ค.


โšช ๋นˆ ์š”์†Œ (Empty Element)

<meta charset="utf-8">

๋นˆ์š”์†Œ or ๋นˆํƒœ๊ทธ๋ผ๊ณ  ํ•œ๋‹ค. ๋‚ด์šฉ(content)์ด ์—†๋Š” ์š”์†Œ์ด๊ณ  ์†์„ฑ(Attribute)๋งŒ ๊ฐ€์งˆ ์ˆ˜ ์žˆ๋‹ค.

๋นˆ ์š”์†Œ ์ค‘ ๋Œ€ํ‘œ์ ์ธ ์š”์†Œ : br hr img input link meta

โšช ์ธ๋ผ์ธ๊ณผ ๋ธ”๋ก

์ธ๋ผ์ธ(Inline)์š”์†Œ

<span> ๋‚ด์šฉ </span>

์ธ๋ผ์ธ ์š”์†Œ๋Š” ๊ธ€์ž๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•œ ์š”์†Œ์ด๊ณ , ์ฝ˜ํ…์ธ  ์˜์—ญ์„ ์„ค์ •ํ•˜๋Š” ์šฉ๋„๋กœ ์‚ฌ์šฉ๋œ๋‹ค.
์ธ๋ผ์ธ ์š”์†Œ๋Š” ์ˆ˜ํ‰์œผ๋กœ ์Œ“์ด๊ณ  ์ธ๋ผ์ธ์š”์†Œ ์•ˆ์—๋Š” ์ธ๋ผ์ธ์š”์†Œ๋งŒ ํฌํ•จ์‹œํ‚ฌ ์ˆ˜ ์žˆ๋‹ค.
๋Œ€ํ‘œ์ ์ธ ์ธ๋ผ์ธ ์š”์†Œ <span> <a>

๋ธ”๋ก(Block)์š”์†Œ

<div> ๋‚ด์šฉ </div>

๋ธ”๋ก ์š”์†Œ๋Š” ์ฝ˜ํ…์ธ  ์˜์—ญ์„ ์„ค์ •ํ•˜๋Š” ์šฉ๋„๋กœ ์‚ฌ์šฉ๋œ๋‹ค. ์ธ๋ผ์ธ ์š”์†Œ์™€ ๋‹ค๋ฅธ ์ ์€ ์ฝ˜ํ…์ธ ๊ฐ€ ์ˆ˜์ง์œผ๋กœ ์Œ“์ด๊ณ  ๋ธ”๋ก์š”์†Œ ์•ˆ์—๋Š” ์ธ๋ผ์ธ์š”์†Œ ๋ฟ๋งŒ์•„๋‹ˆ๋ผ ๋ธ”๋ก์š”์†Œ๋„ ํฌํ•จ,์ค‘์ฒฉ ์‹œํ‚ฌ ์ˆ˜ ์žˆ๋‹ค.
๋Œ€ํ‘œ์ ์ธ ๋ธ”๋ก ์š”์†Œ <div> <h1> <p>


๐Ÿ“Œ ํ•ต์‹ฌ์š”์†Œ

<div>
  <h1> ์ œ๋ชฉ </h1>
  <p> ๋ฌธ์žฅ <p>
</div>

<div></div>

  • ๋ธ”๋ก(์ƒ์ž)์š”์†Œ
  • ํŠน๋ณ„ํ•œ ์˜๋ฏธ๊ฐ€ ์—†๋Š” ๊ตฌ๋ถ„์„ ์œ„ํ•œ ์š”์†Œ. (Division)
  • ๋ฌด์–ธ๊ฐ€๋ฅผ ์žก์•„๋‘๋Š” ๋˜๋Š” ์š”์†Œ๋ฅผ ๊ทธ๋ฃนํ™”,์˜์—ญ์„ ์žก์„๋•Œ ๋ฌถ์„๋•Œ ์‚ฌ์šฉ

<h1></h1>

  • ๋ธ”๋ก(์ƒ์ž)์š”์†Œ
  • ์ œ๋ชฉ์„ ์˜๋ฏธํ•˜๋Š” ์š”์†Œ. (Heading)
  • H1 ~ H6 ์ž‘์„์ˆ˜๋ก ๋” ์ค‘์š”ํ•œ ์ œ๋ชฉ์„ ์ •์˜

<p></p>

  • ๋ธ”๋ก(์ƒ์ž)์š”์†Œ
  • ๋ฌธ์žฅ์„ ์˜๋ฏธํ•˜๋Š” ์š”์†Œ. (Paragraph)
<img src="./dog.jpg" alt="๊ฐœ"/>

<img/>

  • ์ธ๋ผ์ธ(๊ธ€์ž)์š”์†Œ
  • ์ด๋ฏธ์ง€๋ฅผ ์‚ฝ์ž…ํ•˜๋Š” ์š”์†Œ. (Image)
  • src ๊ฒฝ๋กœ alt ์ด๋ฆ„ ํ•„์ˆ˜ ์†์„ฑ
<ul>
	<li>์‚ฌ๊ณผ</li>
    <li>๋”ธ๊ธฐ</li>
	<li>์ˆ˜๋ฐ•</li>
	<li>๋ง๊ณ </li>
</ul>

<ul>

  • ๋ธ”๋ก(์ƒ์ž)์š”์†Œ
  • ์ˆœ์„œ๊ฐ€ ํ•„์š”์—†๋Š” ๋ชฉ๋ก์˜ ์ง‘ํ•ฉ์„ ์˜๋ฏธ. (Unordered List)

<li>

  • ๋ธ”๋ก(์ƒ์ž)์š”์†Œ
  • ๋ชฉ๋ก ๋‚ด ๊ฐ ํ•ญ๋ชฉ (List Item)
<a href="https://www.naver.com">NAVER</a>
<a href="https://www.google.com" target="_blank">Google</a>

<a></a>

  • ์ธ๋ผ์ธ(๊ธ€์ž)์š”์†Œ
  • ๋‹ค๋ฅธ/๊ฐ™์€ ํŽ˜์ด์ง€๋กœ ์ด๋™ํ•˜๋Š” ํ•˜์ดํผ ๋งํฌ๋ฅผ ์ง€์ •ํ•˜๋Š” ์š”์†Œ. (Anchor)
  • ์†์„ฑ target ="_blank" ์ƒˆํƒญ

<span></span>

  • ์ธ๋ผ์ธ(๊ธ€์ž)์š”์†Œ
  • ํŠน๋ณ„ํ•œ ์˜๋ฏธ๊ฐ€ ์—†๋Š” ๊ตฌ๋ถ„์„ ์œ„ํ•œ ์š”์†Œ.

<br/>

  • ์ธ๋ผ์ธ(๊ธ€์ž)์š”์†Œ
  • ์ค„๋ฐ”๊ฟˆ ์š”์†Œ. (Break)

<input type="text"/>
<input type="text" placeholder="ID">
<input type="password" placeholder="password">

<input/>

  • ์ธ๋ผ์ธ(๊ธ€์ž)์š”์†Œ ๋ธ”๋ก(์ƒ์ž)์š”์†Œ = Inline-block
  • ๋ฒ ์ด์Šค๋Š” ์ธ๋ผ์ธ์š”์†Œ์ด์ง€๋งŒ ๋ธ”๋ก์š”์†Œ ํŠน์ง•๋„ ๊ฐ–๊ณ ์žˆ๋‹ค
  • ์‚ฌ์šฉ์ž๊ฐ€ ๋ฐ์ดํ„ฐ๋ฅผ ์ž…๋ ฅํ•˜๋Š” ์š”์†Œ.
<div class="preference">
    <label for="cheese">Do you like cheese?</label>
    <input type="checkbox" name="cheese" id="cheese">
</div>

<div class="preference">
    <label for="peas">Do you like peas?</label>
    <input type="checkbox" name="peas" id="peas">
</div>

<label></label>

  • ์ธ๋ผ์ธ(๊ธ€์ž)์š”์†Œ
  • ๋ผ๋ฒจ ๊ฐ€๋Šฅ ์š”์†Œ(input)์˜ ์ œ๋ชฉ.
  • input type = radio ๊ฒฝ์šฐ ๊ทธ๋ฃน์—์„œ 1๊ฐœ๋งŒ ์ž…๋ ฅ๋ฐ›์„ ์ˆ˜ ์žˆ๋‹ค
<button type="button">Regular button </button>
<button>Submit!!</button>
<input type="submit" value="Click Me!">

<button>

  • ํผ ์•ˆ์— ๋ฒ„ํŠผ์ด ์žˆ์œผ๋ฉด ๊ธฐ๋ณธ๊ฐ’์œผ๋กœ ํ•ด๋‹น ํผ์„ ์ œ์ถœ(submit)ํ•˜๊ฒŒ ๋œ๋‹ค
  • type ="button" ์†์„ฑ์„ ์ถ”๊ฐ€ํ•˜๋ฉด ์•„๋ฌด๊ฒƒ๋„ ํ•˜์ง€์•Š๋Š” ํ‰๋ฒ”ํ•œ ๋ฒ„ํŠผ

<!--์ฃผ์„-->

  • ์ˆ˜์ •์‚ฌํ•ญ์ด๋‚˜ ์„ค๋ช… ๋“ฑ์„ ์ž‘์„ฑ(์ฃผ์„)
  • ๋ธŒ๋ผ์šฐ์ €๋Š” ์ด ํƒœ๊ทธ๋ฅผ ํ•ด์„ํ•˜์ง€ ์•Š๊ธฐ ๋–„๋ฌธ์— ํ™”๋ฉด์— ๋‚ด์šฉ์ด ํ‘œ์‹œ๋˜์ง€ ์•Š์Œ.
  • Ctrl + / or Cmd + /

3. ์‹œ๋งจํ‹ฑ ์š”์†Œ

์‹œ๋งจํ‹ฑ ์š”์†Œ(semantic element)
Semantic : '์˜๋ฏธ๊ฐ€ ์žˆ๋Š”, ์˜๋ฏธ๋ก ์ ์ธ'
์˜๋ฏธ๋ฅผ ๊ฐ€์ง„ ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ์‹์„ ์ถ”๊ตฌํ•œ๋‹ค. ์ข…๋ฅ˜์—๋Š” form, table, img, footer ๋“ฑ์ด ์žˆ์œผ๋ฉฐ content์˜ ์˜๋ฏธ๋ฅผ ๋ช…ํ™•ํžˆ ์„ค๋ช…ํ•œ๋‹ค.
๊ฒ€์ƒ‰์—”์ง„์ด ์‹œ๋งจํ‹ฑ ์š”์†Œ๋ฅผ ํ•ด์„ํ•ด์„œ ๊ฒ€์ƒ‰ํ•˜๊ณ  , ๊ฐœ๋ฐœ์ž๋“ค์ด ์„œ๋กœ ํ˜‘์—…ํ• ๋•Œ ์ฝ”๋“œ๋ฅผ ํ•ด์„ํ•˜๊ธฐ๊ฐ€ ํŽธ๋ฆฌํ•˜๋‹ค. content๋ฅผ ์ฝ์„๋•Œ ํ‘œ์ง€ํŒ ๊ฐ™์€ ์—ญํ• ์ด๋ผ ์ƒ๊ฐํ•˜์ž!

์‹œ๋ฉ˜ํ‹ฑ ์š”์†Œ์˜ ์ข…๋ฅ˜

  • <section> : ๋ณธ๋ฌธ์˜ ์—ฌ๋Ÿฌ ๋‚ด์šฉ(article)์„ ํฌํ•จํ•˜๋Š” ๊ณต๊ฐ„์„ ์˜๋ฏธํ•œ๋‹ค
  • <article> : ๋ณธ๋ฌธ์˜ ์ฃผ๋‚ด์šฉ์˜ ๋“ค์–ด๊ฐ€๋Š” ๊ณต๊ฐ„ , ๋…๋ฆฝ์ ์ด๊ณ  ์ž์ฒด ํฌํ•จ๋œ ์ฝ˜ํ…์ธ ๋ฅผ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค.
  • <aside> : ์‚ฌ์ด๋“œ์— ์œ„์น˜ํ•˜๋Š” ๊ณต๊ฐ„, ๋ณธ๋ฌธ์˜ ์ฃผ์š” ๋ถ€๋ถ„์„ ํ‘œ์‹œํ•˜๊ณ  ๋‚จ์€ ๋ถ€๋ถ„์„ ์„ค๋ช…ํ•˜๋Š” ์š”์†Œ. ํŠน๋ณ„ํ•œ ์ผ์ด ์•„๋‹ˆ๋ฉด ์‚ฌ์ด๋“œ๋ฐ”๋‚˜ ๊ด‘๊ณ ์ฐฝ ๋“ฑ ์ค‘์š”ํ•˜์ง€ ์•Š์€ ๋ถ€๋ถ„์— ์‚ฌ์šฉ๋œ๋‹ค.
  • <footer> : ์ผ๋ฐ˜์ ์œผ๋กœ ํŽ˜์ด์ง€๋‚˜ ํ•ด๋‹น ํŒŒํŠธ์˜ ๊ฐ€์žฅ ์•„๋žซ๋ถ€๋ถ„์— ์œ„์น˜ํ•˜๋ฉฐ, ์‚ฌ์ดํŠธ์˜ ๋ผ์ด์„ ์Šค, ์ฃผ์†Œ, ์—ฐ๋ฝ์ฒ˜ ๋“ฑ์„ ๋„ฃ์„ ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค.
  • <header> : ์ผ๋ฐ˜์ ์œผ๋กœ ํŽ˜์ด์ง€๋‚˜ ํ•ด๋‹น ์„น์…˜์˜ ๊ฐ€์žฅ ์œ—๋ถ€๋ถ„์— ์œ„์น˜ํ•˜๋ฉฐ, ์‚ฌ์ดํŠธ์˜ ์ œ๋ชฉ์ด ๋ณดํ†ต ๋“ค์–ด๊ฐ‘๋‹ˆ๋‹ค. ์„ ํƒ์ ์œผ๋กœ ์ƒ๋‹จ๋ฐ”๋‚˜ ๊ฒ€์ƒ‰์ฐฝ ๋“ฑ์ด ์•ˆ์— ๋“ค์–ด๊ฐˆ ์ˆ˜ ์žˆ๋‹ค.
  • <nav> : ๋‚ด๋น„๊ฒŒ์ด์…˜(navigation)์˜ ์•ฝ์ž๋กœ, ์ผ๋ฐ˜์ ์œผ๋กœ ์ƒ๋‹จ๋ฐ” ๋“ฑ ์‚ฌ์ดํŠธ๋ฅผ ์•ˆ๋‚ดํ•˜๋Š” ์š”์†Œ์— ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ๋ณดํ†ต์€ ์•ˆ์— <ul>์„ ๋„ฃ์–ด ๋ชฉ๋ก ํ˜•ํƒœ๋กœ ์‚ฌ์šฉํ•œ๋‹ค.
  • <main> : ๋ฌธ์„œ์˜ ์ฃผ๋œ ์ฝ˜ํ…์ธ ๋ฅผ ํ‘œ์‹œํ•œ๋‹ค


3. HTML ์‹ฌํ™”

id ์™€ class ๋ชฉ์ ์— ๋งž๊ฒŒ ์‚ฌ์šฉ

<input id = "id-input" class = "input focus" type="text" placeholder="ID"></input>
<input id = "password-input" class = "input focus" type="password" placeholder="password"></input>
<button id = "login-button">Login</button>
<input id = "keep-checkbox" type="checkbox">Keep Login</input>

<link rel="stylesheet" href="style.css">
  • id ๊ณ ์œ (unique)ํ•œ ์ด๋ฆ„์„ ๋ถ™์ผ๋•Œ ์‚ฌ์šฉ , ๋‹จ ํ•œ ๋ฒˆ๋งŒ ์‚ฌ์šฉ๋˜์–ด์•ผ ํ•˜๋Š” ์ด๋ฆ„์ด ํ•„์š”ํ•œ ๊ฒฝ์šฐ์— ์‚ฌ์šฉํ•œ๋‹ค. ์ค‘๋ณต ์ง€์ •์ด ๋ถˆ๊ฐ€!

  • class ๋ฐ˜๋ณต๋˜๋Š” ์˜์—ญ์„ ์œ ํ˜•๋ณ„๋กœ ๋ถ„๋ฅ˜ํ•  ๋•Œ ์‚ฌ์šฉ , ๊ฐ™์€ class๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ์š”์†Œ๋Š” ๊ฐ™์€ ์œ ํ˜•์œผ๋กœ ๋ถ„๋ฅ˜๋œ ์š”์†Œ๋กœ ์•Œ ์ˆ˜ ์žˆ๋‹ค. ์ค‘๋ณต ์ง€์ •์ด ๊ฐ€๋Šฅ!






์›น์˜ ๋‚ด์šฉ๊ณผ ๊ตฌ์กฐ๋ฅผ ๋‹ด๋‹นํ•˜๋Š” ๋งˆํฌ์—…์–ธ์–ด์ธ HTML์„ ๋ฐฐ์› ๋‹ค.
์‹œ๋งจํ‹ฑ์š”์†Œ๊ฐ€ ๊ฒ€์ƒ‰์—”์ง„์ด ์„ ํ˜ธํ•œ๋‹ค๋Š” ์ ์—์„œ SEO๋ฅผ ์•Œ๊ฒŒ ๋˜์—ˆ๋‹ค. SEO ๊ฒ€์ƒ‰์—”์ง„ ์ตœ์ ํ™” , ํ•œ๋ฒˆ ๊ตฌ๊ธ€ ๊ฒ€์ƒ‰์„ ํ†ตํ•ด ์•Œ์•„๋ด์•ผ๊ฒ ๋‹ค. ๋ถ€์กฑํ•œ ํƒœ๊ทธ ์ง€์‹๋„ ๋ณต์Šตํ•˜์ž!

profile
FE ๊ฐœ๋ฐœ์ž(์ง„) FE ๊ฐœ๋ฐœ์ž๋ฅผ ๊ฟˆ๊พธ๋ฉฐ ์„ฑ์žฅ์ค‘

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