CSS ์ž…๋ฌธ๐Ÿคช

CODING CLIMBERยท2021๋…„ 7์›” 18์ผ
0

๋“œ๋””์–ด CSS์— ์ž…๋ฌธํ–ˆ๋‹ค.
๊ฐ€๋œฉ์ด๋‚˜, ๋ผˆ๋Œ€๋งŒ ์žˆ์–ด์„œ ํ‰์ธกํ•œ html์„ ๋ณผ๋•Œ๋งˆ๋‹ค ์‚ด์ง ์•„์‰ฌ์› ๋Š”๋ฐ
๋‚˜๋„ ๋‚˜์ค‘์— ๋„ค์ด๋ฒ„ ๊ฐ™์€ ์›น์‚ฌ์ดํŠธ๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ๊ฒ ๋‹ค ๋ผ๋Š” ๋ง์ƒ์ด
CSS๋กœ ์กฐ๊ธˆ์ด๋‚˜๋งˆ ๊ฐ€๊นŒ์›Œ์กŒ์œผ๋ฉด ์ข‹๊ฒ ๋”ฐ ใ…Žใ…Ž

์˜ค๋Š˜ ๋ฐฐ์šด ๋‚ด์šฉ

1. CSS์™€ HTML์„ ์„ž๋Š” ๋ฐฉ๋ฒ•

1) html ํŒŒ์ผ์— html์ฝ”๋“œ์™€ css์ฝ”๋“œ๋ฅผ ํ•จ๊ป˜๋„ฃ๊ธฐ

๋ฐฉ๋ฒ•: (style) ์ด๋ผ๋Š” ํƒœ๊ทธ๋ฅผ ์“ด๋‹ค. ๊ทธ๋ฆฌ๊ณ  css์ฝ”๋“œ๋ฅผ ์ด style ํƒœ๊ทธ์•ˆ์— ์ž‘์„ฑํ•œ๋‹ค.

์ฃผ์˜: style ํƒœ๊ทธ๋Š” ํ•ญ์ƒ (head)์•ˆ์— ์žˆ์–ด์•ผํ•œ๋‹ค.


2) css์™€ html๋ถ„๋ฆฌ

๋ฐฉ๋ฒ•: ์ƒˆ๋กœ cssํŒŒ์ผ์„ ๋งŒ๋“ ๋‹ค. ex)style.css
๊ทธ๋ฆฌ๊ณ  (head)์•ˆ์—

 <link href="styles.css" rel="stylesheet"/>

์ด๋ ‡๊ฒŒ ์ ๋Š”๋‹ค.

๋‚˜๋Š” ์—ฌ๊ธฐ์„œ ์˜๋ฌธ์ ์ด ์ƒ๊ฒผ๋‹ค.
์™œ ํ•˜ํ•„ rel=stylesheet๋ผ๊ณ  ์ ์„๊นŒ?
stylesheet๋Š” ๋ฌด์—‡์ผ๊นŒ?

์ฐพ์•„๋ณด๋‹ˆ๊นŒ stylesheet๋Š” ๋ฌธ์„œ์˜ ๋ ˆ์ด์•„์›ƒ ์Šคํƒ€์ผ์„ ์ •์˜ํ•ด์ฃผ๋Š” ๊ฒƒ์ด๋‹ค. ํŽ˜์ด์ง€ ์‚ฌ์ด์ฆˆ, ์—ฌ๋ฐฑ, ํฐํŠธ ๋“ฑ๋“ฑ.
๊ทธ๋ฆฌ๊ณ  ๊ทธ์ค‘ ๊ฐ€์žฅ ์ž˜ ์•Œ๋ ค์ง„ stylesheet๊ฐ€ css์ธ๊ฒƒ์ด๋‹ค.
ํ•œ๋งˆ๋””๋กœ ์ด๊ฑด "๋‚˜๋Š” ์ด๋ŸฐํŒŒ์ผ๊ณผ ์—ฐ๊ฒฐ์„ ํ• ๊ฑด๋ฐ, ๊ทธ ๊ด€๊ณ„๋Š” ๋ ˆ์ด์•„์›ƒ์„ ๊พธ๋ฉฐ์ฃผ๋Š” ๊ด€๊ณ„๋ž๋‹ˆ๋‹ค." ๋ผ๋Š” ๋œป์œผ๋กœ ์œ ์ถ”๋œ๋‹ค.

  1. ๊ฐ€๋ฆฌํ‚ค๋Š” ๊ฒƒ ์ž์ฒด๋ฅผ Selector๋ผ๊ณ  ํ•œ๋‹ค.
    ex) ์ด ํƒœ๊ทธ๋Š” ์ดˆ๋ก์ƒ‰ ์ด์–ด์•ผํ•ด!
    ์šฐ์„ , html css ๊ฐ™์€ ํŒŒ์ผ ์•ˆ์—์„œ ์“ธ๋•Œ๋Š” ์ด๋Ÿฐ ํ˜•์‹์œผ๋กœ ์“ด๋‹ค

(style)
h1 (ํƒœ๊ทธ๋ฅผ ์ง€์ •ํ•ด์ฃผ๊ณ )
{ color:blueviolet; (์†์„ฑ๊ฐ’๋“ค์„ ์“ด๋‹ค)
font-style:italic;
font-weight:800;
}
(/style)

๋ญ”๊ฐ€ ๊พธ๋ฐ€์ˆ˜ ์žˆ์œผ๋‹ˆ๊นŒ ๋„ˆ๋ฌด ์žฌ๋ฐŒ์—ˆ๊ณ , ์‹ ๊ธฐํ–ˆ๋‹ค.ใ…Žใ…Ž
๋‚ด์ผ๋ถ€ํ„ฐ ๋‹ค๋ฅธ ๊ฐ•์˜ ๋นก์„ธ๊ฒŒ ๋“ค์„ํ…๋ฐ ์‚ด์ง ๊ฑฑ์ •๋œ๋‹ค!!
์•„์ž์žฃ!!ํ™”์ดํŒ…์ด๋‹ท!!๋‚Œ์จฉํฌ!!

profile
์ฝ”๋”ฉํ•˜๋Š” ํด๋ผ์ด๋จธ

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