Skip to content

Latest commit

ย 

History

History
598 lines (360 loc) ยท 24.5 KB

html_css.md

File metadata and controls

598 lines (360 loc) ยท 24.5 KB

prepare_frontend_interview

HTML/ CSS

ํ”„๋ก ํŠธ์—”๋“œ ๊ธฐ์ˆ  ๋ฉด์ ‘์„ ์œ„ํ•œ ํ•ธ๋“œ๋ถ ๋งŒ๋“ค๊ธฐ

HTML ๋ชฉ์ฐจ

  • DOCTYPE ๐Ÿ”ฅ

    • DOCTYPE์— ๋Œ€ํ•˜์—ฌ ์„ค๋ช…ํ•˜์‹œ์˜ค
    • meta ํƒœ๊ทธ์— ๋Œ€ํ•ด์„œ ์•Œ๊ณ  ์žˆ๋‚˜์š”?
    • meta ํƒœ๊ทธ์˜ ์š”์†Œ์— ๋Œ€ํ•ด์„œ ์•„๋Š”๋Œ€๋กœ ๋งํ•ด๋ณด์„ธ์š”
  • ์›น ํ‘œ์ค€ ๋ฐ ์›น ์ ‘๊ทผ์„ฑ ๐Ÿ”ฅ

    • ์›น ํ‘œ์ค€์ด๋ž€?
    • HTML5์—์„œ ์ถ”๊ฐ€๋œ ๋‚ด์šฉ์ด ์žˆ๋‚˜์š”?
    • ์›น ์ ‘๊ทผ์„ฑ์ด๋ž€?
    • ์›น ์ ‘๊ทผ์„ฑ์— ๋งž๋Š” ๋งˆํฌ์—… ์˜ˆ์‹œ ๋ช‡๊ฐ€์ง€ ๋งํ•ด๋ณด์‹œ์˜ค
    • ์‹œ๋ฉ˜ํ‹ฑ ํƒœ๊ทธ๋ž€ ๋ฌด์—‡์ธ๊ฐ€ ์™œ ์‚ฌ์šฉํ•˜๋Š”๊ฐ€
    • ํ…์ŠคํŠธ ๊ด€๋ จ ํƒœ๊ทธ
    • SEO๋ž€ ๋ฌด์—‡์ธ๊ฐ€?
    • Button ํƒœ๊ทธ์˜ Default type์€ ๋ฌด์—‡์ธ๊ฐ€?
    • Section ํƒœ๊ทธ์™€ article ํƒœ๊ทธ์˜ ์ฐจ์ด์ 
    • ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง•์ด๋ž€ ๋ฌด์—‡์ธ๊ฐ€์š”?
  • ๊ทธ ์™ธ ๐Ÿ”ฅ

    • ์ด๋ฏธ์ง€ ํฌ๊ธฐ๊ฐ€ ํด ๊ฒฝ์šฐ ๋ Œ๋”๋ง ์†๋„๊ฐ€ ๋Š๋ ค์งˆํ…๋ฐ ์ด๋ฅผ ๊ฐœ์„ ํ•˜๊ธฐ ์œ„ํ•œ ๋ฐฉ๋ฒ•
    • UI๋ž€ ๋ฌด์—‡์ธ์ง€ ์„ค๋ช…ํ•˜์‹œ์˜ค
    • ์ด๋ฏธ์ง€ ํƒœ๊ทธ์— src ์†์„ฑ์„ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ ๋Š” ๋ฌด์—‡์ธ๊ฐ€?
    • ์™œ ์ผ๋ฐ˜์ ์œผ๋กœ CSS <link>๋ฅผ head ํƒœ๊ทธ ์‚ฌ์ด์— ์œ„์น˜์‹œํ‚ค๊ณ , JS <script> ํƒœ๊ทธ๋ฅผ body ์ง์ „์— ์œ„์น˜์‹œํ‚ค๋Š” ๊ฒƒ์ด ์ข‹์€ ๋ฐฉ๋ฒ•์ธ์ง€ ์„ค๋ช…ํ•˜์‹œ์˜ค
    • data-์†์„ฑ ์€ ๋ฌด์—‡์— ์ข‹์€์ง€ ์„ค๋ช…ํ•˜์‹œ์˜ค
  • SVG๋ž€?๐Ÿ”ฅ

    • SVG ์žฅ์ ๊ณผ ๋‹จ์ 
    • SVG ๋‚ด๋ถ€ ๋„ํ˜•์— ๋Œ€ํ•ด ์•„๋Š”๊ฒŒ ์žˆ๋‚˜์š”?

CSS ๋ชฉ์ฐจ

๐ŸŽˆ HTML

DOCTYPE

DOCTYPE์— ๋Œ€ํ•˜์—ฌ ์„ค๋ช…ํ•˜์‹œ์˜ค

<!-- HTML5 -->
<!DOCTYPE html>

HTML์ดย ์–ด๋–คย ๋ฒ„์ „์œผ๋กœย ์ž‘์„ฑ๋˜์—ˆ๋Š”์ง€ย ๋ฏธ๋ฆฌย ์„ ์–ธํ•ด,์›น๋ธŒ๋ผ์šฐ์ €๊ฐ€ย ๋‚ด์šฉ์„ย ์˜ฌ๋ฐ”๋กœย ํ‘œ์‹œํ• ย ์ˆ˜ย ์žˆ๋„๋กย ํ•ด์ฃผ๋Š”ย ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์‰ฝ๊ฒŒ ์„ค๋ช…ํ•˜์ž๋ฉด ๋ฌธ์„œํ˜•์‹์„ย ์ •์˜ํ•ด์ฃผ๋Š”ย ๊ฒƒ์ด๋‹ค.

meta ํƒœ๊ทธ์— ๋Œ€ํ•ด์„œ ์•Œ๊ณ  ์žˆ๋‚˜์š”?

Link ๐Ÿ”ฅ

HTML ๋ฌธ์„œ๊ฐ€ ์–ด๋–ค ๋‚ด์šฉ์„ ๋‹ด๊ณ  ์žˆ๊ณ , ํ‚ค์›Œ๋“œ๋Š” ๋ฌด์—‡์ด๋ฉฐ, ๋ˆ„๊ฐ€ ๋งŒ๋“ค์—ˆ๋Š”์ง€์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ ๋‹ด๊ณ ์žˆ๋Š” ํƒœ๊ทธ์ด๋‹ค.

meta ํƒœ๊ทธ์˜ ์š”์†Œ์— ๋Œ€ํ•ด์„œ ์•„๋Š”๋Œ€๋กœ ๋งํ•ด๋ณด์„ธ์š”

charset

<meta charset="utf-8" />

charset์š”์†Œ๋Š” ๋ฌธ์„œ์—์„œ ํ—ˆ์šฉํ•˜๋Š” ๋ฌธ์ž ์ง‘ํ•ฉ์— ๋Œ€ํ•ด์„œ ๊ฐ„๋‹จํžˆ ํ‘œ์‹œํ•ฉ๋‹ˆ๋‹ค.

utf-8์€ ์ „์„ธ๊ณ„์ ์ธ character ์ง‘ํ•ฉ์œผ๋กœ ๋งŽ์€ ์–ธ์–ด์˜ ๋ฌธ์ž๋“ค์„ ํฌํ•จํ•ฉ๋‹ˆ๋‹ค.

์›น ํŽ˜์ด์ง€์—์„œ ์–ด๋–ค ๋ฌธ์ž๋ผ๋„ ์ทจ๊ธ‰ํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.

name

name ์š”์†Œ๋Š” ๋ฉ”ํƒ€ ์š”์†Œ๊ฐ€ ์–ด๋–ค ์ •๋ณด์˜ ํ˜•ํƒœ๋ฅผ ๊ฐ–๊ณ  ์žˆ๋Š”์ง€ ์•Œ๋ ค์ค๋‹ˆ๋‹ค.

content ์š”์†Œ๋Š” ์‹ค์ œ ๋ฉ”ํƒ€ ๋ฐ์ดํ„ฐ์˜ ์ปจํ…์ธ ์ž…๋‹ˆ๋‹ค. ๋จธ๋ฆฟ๋ง์„ ์š”์•ฝํ•˜๋Š”๋ฐ ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค.

<meta name="author" content="Chris Mills" />

<meta
  name="description"
  content="The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps."
/>

ํ•ด๋‹น ํƒœ๊ทธ๋Š” ์‹ค์ œ MDN ์›น ํŽ˜์ด์ง€์— ๋“ฑ๋ก๋œ meta ํƒœ๊ทธ์˜ name ์–ดํŠธ๋ฆฌ๋ทฐํŠธ์™€ content ์–ดํŠธ๋ฆฌ๋ทฐํŠธ์ด๋‹ค.

๊ตฌ๊ธ€์— 'MDN'์„ ๊ฒ€์ƒ‰ํ–ˆ์„ ๋•Œ, ๊ฒ€์ƒ‰ ์—”์ง„์ด ๋ฉ”ํƒ€ ํƒœ๊ทธ์˜ content ์–ดํŠธ๋ฆฌ๋ทฐํŠธ ์•ˆ์— ์žˆ๋Š” ๋‚ด์šฉ์„ ๊ฒ€์ƒ‰ ๊ฒฐ๊ณผ์™€ ํ•จ๊ป˜ ์ถ”๊ฐ€์ ์œผ๋กœ ๋ณด์—ฌ์ฃผ๊ณ  ์žˆ๋‹ค.

๋ฉ”ํƒ€ํƒœ๊ทธ ์‚ฌ์šฉ

๊ฒ€์ƒ‰ ์—”์ง„ ์ตœ์ ํ™”๋ฅผ ์œ„ํ•ด ๋ฉ”ํƒ€ ํƒœ๊ทธ์˜ ์–ด๋–ค ๊ฒƒ์„ ํ™œ์šฉํ–ˆ๋Š”์ง€

Link ๐Ÿ”ฅ tcpschool/html-tags/meta

โ‘  ๊ฒ€์ƒ‰ ์—”์ง„์„ ์œ„ํ•œ ํ‚ค์›Œ๋“œ๋ฅผ ์ •์˜

<meta name="keyword" content="HTML, meta, tag, element, reference" />

โ‘ก ์›น ํŽ˜์ด์ง€์— ๋Œ€ํ•œ ์„ค๋ช…(description)์„ ์ •์˜

<meta name="description" content="HTML meta tag page" />

โ‘ข ๋ฌธ์„œ์˜ ์ €์ž(author)๋ฅผ ์ •์˜

<meta name="author" content="TCPSchool" />

โ‘ฃ 5์ดˆ ๋’ค์— ๋‹ค๋ฅธ ํŽ˜์ด์ง€๋กœ ๋ฆฌ๋‹ค์ด๋ ‰ํŠธ(redirect)์‹œํ‚ค๊ธฐ

<meta http-equiv="refresh" content="5;url=http://www.tcpschool.com" />

โ‘ค ๋ชจ๋“  ์žฅ์น˜์—์„œ ์›น ์‚ฌ์ดํŠธ๊ฐ€ ์ž˜ ๋ณด์ด๋„๋ก ๋ทฐํฌํŠธ(viewport)๋ฅผ ์„ค์ •

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
์ „์ฒด ์ฝ”๋“œ๋กœ ๋ณด๊ธฐ
<head>
  <meta charset="UTF-8" />
  <meta name="keyword" content="HTML, meta, tag, element, reference" />
  <meta name="description" content="HTML meta tag page" />
  <meta name="author" content="TCPSchool" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML meta tag</title>
</head>

์›น ํ‘œ์ค€ ๋ฐ ์›น ์ ‘๊ทผ์„ฑ

์›น ํ‘œ์ค€์ด๋ž€?

์ถœ์ฒ˜: ๊ฐ“๋Œ€ํฌ์˜ ์ž‘์€๊ณต๊ฐ„

์›น ํ‘œ์ค€์ด๋ž€ ์›น ์ƒ์—์„œ ํ‘œ์ค€์ ์œผ๋กœ ์‚ฌ์šฉ๋˜๋Š” ๊ธฐ์ˆ ์„ ๋งํ•ฉ๋‹ˆ๋‹ค.

์›น์‚ฌ์ดํŠธ๋ฅผ ์–ด๋– ํ•œ ์šด์˜์ฒด์ œ์—์„œ๋‚˜ ์–ด๋– ํ•œ ๋ธŒ๋ผ์šฐ์ €์—์„œ ๋ณด๋”๋ผ๋„ ๋™์ผํ•˜๊ฒŒ ๋ณด์—ฌ์ง€๋„๋ก W3C(World Wide Web Consortium) ๊ธฐ๊ตฌ ํ‘œ์ค€์— ๋งž์ถ”๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๋‹ค์–‘ํ•œ ๋ธŒ๋ผ์šฐ์ €, ํœด๋Œ€ํฐ PDA, ์žฅ์• ์ธ ์ง€์›์šฉ ํ”„๋กœ๊ทธ๋žจ์—์„œ๋„ ๋Œ€์‘์ด ๊ฐ€๋Šฅํ•˜๋ฏ€๋กœ ์ ‘๊ทผ์„ฑ์ด ํ–ฅ์ƒ ๋˜๊ณ , ์žฅ์• ์ธ, ๊ณ ๋ น์ž ๋“ฑ์„ ํฌํ•จํ•œ ์‚ฌ์šฉ์ž์ธต๋„ ํ™•๋Œ€ ๊ฐ€๋Šฅํ•˜๋‹ค๋Š” ์žฅ์ ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

์ตœ์‹  ์›น ํ‘œ์ค€ ๋ฒ„์ „์€ HTML5, CSS3์ด๋‹ค.


HTML5์—์„œ ์ถ”๊ฐ€๋œ ๋‚ด์šฉ์ด ์žˆ๋‚˜์š”?

  • canvas ๊ธฐ๋Šฅ ์ถ”๊ฐ€

    • <canvas>ํƒœ๊ทธ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ํ†ตํ•ด ๋‹ค์–‘ํ•œ ๊ทธ๋ฆผ์„ ๊ทธ๋ฆด ์ˆ˜ ์žˆ๋Š” ๊ณต๊ฐ„์„ ์ œ๊ณตํ•ด์ค€๋‹ค
    • ํ”ฝ์…€ ๊ธฐ๋ฐ˜์˜ ๋น„ํŠธ๋งต ์ด๋ฏธ์ง€๋ฅผ ๊ทธ๋ฆฌ๋Š” ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•˜๋ฉฐ, ๊ทธ๋ž˜ํ”„, ๊ฒŒ์ž„ ๊ทธ๋ž˜ํ”ฝ, ๊ธฐํƒ€ ์‹ค์‹œ๊ฐ„ ์ด๋ฏธ์ง€๋ฅผ ๊ทธ๋ฆด ์ˆ˜ ์žˆ๋‹ค.
    • WebGL๊ณผ ๊ฐ™์€ 3d ๊ธฐ์ˆ ์˜ ๊ตฌํ˜„์ด ์›น ๋ธŒ๋ผ์šฐ์ €๋ฅผ ํ†ตํ•ด์„œ๋„ ๊ฐ€๋Šฅํ•ด์กŒ๋‹ค
  • ๋ชจ๋“  ๋””๋ฐ”์ด์Šค์—์„œ ์›นํŽ˜์ด์ง€ ํ˜ธํ™˜์ด ๊ฐ€๋Šฅํ•ด์กŒ๋‹ค

  • ์‹œ๋ฉ˜ํ‹ฑ ์›น ๊ธฐ์ˆ ์„ ์ง€์›ํ•˜๊ธฐ ์‹œ์ž‘ํ–ˆ๋‹ค

์›น ์ ‘๊ทผ์„ฑ์ด๋ž€?

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


์›น ์ ‘๊ทผ์„ฑ์— ๋งž๋Š” ๋งˆํฌ์—… ์˜ˆ์‹œ ๋ช‡๊ฐ€์ง€ ๋งํ•ด๋ณด์‹œ์˜ค

  1. ์ด๋ฏธ์ง€๋Š” ์‚ฌ์ง„์ด๋ผ ์Œ์„ฑ์œผ๋กœ ๋“ค๋ ค์ค„ ์ˆœ ์—†์ง€๋งŒ ์ด๋ฏธ์ง€์— ํ…์ŠคํŠธ๋กœ ๋œ ์„ค๋ช…์„ ๋‹ฌ์•„์ฃผ๋ฉด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.ย  ์ด๋ฏธ์ง€์— alt, IR๊ธฐ๋ฒ•์„ ์‚ฌ์šฉํ•˜์—ฌ ๋Œ€์ฒดํ…์ŠคํŠธ๋ฅผ ์ œ๊ณต

  2. ๋™์˜์ƒ์€ ๋Œ€๋ณธ์ด๋‚˜ ์ž๋ง‰์„ ์ œ๊ณตํ•˜๊ณ  ์ž๋™์žฌ์ƒ ๊ธˆ์ง€

  3. title์„ ์‚ฌ์šฉํ•ด a ํƒœ๊ทธ์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ ์ ์ ˆํžˆ ์ œ๊ณตํ•ด์•ผ ํ•จ

  4. inputํƒœ๊ทธ์—๋Š” ์ ์ ˆํ•œ label์ด ์ œ๊ณต๋˜์–ด์•ผ ํ•จ

  5. table์—๋Š” caption, summary, thead, tbody, th ๋“ฑ์„ ์‚ฌ์šฉ

  6. ์ปจํ…์ธ ๋Š” ์œ„์—์„œ ์•„๋ž˜๋กœ ์ฝ์„ ์ˆ˜ ์žˆ๋Š” ์„ ํ˜•๊ตฌ์กฐ์ด์–ด์•ผ ํ•จ (ex) ๋ช…ํ™•ํ•œ ํ—ค๋”ฉ๊ตฌ์กฐ(h1~h6)


์‹œ๋ฉ˜ํ‹ฑ ํƒœ๊ทธ๋ž€ ๋ฌด์—‡์ธ๊ฐ€ ์™œ ์‚ฌ์šฉํ•˜๋Š”๊ฐ€

์˜๋ฏธ์š”์†Œ(Semantic Element)๋Š” HTML๋กœ ๋งŒ๋“  ๋ฌธ์„œ์— ์ถ”๊ฐ€์ ์œผ๋กœ ์˜๋ฏธ๋ฅผ ๋ถ€์—ฌํ•ด์ค๋‹ˆ๋‹ค.

๋ฌด์˜๋ฏธํ•œ ์š”์†Œ(Non-Semantic Element)๋กœ ๋ฌธ์„œ๋ฅผ ์ž‘์„ฑํ•  ๊ฒฝ์šฐ, HTML๋ฌธ์„œ๋ฅผ ์ ‘ํ•˜๋Š” ์‚ฌ๋žŒ์ด ์–ด๋–ค ๋ฐ์ดํ„ฐ๋ฅผ ๋ด์•ผํ• ์ง€, ์–ด๋–ค ๋ฐ์ดํ„ฐ๋ฅผ ์ œ๊ณตํ•˜๋Š”์ง€ ํŒŒ์•…ํ•˜๊ธฐ๊ฐ€ ์–ด๋ ต์Šต๋‹ˆ๋‹ค.

์‹œ๋ฉ˜ํ‹ฑ ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•จ์œผ๋กœ์จ ์„œ๋กœ ๊ด€๊ณ„๊ฐ€ ์žˆ๋Š” ์ •๋ณด๋ฅผ ํŒŒ์•…ํ•˜๊ณ  ์ฝ˜ํ…์ธ ๊ฐ€ ์–ด๋–ค ๋งฅ๋ฝ ์•ˆ์— ์žˆ๋Š”์ง€ ์•Œ๊ธฐ ์‰ฝ๊ฒŒ ํ•ด์ค๋‹ˆ๋‹ค.

๊ทธ๋ฆฌ๊ณ  ์‹œ๋ฉ˜ํ‹ฑ ํƒœ๊ทธ๋ฅผ ์ž˜ ์ง€ํ‚จ๋‹ค๋ฉด ์ด๋Š” ๊ฒ€์ƒ‰์—”์ง„์„ ํ†ตํ•ด ๊ฒ€์ƒ‰์ด ์ž˜ ๋  ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ค๋‹ˆ๋‹ค.

์‹œ๋ฉ˜ํ‹ฑ ํƒœ๊ทธ

์ถœ์ฒ˜: w3schools

tag summary
header ํ—ค๋”
nav ๋‚ด๋น„๊ฒŒ์ด์…˜ ๋ฐ˜
aside ์‚ฌ์ด๋“œ์— ์œ„์น˜ํ•˜๋Š” ๊ณต๊ฐ„
section ์—ฌ๋Ÿฌ ์ค‘์‹ฌ ๋‚ด์šฉ์„ ๊ฐ์‹ธ๋Š” ๊ณต๊ฐ„
article ๊ธ€์ž๊ฐ€ ๋งŽ์ด ๋“ค์–ด๊ฐ€๋Š” ๋ถ€๋ถ„
footer ํ‘ธํ„ฐ

ํ…์ŠคํŠธ ๊ด€๋ จ ํƒœ๊ทธ

๋งํฌ: ์›นํ‘œ์ค€: HTML5 ์•Œ์•„๋ณด๊ธฐ ์ค‘ ๋ฐœ์ทŒ

์ค„๋ฐ”๊ฟˆ์ด ์ผ์–ด๋‚˜๋Š” ํƒœ๊ทธ

<h1>~<h6> ์ œ๋ชฉ์„ ํ‘œ์‹œํ•  ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค. <h1>๋ถ€ํ„ฐ <h6>๊นŒ์ง€ ์กด์žฌํ•œ๋‹ค. ์Šคํฌ๋ฆฐ ๋ฆฌ๋” ์‚ฌ์šฉ์ž๊ฐ€ ์‚ฌ์šฉํ•˜๋Š” ํƒ์ƒ‰ ๊ธฐ๋ฒ•์€ ์ œ๋ชฉ์—์„œ ์ œ๋ชฉ์œผ๋กœ ์˜ฎ๊ฒจ๊ฐ€๋Š” ๋ฐฉ์‹์ด๊ธฐ์—, ์ œ๋ชฉ ๋‹จ๊ณ„๋ฅผ ๋›ฐ์–ด๋„˜์œผ๋ฉด ๋ฌธ์„œ์˜ ์ธต์œ„๋ฅผ ํŒŒ์•…ํ•˜๋Š”๋ฐ ํ˜ผ๋ž€์Šค๋Ÿฌ์šธ ์ˆ˜ ์žˆ๋‹ค. ๊ทธ๋ž˜์„œ ์ œ๋ชฉ ๋‹จ๊ณ„๋Š” ์ˆœ์ฐจ์ ์œผ๋กœ ๋Š˜์–ด๋‚˜์•ผ ํ•œ๋‹ค. ์ฆ‰, <h1>ํ›„์— <h3>์ด ์˜ค์ง€ ์•Š๋„๋ก ํ•œ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ํŽ˜์ด์ง€๋‹น ํ•˜๋‚˜์˜ <h1>ํƒœ๊ทธ๋งŒ์„ ์‚ฌ์šฉํ•˜์ž.

<hr> ์ˆ˜ํ‰์ค„์ด ์ƒ๊ธด๋‹ค. '์ฃผ์ œ๊ฐ€ ๋ฐ”๋€” ๋•Œ' ๋ถ„์œ„๊ธฐ ์ „ํ™˜์„ ์œ„ํ•ด์„œ ๋„ฃ๋Š”๋‹ค. '์ด ๊ธ€์˜ ์ฃผ์ œ๊ฐ€ ์—ฌ๊ธฐ์„œ ๋ฐ”๋€Œ์—ˆ๋‹ค'๋ฅผ ์•Œ๋ฆฌ๋Š” ์—ญํ• ์ด๋‹ค.

<pre> ํ‘œ์‹œํ•œ ๊ณต๋ฐฑ(์ŠคํŽ˜์ด์Šค๋ฐ”๋กœ ๋„์šด ๊ณต๊ฐ„)์ด ๊ทธ๋Œ€๋กœ ํ‘œ์‹œ๋œ๋‹ค. ์—ฌ๋‹ด์œผ๋กœ CSS์—์„œ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋Š” white-space ์†์„ฑ์˜ 'pre' ๊ฐ’์ด ๊ฐ™์€ ์˜๋ฏธ๋ฅผ ๊ฐ–๋Š”๋‹ค.

<blockquote> ํƒœ๊ทธ ์•ˆ์ชฝ ํ…์ŠคํŠธ๊ฐ€ ์ธ์šฉ๋ฌธ์ž„์„ ์•Œ๋ฆฌ๋Š” ํƒœ๊ทธ. ๋ณธ๋ฌธ๋ณด๋‹ค ์ „์ฒด์ ์œผ๋กœ ๋“ค์—ฌ์“ฐ๊ธฐ ๋œ๋‹ค. <blockquote cite="https://www.sample.com/sample.html/"> ์ฒ˜๋Ÿผ ์†์„ฑ cite๋กœ ์ธ์šฉ๋ฌธ์˜ ์ถœ์ฒ˜ ๋ฌธ์„œ๋‚˜ URL์„ ์ž…๋ ฅํ•  ์ˆ˜ ์žˆ๋‹ค. cite ์†์„ฑ๊ฐ’์€ ํ™”๋ฉด์— ๋‚˜ํƒ€๋‚˜์ง€ ์•Š๋Š”๋‹ค.

์ค„๋ฐ”๊ฟˆ์ด ์ผ์–ด๋‚˜์ง€ ์•Š๋Š” ํƒœ๊ทธ

<strong> ํƒœ๊ทธ ์•ˆ์ชฝ ํ…์ŠคํŠธ๊ฐ€ '์ค‘์š”ํ•œ ๋‚ด์šฉ'์ž„์„ ์˜๋ฏธํ•˜๋ฉฐ, ๊ธ€์ž๋ฅผ ๊ตต๊ฒŒ ํ‘œ์‹œํ•œ๋‹ค.

<b> ์ค‘์š”ํ•˜๋‹ค๋Š” ์˜๋ฏธ๋ฅผ ๊ฐ€์ง€์ง€ ์•Š์œผ๋ฉด์„œ, ๊ธ€์ž๋ฅผ ๊ตต๊ฒŒ ํ‘œ์‹œํ•œ๋‹ค.

<em> '๊ฐ•์กฐํ•˜๊ณ ์ž ํ•˜๋Š” ๋‚ด์šฉ'์ž„์„ ์˜๋ฏธํ•˜๋ฉฐ, ๊ธ€์ž๋ฅผ ๊ธฐ์šธ์—ฌ ํ‘œ์‹œํ•œ๋‹ค.

<i> ํŠน์ •ํ•œ ์˜๋ฏธ๋ฅผ ๋‹ด์ง€ ์•Š๊ณ , ๋‹จ์ˆœํžˆ ๊ธ€์ž๋ฅผ ๊ธฐ์šธ์—ฌ ํ‘œ์‹œํ•˜๊ณ  ์‹ถ์„ ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค.

<q> ๋‹จ๋ฝ๊ณผ ๋ฌธ์žฅ ์ค‘๊ฐ„์— ์ค„๋ฐ”๊ฟˆ ์—†์ด '์ธ์šฉ๋ฌธ'์„ ํ‘œ์‹œํ•  ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค. ํƒœ๊ทธ๋กœ ๋ฌถ์€ ๋‚ด์šฉ ์•ž๋’ค์— ๋”ฐ์˜ดํ‘œ๊ฐ€ ๋ถ™๋Š”๋‹ค.

<mark> ๋ฌธ์žฅ์— ํ˜•๊ด‘ํŽœ์„ ๊ธ‹๋Š” ๊ฒƒ์ฒ˜๋Ÿผ, ๊ฐ•์กฐํ•˜๊ณ  ์‹ถ์€ ๋ถ€๋ถ„์„ ํƒœ๊ทธ๋กœ ๋ฌถ์œผ๋ฉด ์•ˆ์ชฝ ํ…์ŠคํŠธ ๋ฐฐ๊ฒฝ์ƒ‰์ด ๋…ธ๋ž€์ƒ‰์œผ๋กœ ํ‘œ์‹œ๋œ๋‹ค. ํ…์ŠคํŠธ์˜ ์ค‘์š”์„ฑ๋ณด๋‹ค๋Š”, ๊ฒ€์ƒ‰ ๊ฒฐ๊ณผ ํ‘œ์‹œ ๋“ฑ ํ˜„์žฌ ๋งฅ๋ฝ๊ณผ ์—ฐ๊ด€์„ฑ์ด ์žˆ๋Š” ํ…์ŠคํŠธ๋ฅผ ๊ฐ•์กฐํ•  ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค.

SEO๋ž€ ๋ฌด์—‡์ธ๊ฐ€?

๊ฒ€์ƒ‰ ์—”์ง„ ์ตœ์ ํ™”(SEO: Search Engine Optimization)๋Š” ๊ฒ€์ƒ‰ ์—”์ง„์ด ์›นํŽ˜์ด์ง€์˜ ์ž๋ฃŒ๋ฅผ ์ˆ˜์ง‘ํ•˜๊ฑฐ๋‚˜ ์ˆœ์œ„๋ฅผ ๋ฐฉ์‹์— ๋งž๊ฒŒ ์›นํŽ˜์ด์ง€๋ฅผ ๊ตฌ์„ฑํ•˜์—ฌ, ๊ฒ€์ƒ‰ ๊ฒฐ๊ณผ์˜ ์ƒ์œ„์— ๋‚˜์˜ฌ ์ˆ˜ ์žˆ๊ฒŒํ•˜๋Š” ํ–‰์œ„๋ฅผ ๋งํ•ฉ๋‹ˆ๋‹ค.

SEO๋ฅผ ์œ„ํ•ด์„œ๋Š” ๊ฒ€์ƒ‰์–ด๋ฅผ ํŽ˜์ด์ง€์— ์ ์ ˆํ•˜๊ฒŒ ๋ฐฐ์น˜ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

๊ฒ€์ƒ‰ ์—”์ง„์€ ๊ฒฐ๊ณผ๋ฅผ ๋ณด์—ฌ์ค„ ๋•Œ, HTML์˜ ํƒœ๊ทธ๋“ค์„ ๋ถ„์„ํ•ฉ๋‹ˆ๋‹ค.

์ด ๋•Œ, Semanticํ•œ ๋ฌธ์„œ๋Š” ๊ฒ€์ƒ‰์—”์ง„์ด ์œ  ์˜๋ฏธํ•œ ๊ฒฐ๊ณผ๋ฅผ ๋‚ณ์„ ์ˆ˜ ์žˆ๋„๋ก ํ•ฉ๋‹ˆ๋‹ค.


Button ํƒœ๊ทธ์˜ Default type์€ ๋ฌด์—‡์ธ๊ฐ€?

submit์ด๋‹ค. form ํƒœ๊ทธ ์•ˆ์— form data์™€ ๊ด€๋ จ ์—†๋Š” ๋ฒ„ํŠผ์„ ๋งŒ๋“  ํ›„ ๊ทธ ๋ฒ„ํŠผ์„ ๋ˆŒ๋ €๋”๋‹ˆ form์ด ์ „์†ก๋  ๊ฒฝ์šฐ๊ฐ€ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ์œผ๋‹ˆ ๋ฒ„ํŠผํƒœ๊ทธ๋Š” ๊ผญ type์„ ๋ช…์‹œํ•˜์ž.

  • submit์€ ํผ์„ ์ œ์ถœํ•˜๋Š” ์ด๋ฒคํŠธ๋ฅผ ๋ฐœ์ƒ์‹œํ‚ต๋‹ˆ๋‹ค.
  • reset์€ ํผ์•ˆ์— ์ž‘์„ฑ๋œ ๋‚ด์šฉ์„ ์ดˆ๊ธฐํ™”์‹œํ‚ต๋‹ˆ๋‹ค.
  • button์€ ๊ทธ ์ž์ฒด๋กœ๋Š” ์•„๋ฌด๋Ÿฐ ์ด๋ฒคํŠธ๊ฐ€ ์—†๊ณ , click์ด๋ฒคํŠธ์™€ ์—ฐ๊ฒฐ์‹œ์ผœ์„œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ํ™œ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋งŽ์ด ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

Section ํƒœ๊ทธ์™€ article ํƒœ๊ทธ์˜ ์ฐจ์ด์ 

  • article: ๋ฌธ์„œ๋‚˜ ์‚ฌ์ดํŠธ์—์„œ ๋…๋ฆฝ๋œ ์ปจํ…์ธ  ์˜์—ญ์„ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค. ์ด ๋ถ€๋ถ„์„ ๋‹ค๋ฅธ ๊ณณ์— ์˜ฎ๊ธฐ๋”๋ผ๋„ ๋ถ„๋ฆฌ๋˜์–ด์ง€๊ณ , ์˜๋ฏธ๊ฐ€ ํ†ตํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.

  • section: ํŽ˜์ด์ง€์˜ ์ฃผ์š”๋ถ€๋ถ„์„ ์˜๋ฏธํ•˜๋ฉฐ, ๊ธด ๊ธ€์˜ ์„ธ๋ถ€์‚ฌํ•ญ๊ณผ ๊ฐ™์€ ๊ด€๋ จ ์ปจํ…์ธ ์˜ ๋ฌถ์Œ, ๋˜๋Š” ํƒญ ํ‚ค ์‚ฌ์šฉ์„ ์š”ํ•˜๋Š” ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๊ฐ€์ง„ ์›น ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ์˜ ํŽ˜์ด์ง€์˜ ๋ฌถ์Œ ๋‹จ์œ„๋ฅผ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.


ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง•์ด๋ž€ ๋ฌด์—‡์ธ๊ฐ€์š”?

ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ €๋Š” ์›น ์‚ฌ์ดํŠธ ๋˜๋Š” ์›น ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์ด ์„œ๋กœ ๋‹ค๋ฅธ ์›น ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ •ํ™•ํ•˜๊ณ  ์ผ๊ด€์„ฑ ์žˆ๊ฒŒ ์ž‘๋™ํ•˜๋Š” ๊ธฐ๋Šฅ์„ ๋งํ•ฉ๋‹ˆ๋‹ค.

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

๊ทธ ์™ธ

์ด๋ฏธ์ง€ ํฌ๊ธฐ๊ฐ€ ํด ๊ฒฝ์šฐ ๋ Œ๋”๋ง ์†๋„๊ฐ€ ๋Š๋ ค์งˆํ…๋ฐ ์ด๋ฅผ ๊ฐœ์„ ํ•˜๊ธฐ ์œ„ํ•œ ๋ฐฉ๋ฒ•

  1. ์ด๋ฏธ์ง€๋ฅผ ์ตœ์ ํ™” ์‹œํ‚ค๋Š” ๋ฐฉ๋ฒ•. ์ด๋ฏธ์ง€์˜ ์šฉ๋Ÿ‰์„ ์ค„์ธ๋‹ค.
  2. ์ด๋ฏธ์ง€ ์Šคํ”„๋ผ์ดํŠธ๋ฅผ ํ™œ์šฉํ•œ๋‹ค.
  3. ๋ฒกํ„ฐ ์ด๋ฏธ์ง€(SVG)๋ฅผ ํ™œ์šฉํ•œ๋‹ค.

SVG๋ž€

SVG๋Š” Scalable Vector Graphics๋ผ๋Š” ๋œป์ธ๋ฐ, ๋ฒˆ์—ญํ•˜์ž๋ฉด ํ™•์žฅ๊ฐ€๋Šฅํ•œ ๋ฒกํ„ฐ ๊ทธ๋ž˜ํ”ฝ์ด๋‹ค.

ํ”ฝ์…€์„ ์ด์šฉํ•˜์—ฌ ๊ทธ๋ฆผ์„ ๊ทธ๋ฆฌ๋Š” png jpg ํŒŒ์ผ๋“ค๊ณผ ๋‹ค๋ฅด๊ฒŒ ๋ฒกํ„ฐ๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ์ด๋ฏธ์ง€๋ฅผ ํ‘œํ˜„ํ•œ๋‹ค.

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

SVG ์žฅ์ ๊ณผ ๋‹จ์ 

  • SVG ์ด๋ฏธ์ง€๋Š” ๋งˆํฌ์—…์œผ๋กœ ์“ฐ์ด๋ฏ€๋กœ ํ…์ŠคํŠธ ์—๋””ํ„ฐ๋กœ ์ž‘์„ฑํ•˜๊ณ  ๋˜ ์ž‘์„ฑ๋œ ์ด๋ฏธ์ง€๋ฅผ ์ˆ˜์ •ํ•  ์ˆ˜๋„ ์žˆ๋‹ค.
  • ๋ฒกํ„ฐ๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ๊ทธ๋ ค์ง€๋ฏ€๋กœ ์‚ฌ์ด์ฆˆ๋ฅผ ํฌ๊ฒŒ ํ•ด๋„ ๊นจ์ง€์ง€ ์•Š๋Š”๋‹ค. scalable => ๋”ฐ๋ผ์„œ ์–ด๋–ค ํ•ด์ƒ๋„์—์„œ ์‚ฌ์šฉํ•˜๋“  ๋™์ผ
  • SVG ๋ฒ„์ „ 1.1์€ 2011๋…„ W3C ํ‘œ์ค€์ด ๋˜์—ˆ๋‹ค.
  • XML ํฌ๋งท์œผ๋กœ ํŒŒ์ผ์ด ์ž‘์„ฑ๋˜๋ฏ€๋กœ JS๋‚˜ CSS๋กœ ์กฐ์ž‘์ด ๊ฐ€๋Šฅํ•˜๋‹ค.
  • ๋‹จ, ์ด๋ฏธ์ง€๊ฐ€ ๋ณต์žกํ• ์ˆ˜๋ก SVG๋งŒ์˜ ์žฅ์ ์€ ๊ฐ์†Œํ•œ๋‹ค.

SVG ๋‚ด๋ถ€ ๋„ํ˜•์— ๋Œ€ํ•ด ์•„๋Š”๊ฒŒ ์žˆ๋‚˜์š”?

  • <rect> - ์‚ฌ๊ฐํ˜•

    ์ž์„ธํžˆ ๋ณด๊ธฐ
    <rect x="10" y="10" width="30" height="30" />
    <rect x="60" y="10" rx="10" ry="10" width="30" height="30" />

    x - ์‚ฌ๊ฐํ˜•์˜ ์ขŒ์ธก ์ƒ๋‹จ์˜ x ๊ฐ’์„ ์˜๋ฏธํ•œ๋‹ค.

    y - ์‚ฌ๊ฐํ˜•์˜ ์ขŒ์ธก ์ƒ๋‹จ์˜ y ๊ฐ’์„ ์˜๋ฏธํ•œ๋‹ค.

    width - ์‚ฌ๊ฐํ˜•์˜ ํญ์„ ๋‚˜ํƒ€๋‚ธ๋‹ค.

    height - ์‚ฌ๊ฐํ˜•์˜ ๋†’์ด๋ฅผ ๋‚˜ํƒ€๋‚ธ๋‹ค.

    rx - ์‚ฌ๊ฐํ˜•์˜ ๋‘ฅ๊ทผ ๊ผญ์ง“์ ์˜ x ๋ฐฉํ–ฅ์œผ๋กœ์˜ ๋ฐ˜์ง€๋ฆ„์ด๋‹ค.

    ry - ์‚ฌ๊ฐํ˜•์˜ ๋‘ฅ๊ทผ ๊ผญ์ง“์ ์˜ y ๋ฐฉํ–ฅ์œผ๋กœ์˜ ๋ฐ˜์ง€๋ฆ„์ด๋‹ค.


  • <circle> - ์›

    ์ž์„ธํžˆ ๋ณด๊ธฐ
    <circle cx="25" cy="75" r="20" />

    r - ์›์˜ ๋ฐ˜์ง€๋ฆ„์„ ์˜๋ฏธํ•œ๋‹ค.

    cx (circle x) - ์›์˜ ์ค‘์‹ฌ ์ค‘ x ๊ฐ’์„ ์˜๋ฏธํ•œ๋‹ค.

    cy (circle y)- ์›์˜ ์ค‘์‹ฌ ์ค‘ yย ๊ฐ’์„ ์˜๋ฏธํ•œ๋‹ค.


  • <polyline> - ์—ฐ๊ฒฐ๋œ ์ง์„ ๋“ค์˜ ๊ทธ๋ฃน

    ์ž์„ธํžˆ ๋ณด๊ธฐ
    <polyline
      points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"
    />

    points - ํฌ์ธํŠธ๋“ค์˜ ๋ชฉ๋ก, ๊ฐ ์ˆซ์ž๋Š” ๊ณต๋ฐฑ, ์‰ผํ‘œ, EOL ๋˜๋Š” ์ค„ ๋ฐ”๊ฟˆ ๋ฌธ์ž๋กœ ๊ตฌ๋ถ„๋œ๋‹ค. ๊ฐ ํฌ์ธํŠธ๋Š” ๋ฐ˜๋“œ์‹œ x ์ขŒํ‘œ์™€ y ์ขŒํ‘œ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์–ด์•ผ ํ•œ๋‹ค. ๋”ฐ๋ผ์„œ ํฌ์ธํŠธ ๋ชฉ๋ก (0,0), (1,1) ๋ฐ (2,2)๋Š” "0 0, 1 1, 2 2"๋ผ๊ณ  ์“ธ ์ˆ˜ ์žˆ๋‹ค.

  • <path> - ์„ ๊ณผ ๊ณก์„ , ํ˜ธ ๋“ฑ ๋‹ค์–‘ํ•œ ํ˜•ํƒœ๋ฅผ ๊ทธ๋ฆด ์ˆ˜ ์žˆ๋Š” ๊ฐ€์žฅ ๊ฐ•๋ ฅํ•œ ์—˜๋ฆฌ๋จผํŠธ


UI๋ž€ ๋ฌด์—‡์ธ์ง€ ์„ค๋ช…ํ•˜์‹œ์˜ค

์œ ์ € ์ธํ„ฐํŽ˜์ด์Šค ๋ผ๋Š” ๋œป์˜ ์•ฝ์ž์ด๋‹ค. ๋‹ค์–‘ํ•œ ์‚ฌ์šฉ์ž๊ฐ€ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ๋ณดํŽธ์„ฑ์„ ์ง€๋…€์•ผํ•˜๋ฉฐ ์ „์ฒด์ ์œผ๋กœ ์‚ฌ์šฉ์— ์žˆ์–ด ํฐ ๋ถˆํŽธํ•จ์ด ์—†์–ด์•ผ ํ•œ๋‹ค.


๐ŸŽˆ CSS

display

  1. block : ํ•ญ์ƒ ์ƒˆ๋กœ์šด ๋ผ์ธ์— ์š”์†Œ๊ฐ€ ์‹œ์ž‘๋˜๊ณ  ํ™”๋ฉด ํฌ๊ธฐ์˜ ์ „์ฒด ๊ฐ€๋กœํญ์„ ์˜์—ญ์œผ๋กœ ์ฐจ์ง€ํ•œ๋‹ค. width ์†์„ฑ ๊ฐ’์„ ๋ถ€์—ฌํ•ด์ฃผ๋ฉด ๊ทธ ๋„ˆ๋น„๋งŒํผ ์˜์—ญ์„ ์ฐจ์ง€ํ•œ๋‹ค.

  2. inline : ์ƒˆ๋กœ์šด ๋ผ์ธ์—์„œ ์‹œ์ž‘๋˜์ง€ ์•Š์œผ๋ฉฐ ๋‹ค๋ฅธ ์š”์†Œ๋“ค๊ณผ ๊ฐ™์€ ์ค„์— ๋ฐฐ์น˜๋  ์ˆ˜ ์žˆ๊ณ  content ๋„ˆ๋น„๋งŒํผ์˜ ์˜์—ญ์„ ์ฐจ์ง€ํ•œ๋‹ค. ๊ทธ๋ฆฌ๊ณ  width, height, margin-top, margin-bottom ์†์„ฑ์ด ์ ์šฉ์ด ๋˜์ง€ ์•Š๋Š”๋‹ค.

  3. inline-block : block ๋ ˆ๋ฒจ ์š”์†Œ์™€ inline ๋ ˆ๋ฒจ ์š”์†Œ์˜ ํŠน์ง•์„ ๋ชจ๋‘ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค. ํ•œ ์ค„์—์„œ inline ๋ ˆ๋ฒจ ์š”์†Œ๋“ค๊ณผ ๊ฐ™์ด ๋ฐฐ์น˜๋  ์ˆ˜ ์žˆ์œผ๋ฉฐ width์™€ height ์†์„ฑ์œผ๋กœ ์˜์—ญ์˜ ํฌ๊ธฐ๋ฅผ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.

  4. none : ์•„์˜ˆ ์‚ฌ๋ผ์ง€๊ฒŒ ํ•˜๋Š”๊ฒƒ. ๋ณด์ด์ง€๋„ ์•Š๊ณ  ํ•ด๋‹น ๊ณต๊ฐ„๋„ ์กด์žฌํ•˜์ง€ ์•Š๊ฒŒ ๋จ

display:none๊ณผ visibility:hidden์˜ ์ฐจ์ด์ 

๊ตฌ๋ถ„ ์ฐจ์ด์ 
display: none ๋ณด์ด์ง€๋„ ์•Š๊ณ  ํ•ด๋‹น ๊ณต๊ฐ„๋„ ์กด์žฌํ•˜์ง€ ์•Š๊ฒŒ ๋จ
visibility: hidden ๋ณด์ด์ง€๋งŒ ์•Š๊ณ  ํ•ด๋‹น ๊ณต๊ฐ„์€ ์กด์žฌ. width์™€ height๊ฐ’์„ ์ฃผ์—ˆ๋‹ค๋ฉด ๊ทธ๋งŒํผ ๊ณต๊ฐ„์€ ์กด์žฌํ•˜๊ฒŒ ๋จ

position ์†์„ฑ์— ๋Œ€ํ•˜์—ฌ

  1. static : ๊ธฐ๋ณธ๊ฐ’์œผ๋กœ ์š”์†Œ๋“ค์ด ๊ฒน์น˜์ง€ ์•Š๊ณ  ์ƒโ†’ํ•˜๋กœ ๋ฐฐ์น˜๋œ๋‹ค.

  2. relative : ์›๋ž˜ ๋ฐฐ์น˜๋˜์–ด์•ผ ํ•  ์œ„์น˜์—์„œ ์ง€์ •ํ•œ ๊ฐ’ ๋งŒํผ ๋–จ์–ด์ง„ ๊ณณ์— ์š”์†Œ๋ฅผ ๋ฐฐ์น˜ํ•œ๋‹ค.

  3. fixed : ์›น ๋ธŒ๋ผ์šฐ์ € ํ™”๋ฉด ์ „์ฒด๋ฅผ ๊ธฐ์ค€์œผ๋กœ ๋ฐฐ์น˜ํ•œ๋‹ค. ์Šคํฌ๋กค์„ ํ•˜๋”๋ผ๋„ ์œ„์น˜๊ฐ€ ๊ณ ์ •๋œ๋‹ค.

  4. absolute : ๊ฐ€์žฅ ๊ฐ€๊นŒ์šด ์ƒ์œ„ ์š”์†Œ์˜ ์œ„์น˜๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์ง€์ •ํ•œ ๊ฐ’ ๋งŒํผ ๋–จ์–ด์ง„ ๊ณณ์— ์š”์†Œ๋ฅผ ๋ฐฐ์น˜ํ•œ๋‹ค.

  5. sticky : ์Šคํฌ๋กค ์œ„์น˜๊ฐ€ ์ž„๊ณ„์ ์— ์ด๋ฅด๋ฉด position: fixed์™€ ๊ฐ™์ด ๋ฐ•์Šค๋ฅผ ํ™”๋ฉด์— ๊ณ ์ •ํ•  ์ˆ˜ ์žˆ๋Š” ์†์„ฑ์œผ๋กœ ์Šคํฌ๋กค ์˜์—ญ ๊ธฐ์ค€์œผ๋กœ ๋ฐฐ์น˜ํ•œ๋‹ค.


float๊ฐ€ ์–ด๋–ป๊ฒŒ ์ž‘๋™ํ•˜๋Š”๊ฐ€

Float๋Š” CSS ์œ„์น˜์ง€์ • ์†์„ฑ์ž…๋‹ˆ๋‹ค.

Float๋œ ์š”์†Œ๋Š” ํŽ˜์ด์ง€์˜ ํ๋ฆ„์˜ ์ผ๋ถ€๊ฐ€ ๋˜๋ฉฐ, ํŽ˜์ด์ง€์˜ ํ๋ฆ„์—์„œ ์ œ๊ฑฐ๋˜๋Š” position: absolute ์š”์†Œ์™€ ๋‹ฌ๋ฆฌ ๋‹ค๋ฅธ ์š”์†Œ(์˜ˆ: ํ”Œ๋กœํŒ… ์š”์†Œ ์ฃผ์œ„๋กœ ํ๋ฅด๋Š” ํ…์ŠคํŠธ)์˜ ์œ„์น˜์— ์˜ํ–ฅ์„ ์ค๋‹ˆ๋‹ค.

CSS clear ์†์„ฑ์€ float ์š”์†Œ์— left/right/both์— ์œ„์น˜ํ•˜๋„๋ก ์‚ฌ์šฉ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ถ€๋ชจ ์š”์†Œ์— float ์š”์†Œ๋งŒ ์žˆ์œผ๋ฉด, ๊ทธ ๋†’์ด๋Š” ๋ฌดํšจ๊ฐ€ ๋ฉ๋‹ˆ๋‹ค. ์ปจํ…Œ์ด๋„ˆ์˜ float ์š”์†Œ ๋‹ค์Œ์— ์žˆ์ง€๋งŒ ์ปจํ…Œ์ด๋„ˆ๊ฐ€ ๋‹ซํžˆ๊ธฐ ์ „์— float๋ฅผ clearํ•˜๋ฉด ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.


Flexbox๋‚˜ Grid ๊ฐ๊ฐ์˜ ํŠน์ง•

  1. flex ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ ๊ฐ€ ๋ฌด์—‡์ธ๊ฐ€์š”?

flex๋Š” ๋ ˆ์ด์•„์›ƒ์„ ์ข€ ๋” ํŽธํ•˜๊ฒŒ ์žก๊ธฐ ์œ„ํ•ด์„œ ๋งŒ๋“ค์–ด์ง„ css ์†์„ฑ์ด๋‹ค.

flex๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์š”์†Œ๋“ค์˜ ํฌ๊ธฐ๋‚˜ ์œ„์น˜๋ฅผ ์‰ฝ๊ฒŒ ์žก์„ ์ˆ˜ ์žˆ๋‹ค.

๊ธฐ์กด์— ์ˆ˜ํ‰ ๊ตฌ์กฐ๋ฅผ ๋งŒ๋“ค ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ์†์„ฑ์ด float๋‚˜ inline-block ๋“ฑ์ด ์žˆ์—ˆ๋Š”๋ฐ ์—ฌ๋Ÿฌ๊ฐ€์ง€ ๋ฌธ์ œ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์—ˆ๊ณ  flex๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ด๋Ÿฌํ•œ ์†์„ฑ์˜ ํ•œ๊ณ„๋ฅผ ๋ณด์™„ํ•  ์ˆ˜ ์žˆ๋‹ค.

๋ฌผ๋ก  ์ˆ˜ํ‰ ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ์ˆ˜์ง๋„ ๊ฐ€๋Šฅํ•˜๋‹ค.

flex๋Š” ์ปจํ…Œ์ด๋„ˆ์™€ ์•„์ดํ…œ ๊ฐœ๋…์„ ์‚ฌ์šฉํ•˜์—ฌ ์š”์†Œ์˜ ํฌ๊ธฐ๊ฐ€ ๋ถˆ๋ถ„๋ช…ํ•˜๊ฑฐ๋‚˜ ๋™์ ์ธ ๊ฒฝ์šฐ์—๋„ ์š”์†Œ๋ฅผ ํšจ์œจ์ ์œผ๋กœ ์ •๋ ฌํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค€๋‹ค.

  1. Grid๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ ๊ฐ€ ๋ฌด์—‡์ธ๊ฐ€์š”?

gird๋ฅผ ์‚ฌ์šฉ ํ•˜๋ฉด list์— width๋ฅผ ๋”ฐ๋กœ ์ž…๋ ฅ ํ•˜์ง€ ์•Š๊ณ  ๋ฆฌ์ŠคํŠธ์— ๊ฐ„๊ฒฉ๊ณผ width ๋น„์œจ๋งŒ ์ž…๋ ฅ ํ•ด์ฃผ๋ฉด ์‰ฝ๊ณ  ๊ฐ„ํŽธํžˆ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋˜ ์ถ”๊ฐ€์ ์œผ๋กœ ๋ธŒ๋ผ์šฐ์ € ์ฐฝ์„ ์ค„์—ฌ๋„ ์ž๋™์œผ๋กœ ๋ฆฌ์ŠคํŠธ์˜ width๊ฐ€ ํผ์„ผํŠธ(%)๋ฅผ ์ค€๊ฒƒ ์ฒ˜๋Ÿผ ๋ธŒ๋ผ์šฐ์ € ์ฐฝ์— ๋ฐ˜์‘ ํ•˜๋Š”๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.


์ด๋ฏธ์ง€ ํƒœ๊ทธ๋ฅผ ์Šคํƒ€์ผ๋กœ ๋Œ€์ฒดํ•˜๋Š” ๋ฒ•

  • background-image๋กœ ๋Œ€์ฒดํ•œ๋‹ค.

๋ฐ˜์‘ํ˜• ์›น์˜ 3์š”์†Œ

  1. ๊ทธ๋ฆฌ๋“œ ๋ ˆ์ด์•„์›ƒ : ๋ถ€๋ชจ์š”์†Œ์— display:grid; ์†์„ฑ์„ ๋„ฃ์–ด์ค€๋‹ค.
  2. ๊ฐ€๋ณ€ํ˜• ์ด๋ฏธ์ง€ : max width, width, min-width๋“ฑ์„ ์ด์šฉํ•ด ํ™”๋ฉด ๋„ˆ๋น„์— ๋”ฐ๋ผ ๋†’์ด์™€ ๋„ˆ๋น„๊ฐ€ ๋ฐ”๋€Œ๋Š” ์ด๋ฏธ์ง€
  3. ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ : ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ๋Š” ํ™”๋ฉด(screen), ํ‹ฐ๋น„(tv), ํ”„๋ฆฐํ„ฐ(print)์™€ ๊ฐ™์€ ๋ฏธ๋””์–ด ํƒ€์ž…(media type)๊ณผ ์ ์–ด๋„ ํ•˜๋‚˜ ์ด์ƒ์˜ ํ‘œํ˜„์‹(expression)์œผ๋กœ ๊ตฌ์„ฑ๋œ๋‹ค. ํ‘œํ˜„์‹์€ width, height, color์™€ ๊ฐ™์€ ๋ฏธ๋””์–ด ํŠน์„ฑ(media feature)๋“ค์„ ์ด์šฉํ•˜์—ฌ ๊ทธ ํŠน์„ฑ๋“ค์˜ ์ƒํƒœ์— ๋”ฐ๋ผ ๋‹ค๋ฅธ ์Šคํƒ€์ผ ์‹œํŠธ๋ฅผ ์ ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ๋Š” CSS3์— ํฌํ•จ๋˜์–ด ์žˆ์œผ๋ฉฐ, ์ปจํ…์ธ ์˜ ๋ณ€๊ฒฝ์—†์ด ์ฃผ๋กœ ํ™”๋ฉด์˜ ํฌ๊ธฐ์— ๋”ฐ๋ผ ์Šคํƒ€์ผ ์‹œํŠธ๋ฅผ ๋‹ฌ๋ฆฌํ•˜์—ฌ ์ ์ ˆํ•œ ๋ชจ์–‘์„ ๋ณด์—ฌ์ค„ ์ˆ˜ ์žˆ๋‹ค.

CSS selector๊ฐ€ ์–ด๋– ํ•œ ์›๋ฆฌ๋กœ ๋™์ž‘ํ•˜๋‚˜์š”?

  • ID : #header, #footer
  • Class : .container
  • Tag : div, p, a
  • Universal : *

๋ฐ˜์‘ํ˜•์›น๊ณผ ์ ์‘ํ˜•์›น์— ์„ค๋ช…ํ•˜์‹œ์˜ค

  1. ๋ฐ˜์‘ํ˜• ์›น์ด๋ž€ ํ•˜๋‚˜์˜ ์›น์‚ฌ์ดํŠธ์—์„œ PC, ์Šค๋งˆํŠธํฐ, ํƒœ๋ธ”๋ฆฟ PC ๋“ฑ ์ ‘์†ํ•˜๋Š” ๋””์Šคํ”Œ๋ ˆ์ด์˜ ์ข…๋ฅ˜์— ๋”ฐ๋ผ ํ™”๋ฉด์˜ ํฌ๊ธฐ๊ฐ€ ์ž๋™์œผ๋กœ ๋ณ€ํ•˜๋„๋ก ๋งŒ๋“  ์›นํŽ˜์ด์ง€ ์ ‘๊ทผ ๊ธฐ๋ฒ•์„ ๋งํ•ฉ๋‹ˆ๋‹ค.
  2. ์ ์‘ํ˜• ์›น์€ ํ•œ ๋งˆ๋””๋กœ ๋ฐ˜์‘ํ˜• ์›น์˜ ๋ฐ˜๋Œ€๋ผ๊ณ  ํ•  ์ˆ˜ ์žˆ๊ฒ ์ฃ . ๋งž๋Š” ๊ฑด๊ฐ€. ํ™ˆํŽ˜์ด์ง€(๋ธ”๋กœ๊ทธ)๊ฐ€ ๋ชจ๋“  ๊ธฐ๊ธฐ(PC, ๋ชจ๋ฐ”์ผ, ํƒœ๋ธ”๋ฆฟ ๋“ฑ๋“ฑ) ๋ฐ ํ•ด์ƒ๋„์— ์ตœ์ ํ™”๋˜์–ด ํ‘œ์‹œ๋˜๋Š” ๊ฒƒ์ด ๋ฐ˜์‘ํ˜• ์›น์ด๋ผ๋ฉด, ์ ์‘ํ˜• ์›น์€ ์‚ฌ์šฉ์ž์˜ ๊ธฐ๊ธฐ ๋ฐ ํ•ด์ƒ๋„์˜ ์ •๋ณด๋ฅผ ๋ฏธ๋ฆฌ ๋ฐ›์•„์„œ ์กฐ๊ฑด์— ๋งž๋Š” ํ™”๋ฉด์„ ๋ณด์—ฌ์ฃผ๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ฆ‰ ๋ฐ˜์‘ํ˜• ์›นํŽ˜์ด์ง€๋Š” 1๊ฐœ์˜ ์›นํŽ˜์ด์ง€๋ผ๋ฉด ์ ์‘ํ˜• ์›น์€ 2๊ฐœ ์ด์ƒ์˜ ์›นํŽ˜์ด์ง€๊ฐ€ ์กด์žฌํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•˜๋ฉด ๋  ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

PX, EM์— ๋Œ€ํ•ด ์„ค๋ช…ํ•˜์‹œ์˜ค

CSS์˜ ํ‘œ์ค€๊ถŒ๊ณ ์•ˆ์— ๋”ฐ๋ฅด๋ฉด ํฌ๊ธฐ ๋‹จ์œ„๋Š” ์ ˆ๋Œ€๋‹จ์œ„์™€ ์ƒ๋Œ€๋‹จ์œ„๋กœ ๊ตฌ๋ถ„๋ฉ๋‹ˆ๋‹ค.

- ์ ˆ๋Œ€๋‹จ์œ„ : in, cm, mm, pt, pc๊ฐ€ ์žˆ์œผ๋ฉฐ ์ถœ๋ ฅ์žฅ์น˜(๋ชจ๋‹ˆํ„ฐ)์˜ ๋ฌผ๋ฆฌ์  ์†์„ฑ์„ ์•„๋Š” ๊ฒฝ์šฐ ํšจ์œจ์ 
- ์ƒ๋Œ€๋‹จ์œ„ : em, ex, px, %๊ฐ€ ์žˆ์œผ๋ฉฐ ๊ธฐ์ข…๊ฐ„, ํ”Œ๋žซํผ ๊ฐ„์˜ ํ˜ธํ™˜์„ฑ์„ ์œ ์ง€ํ•˜๋Š”๋ฐ ์œ ๋ฆฌ
  • em : font_size, ํ•ด๋‹นํฐํŠธ์˜ ๋Œ€๋ฌธ์ž M์˜ ๋„ˆ๋น„๋ฅผ ๊ธฐ์ค€์œผ๋กœ ํ•จ.
  • ex : x-height, ํ•ด๋‹นํฐํŠธ์˜ ์†Œ๋ฌธ์ž x์˜ ๋†’์ด๋ฅผ ๊ธฐ์ค€์œผ๋กœ ํ•จ.
  • px : pixel, ํ‘œ์‹œ์žฅ์น˜(๋ชจ๋‹ˆํ„ฐ)์— ๋”ฐ๋ผ์„œ ์ƒ๋Œ€์ ์ธ ํฌ๊ธฐ๋ฅผ ๊ฐ€์ง.
  • % : percent, ๊ธฐ๋ณธ๊ธ€๊ผด์˜ ํฌ๊ธฐ์— ๋Œ€ํ•˜์—ฌ ์ƒ๋Œ€์ ์ธ ๊ฐ’์„ ๊ฐ€์ง.
  • pt : point, ์ผ๋ฐ˜ ๋ฌธ์„œ(์›Œ๋“œ ๋“ฑ)์—์„œ ๋งŽ์ด ์‚ฌ์šฉํ•˜๋Š” ๋‹จ์œ„

CSS ์ ์šฉ ์šฐ์„ ์ˆœ์œ„

  1. ๊ธฐ๋ณธ์ ์œผ๋กœ ๋’ค์— ๋‚˜์˜ค๋Š” css๊ฐ€ ์šฐ์„ ์ˆœ์œ„๊ฐ€ ๋†’์Šต๋‹ˆ๋‹ค.
  2. !important > inline style attribute > id > class, ๋‹ค๋ฅธ attribute, ์ˆ˜๋„ํด๋ž˜์Šค(:first-child๊ฐ™์€ ๊ฒƒ) > tag element, ์ˆ˜๋„์—˜๋ ˆ๋จผํŠธ(::before๊ฐ™์€ ๊ฒƒ) ์ˆœ์œผ๋กœ ์šฐ์„ ์ˆœ์œ„๊ฐ€ ๋†’์Šต๋‹ˆ๋‹ค.
  3. ์šฐ์„ ์ˆœ์œ„๊ฐ€ ๊ฐ™๋‹ค๋ฉด ๊ฐœ์ˆ˜๊ฐ€ ๋งŽ์€ css๊ฐ€ ์šฐ์„ ์ˆœ์œ„๊ฐ€ ๋†’์Šต๋‹ˆ๋‹ค.

CSS-in-JS์— ๋Œ€ํ•ด์„œ ์„ค๋ช…ํ•ด ์ฃผ์„ธ์š”

styled-components / emotion.js
  • ์ปดํฌ๋„ŒํŠธ ๋‹จ์œ„๋กœ ์ƒ๊ฐํ•  ์ˆ˜๊ฐ€ ์žˆ๋‹ค. CSS-in-JS๋Š” CSS ๋ชจ๋ธ์„ ๋ฌธ์„œ ๋ ˆ๋ฒจ์ด ์•„๋‹ˆ๋ผ ์ปดํฌ๋„ŒํŠธ ๋ ˆ๋ฒจ๋กœ ์ถ”์ƒํ™” ํ•œ๋‹ค.(๋ชจ๋“ˆ์„ฑ)

  • ์ง„์ •ํ•œ ๋ถ„๋ฆฌ ๋ฒ•์น™์„ ๋”ฐ๋ฅธ๋‹ค. CSS์—๋Š” ๋ช…์‹œ์ ์œผ๋กœ ์ •์˜ํ•˜์ง€ ์•Š์€ ๊ฒฝ์šฐ, ๋ถ€๋ชจ ์š”์†Œ์—์„œ ์ž๋™์œผ๋กœ ์ƒ์†๋˜๋Š” ์†์„ฑ์ด ์žˆ๋‹ค. CSS-in-JS์˜ ๊ฒฝ์šฐ ๋ถ€๋ชจ ์š”์†Œ์˜ ์†์„ฑ์„ ์ƒ์†ํ•˜์ง€ ์•Š๋Š”๋‹ค.

  • ๋Œ€ํ‘œ์ ์ธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ styled-components์™€ Emotion์ด ์žˆ๋‹ค.


CSS ์ „์ฒ˜๋ฆฌ๊ธฐ๋ฅผ ์‚ฌ์šฉํ•ด๋ณด์…จ๋‚˜์š”

sass / less / ...
  1. ์žฅ์  : ์กฐ๊ฑด๋ฌธ์ด๋‚˜ ๋ฐ˜๋ณต๋ฌธ, ๊ฐ„๋‹จํ•œ ์—ฐ์‚ฐ ๋“ฑ์„ ํ•  ์ˆ˜ ์žˆ์–ด์„œ CSS๋ฅผ ๋งˆ์น˜ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ํ•˜๋“ฏ์ด ์ฝ”๋”ฉํ•  ์ˆ˜ ์žˆ๋‹ค.
  2. ๋‹จ์  : ์›น์—์„œ๋Š” CSS๋งŒ ๋™์ž‘ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ „์ฒ˜๋ฆฌ๊ธฐ๋Š” ์ง์ ‘ ๋™์ž‘์‹œํ‚ฌ ์ˆ˜๊ฐ€ ์—†๋‹ค. ๋”ฐ๋ผ์„œ CSS๋กœ ์ปดํŒŒ์ผ ํ›„ ๋™์ž‘์‹œ์ผœ์•ผ ํ•œ๋‹ค.

padding๊ณผ margin์˜ ์ฐจ์ด๊ฐ€ ๋ฌด์—‡์ธ๊ฐ€์š”

  1. padding : ๋Œ€์ƒ์˜ ๋‚ด๋ถ€ ์—ฌ๋ฐฑ
  2. margin : ๋Œ€์ƒ์˜ ์™ธ๋ถ€ ์—ฌ๋ฐฑ