CSS๊ธฐ๋ณธ๋ฌธ๋ฒ•

๐Ÿ“„ CSS๋ž€?

โ–ช Cascading: ๊ณ„๋‹จ์‹
โ–ช Style: ๋ฉ‹์„ ๋‚ด๋‹ค
โ–ช Sheets: (์ข…์ด)ํ•œ ์žฅ

์ฆ‰, ๊ณ„๋‹จ์‹์œผ๋กœ ์Šคํƒ€์ผ์„ ์ •์˜ํ•˜๋Š” ๋ฌธ์„œ์ž…๋‹ˆ๋‹ค.

css๋Š” ์›น๋ฌธ์„œ๋ฅผ ๊พธ๋ฉฐ์ฃผ๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉํ•˜๋Š” ์–ธ์–ด์ž…๋‹ˆ๋‹ค.

ํ™•์žฅ์ž๋Š” *.css์ž…๋‹ˆ๋‹ค.

css๋ฌธ์„œ๋Š” html๋ฌธ์„œ์™€ ํ•จ๊ป˜ ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•ฉ๋‹ˆ๋‹ค.

<link href="style.css" rel="stylesheet">

์ด์™€ ๊ฐ™์ด html๋ฌธ์„œ์— css๋ฌธ์„œ์˜ ๋งํฌ๋ฅผ ๊ฑธ์–ด์ฃผ์–ด ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

๐Ÿ“„ CSS ๊ธฐ๋ณธ ๊ตฌ์„ฑ

์„ ํƒ์ž {
  ์†์„ฑ๋ช…: ์†์„ฑ๊ฐ’;
}
  • ์„ ํƒ์ž: ์–ด๋–ค ์š”์†Œ์— ์Šคํƒ€์ผ์„ ์ ์šฉํ• ์ง€์— ๋Œ€ํ•œ ์ •๋ณด
  • {์ค‘๊ด„ํ˜ธ}: ์„ ํƒํ•œ ์š”์†Œ์— ์ ์šฉํ•  ์Šคํƒ€์ผ์„ ์ •์˜ํ•˜๋Š” ์˜์—ญ
  • ์†์„ฑ๋ช…: ์–ด๋–ค ์Šคํƒ€์ผ์„ ์ •์˜ํ•˜๊ณ  ์‹ถ์€์ง€์— ๋Œ€ํ•œ ์ •๋ณด(์ƒ‰์ƒ, ํฌ๊ธฐ ๋“ฑ)
  • ์†์„ฑ๊ฐ’: ์–ด๋–ป๊ฒŒ ์ •์˜ํ•˜๊ณ  ์‹ถ์€์ง€์— ๋Œ€ํ•œ ์ •๋ณด

๐Ÿ“„ ์ฃผ์„

p {
  /* ์ด ์•ˆ์— ์ž‘์„ฑํ•˜๋ฉด ์ฃผ์„์œผ๋กœ ์ฒ˜๋ฆฌ๋ฉ๋‹ˆ๋‹ค. */
}

๐Ÿ“„ HTML์— CSS๋ฌธ์„œ๋ฅผ ์ ์šฉํ•˜๋Š” ๋ฒ•

  • ์ธ๋ผ์ธ ์Šคํƒ€์ผ: ํƒœ๊ทธ์— ์ง์ ‘ ๊ธฐ์ˆ ํ•ฉ๋‹ˆ๋‹ค.
  • ์Šคํƒ€์ผ ํƒœ๊ทธ: ์Šคํƒ€์ผ์‹œํŠธ๋ฅผ ์œ„ํ•œ ํƒœ๊ทธ๋ฅผ ์ถ”๊ฐ€ํ•˜์—ฌ ๊ธฐ์ˆ ํ•ฉ๋‹ˆ๋‹ค
  • ๋ฌธ์„œ ๊ฐ„์˜ ์—ฐ๊ฒฐ: ์Šคํƒ€์ผ์‹œํŠธ ๋ฌธ์„œ๋ฅผ ๋”ฐ๋กœ ์ž‘์„ฑํ•˜์—ฌ HTML ๋ฌธ์„œ์™€ ์—ฐ๊ฒฐํ•ฉ๋‹ˆ๋‹ค.
<link href="./style.css" rel="stylesheet" />

href: ์—ฐ๊ฒฐํ•˜๊ณ ์ž ํ•˜๋Š” ์™ธ๋ถ€ ์†Œ์Šค์˜ url์„ ๊ธฐ์ˆ ํ•˜๋Š” ์†์„ฑ
rel: ํ˜„์žฌ ๋ฌธ์„œ(HTML)์™€ ์™ธ๋ถ€ ์†Œ์Šค์˜ ์—ฐ๊ด€ ๊ด€๊ณ„๋ฅผ ๊ธฐ์ˆ ํ•˜๋Š” ์†์„ฑ

์ถœ์ฒ˜

  • ์œ ๋…ธ์ฝ”๋”ฉ

Leave a comment