Chap01 - seohyeon2/Web-Publishing GitHub Wiki

โœ“ ๋ฐฐ์šด ๋‚ด์šฉ

01. HTML ๊ธฐ๋ณธ ํƒœ๊ทธ


<!DOCTYPE html>

  • ์›น๋ธŒ๋ผ์šฐ์ €์—๊ฒŒ HTML ๋ฒ„์ „์„ ์•Œ๋ ค์ฃผ๋Š” ์—ญํ•  (์ž๋™์œผ๋กœ html5๋ฒ„์ „ ์‚ฌ์šฉ)
  • HTML ํŒŒ์ผ ์“ธ ๋•Œ ๊ฐ€์žฅ ๋จผ์ € ์„ ์–ธ ํ•ด์•ผ ํ•จ
  • ๋‹ค๋ฅธ ๋ฒ„์ „ ์‚ฌ์šฉ ์‹œ <!DOCTYPE>์„ ๋ณต์žกํ•˜๊ฒŒ ์จ์•ผ ํ•จ

<title>

  • ํŽ˜์ด์ง€ ์ œ๋ชฉ์„ ์ •ํ•  ๋•Œ ์“ฐ๋Š” ํƒœ๊ทธ
  • ๋ธŒ๋ผ์šฐ์ €์˜ ํƒญ์ด๋‚˜ ๋ฐฉ๋ฌธ ๊ธฐ๋ก์— ๋‚˜์™€ ์žˆ๋Š” ๋ฐ”๋กœ ๊ทธ ์ œ๋ชฉ
  • ๋‹ซ๋Š” ํƒœ๊ทธ ํ•„์ˆ˜
  • <title>ํŽ˜์ด์ง€ ์ œ๋ชฉ</title>

<h1> ~ <h6>

  • ๋จธ๋ฆฌ๋ง(heading)์„ ์ •์˜ํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ
  • ์ˆซ์ž๊ฐ€ ์ž‘์„ ์ˆ˜๋ก ๋” ์ค‘์š”ํ•œ ์ œ๋ชฉ์„ ๊ทœ์ •ํ•จ
  • ๋‹ซ๋Š” ํƒœ๊ทธ ํ•„์ˆ˜
  • <h1>๋จธ๋ฆฌ๋ง</h1>

<p>

  • ๋ฌธ๋‹จ์„(paragraph)์„ ์ •์˜ํ•  ๋•Œ ์‚ฌ์šฉ
  • <p> ํƒœ๊ทธ ์œ„,์•„๋ž˜์— ๊ธฐ๋ณธ์ ์œผ๋กœ ์—ฌ๋ฐฑ์ด ์žˆ์Œ
  • ์—ฌ๋ฐฑ์€ CSS margin ์†์„ฑ์œผ๋กœ ์กฐ์ • ๊ฐ€๋Šฅ
  • ๋‹ซ๋Š” ํƒœ๊ทธ ํ•„์ˆ˜
  • <p>๋ฌธ๋‹จ</p>

<b>

  • 'bold'์˜ ์•ฝ์ž๋กœ, ํ…์ŠคํŠธ๋ฅผ ๊ตต๊ฒŒ ์“ฐ๊ณ  ์‹ถ์„ ๋•Œ ์‚ฌ์šฉ
  • CSS์˜ font-weight ์†์„ฑ์„ ์‚ฌ์šฉํ•ด๋„ ๊ฐ™์€ ๊ฒฐ๊ณผ๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ์Œ
  • <b>๋Š” ํ…์ŠคํŠธ ์ž์ฒด์— ์ฃผ์˜๋ฅผ ๋Œ๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ๋˜์ง€๋งŒ, <strong>์€ ์ฝ˜ํ…์ธ  ์ž์ฒด์˜ ์ค‘์š”์„ฑ์„ ๊ฐ•์กฐํ•  ๋•Œ ์‚ฌ์šฉ
  • ๋‹ซ๋Š” ํƒœ๊ทธ ํ•„์ˆ˜
  • <b>ํ…์ŠคํŠธ</b>

<i>

  • 'italics'์˜ ์•ฝ์ž๋กœ, ํ…์ŠคํŠธ๋ฅผ ๋‚ ๋ ค ์“ฐ๊ณ  ์‹ถ์„ ๋•Œ ์‚ฌ์šฉ
  • ๋‹ซ๋Š” ํƒœ๊ทธ ํ•„์ˆ˜
  • <i>ํ…์ŠคํŠธ</i>

<strong>

  • Phrase Tag(์‹œ๊ฐ์ ์ธ ํŠน์ง•๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ์˜๋ฏธ๋„ ๋‹ด๊ณ  ์žˆ๋Š” ํƒœ๊ทธ)
  • ์Šคํฌ๋ฆฐ๋ฆฌ๋”(์ปดํ“จํ„ฐ์˜ ํ™”๋ฉด ๋‚ญ๋… sw : ์‹œ๊ฐ ์žฅ์• ์ธ, ํ•™์Šต/์ธ์ง€ ์žฅ์• ์ธ, ๋…ธ์ธ, ๋‹ค๋ฌธํ™” ๊ฐ€์ •์˜ ์›น ์ ‘๊ทผ์„ฑ์„ ์ง€์›ํ•ด์ฃผ๋Š” ๋ชฉ์ )๊ฐ€ ๊ธ€์„ ์ฝ์„ ๋•Œ ๊ฐ•์กฐํ•ด์„œ ์ฝ์–ด์คŒ
  • ๋‹ซ๋Š” ํƒœ๊ทธ ํ•„์ˆ˜
  • <strong>ํ…์ŠคํŠธ</strong>

<em>

  • Phrase Tag(์‹œ๊ฐ์ ์ธ ํŠน์ง•๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ์˜๋ฏธ๋„ ๋‹ด๊ณ  ์žˆ๋Š” ํƒœ๊ทธ)
  • 'emphasized'์˜ ์•ฝ์ž๋กœ ๊ฐ•์กฐํ•˜๋Š” ๊ฒƒ์ด ๋ชฉ์ 
  • ๋‹ซ๋Š” ํƒœ๊ทธ ํ•„์ˆ˜
  • <em>ํ…์ŠคํŠธ</em>

<meta>

  • ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ<metadata)๋ฅผ ์ •์˜ํ•  ๋•Œ ์‚ฌ์šฉ
  • <base>, <link>, <script>, <style>, <title> ์š”์†Œ์™€ ๊ฐ™์€ ๋‹ค๋ฅธ ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ ๊ด€๋ จ ์š”์†Œ๋“ค์ด ๋‚˜ํƒ€๋‚ผ ์ˆ˜ ์—†๋Š” ๋‹ค์–‘ํ•œ ์ข…๋ฅ˜์˜ ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ๋ฅผ ์ œ๊ณตํ•  ๋•Œ ์‚ฌ์šฉ
  • <meta charset="utf-8"> : ํ•œ๊ธ€ ๊นจ์ง€์ง€ ์•Š๊ฒŒ ํ•ด์คŒ
  • ๋‹ซ๋Š” ํƒœ๊ทธ ์—†์Œ

์˜ต์…”๋„ ํƒœ๊ทธ


<a>

  • 'Anchor'์˜ ์•ฝ์ž๋กœ, ๋‹ค๋ฅธ ํŽ˜์ด์ง€๋ฅผ ์—ฐ๊ฒฐํ•  ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ํ•˜์ดํผ๋งํฌ๋ฅผ ์ •์˜ํ•  ๋•Œ ์‚ฌ์šฉ
  • <a href="๊ฐ€๊ณ  ์‹ถ์€ ์ฃผ์†Œ" target="_blank">๋‚ด์šฉ</a> : ๊ฐ€๊ณ ์‹ถ์€ ์ฃผ์†Œ๋กœ ์ด๋™ํ•  ๋•Œ, ์ƒˆ ํƒญ์œผ๋กœ ์—ฌ๋Š” ์ฝ”๋“œ
  • ์‚ฌ์ดํŠธ ๋‚ด๋ถ€์—์„œ ์ด๋™ ์‹œ "๊ฐ€๊ณ  ์‹ถ์€ ์ฃผ์†Œ" ๋Œ€์‹  ๊ฒฝ๋กœ๋ฅผ ์ ์–ด์ฃผ๋ฉด ๋จ
  • ๋‹ซ๋Š” ํƒœ๊ทธ ํ•„์ˆ˜

<img>

  • ์ด๋ฏธ์ง€๋ฅผ ๋„ฃ์„ ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ํƒœ๊ทธ
  • <img src="์ด๋ฏธ์ง€ ์ฃผ์†Œ" width="๊ฐ€๋กœ๊ธธ์ด" height="์„ธ๋กœ๊ธธ์ด">
  • ๋‹ซ๋Š” ํƒœ๊ทธ ์—†์Œ

02. ๊ธฐ๋ณธ CSS ์†์„ฑ


์Šคํƒ€์ผ ์ ์šฉ

  • ์‚ฌ์ดํŠธ์— CSS ์Šคํƒ€์ผ์„ ์ž…ํ˜€์ฃผ๊ธฐ ์œ„ํ•ด์„œ <style> ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Œ
<style>
/* ์—ฌ๊ธฐ์— CSS ์ฝ”๋“œ ์ž‘์„ฑ */
</style>

ํฐํŠธ ํฌ๊ธฐ

  • CSS์—์„œ ํฐํŠธ ํฌ๊ธฐ๋ฅผ ํ‘œํ˜„ํ•  ์ˆ˜ ์žˆ๋Š” ๋‹จ์œ„ ์ค‘ ํ”ฝ์…€(px)์„ ๊ฐ€์žฅ ๋งŽ์ด ์‚ฌ์šฉ
<!--์Šคํƒ€์ผ ์ ์šฉ์œผ๋กœ h1๋ณด๋‹ค h2๊ฐ€ ๋” ์ปค์ง-->
<h1> heading 1 </h1>
<h2> heading 2 </h2>

<style>
h2 {
  font-size : 72px;
}
</style>

ํ…์ŠคํŠธ ์ •๋ ฌ

  • ์™ผ์ชฝ, ๊ฐ€์šด๋ฐ, ์˜ค๋ฅธ์ชฝ์œผ๋กœ ์ •๋ ฌ ๊ฐ€๋Šฅ
<h1> heading 1 </h1>
<h2> heading 2 </h2>
<h3> heading 3 </h3>

<style>
h1 {
  text-align : left;
}
h2 {
  text-align : right;
}
h2 {
  text-align : center;
}
</style>

ํ…์ŠคํŠธ ์ƒ‰

  • ๊ธ€์— ์ƒ‰์„ ํ‘œํ˜„ํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ์—ฌ๋Ÿฌ๊ฐ€์ง€ (์ง€๊ธˆ์€ color ์†์„ฑ ์‚ฌ์šฉ)
<h1> heading 1 </h1>
<h2> heading 2 </h2>
<h3> heading 3 </h3>

<style>
h1 {
  color : lime;
}
h2 {
  color : hot-ink;
}
h2 {
  color : blue;
}
</style>

์—ฌ๋ฐฑ

  • margin ์†์„ฑ์„ ์‚ฌ์šฉํ•˜๋ฉด ์—ฌ๋ฐฑ ์„ค์ • ๊ฐ€๋Šฅ
<h1> heading 1 </h1>
<h2> heading 2 </h2>
<h3> heading 3 </h3>

<style>
h1 {
  margin-bottom : 80px;
}

h2 {
  margin-left : 50px;
}
โš ๏ธ **GitHub.com Fallback** โš ๏ธ