CSS Basic

์Šคํƒ€์ผ๊ณผ ์Šคํƒ€์ผ ์‹œํŠธ

  • ์Šคํƒ€์ผ์€ HTML์—์„œ ์ž์ฃผ ์‚ฌ์šฉํ•˜๋Š” ๊ธ€๊ผด, ์ƒ‰์ƒ, ์ •์—ด ๋“ฑ๋“ฑ ๋ฌธ์„œ์˜ ๊ฒ‰๋ชจ์Šต์„ ๊ฒฐ์ •์ง“๋Š” ๋‚ด์šฉ๋“ค์„ ๊ฐ€๋ฆฌํ‚จ๋‹ค.

์™œ ์Šคํƒ€์ผ์„ ์‚ฌ์šฉํ• ๊นŒ?

  1. ์›น ๋ฌธ์„œ์˜ ๋‚ด์šฉ๊ณผ ์ƒ๊ด€์—†์ด ๋””์ž์ธ๋งŒ ๋ฐ”๊ฟ€ ์ˆ˜ ์žˆ๋‹ค.[CSS Zen Garden]

  2. ๋‹ค์–‘ํ•œ ๊ธฐ๊ธฐ์— ๋งž๊ฒŒ ํƒ„๋ ฅ์ ์œผ๋กœ ๋ฐ”๋€Œ๋Š” ๋ฌธ์„œ๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‹ค.

์Šคํƒ€์ผ ํ˜•์‹

์Šคํƒ€์ผ ํ‘œ๊ธฐ๋ฒ• + ์ฃผ์„

/*์•„๋ž˜ 3๊ฐ€์ง€๋Š” ๋ชจ๋‘ ๊ฐ™์€ ์†Œ์Šค์ด๋‹ค.*/
h2{font-size: 20px; color: orange;}

h2{
    font-size: 20px;
    color: orange;
}

h2
{
    font-size: 20px;
    color: orange;
}
  • ์Šคํƒ€์ผ ์‹œํŠธ๋Š” ํ•œ ๋ฌธ์„œ์— ๋ฐ˜๋ณตํ•ด ์“ฐ์ด๋Š” ์Šคํƒ€์ผ์„ ๋ชจ์•„ ๋†“์€ ๊ฒƒ์ด๋‹ค.

    • ๋‚ด๋ถ€ ์Šคํƒ€์ผ ์‹œํŠธ : ์›น ๋ฌธ์„œ ์•ˆ์—์„œ ์‚ฌ์šฉํ•  ์Šคํƒ€์ผ(<head></head>์•ˆ์—์„œ <style></style>ํƒœ๊ทธ ๋‚ด์— ์ •์˜

    • ์™ธ๋ถ€ ์Šคํƒ€์ผ ์‹œํŠธ : .cssํ™•์žฅ์ž ์‚ฌ์šฉ

      <link href="์™ธ๋ถ€ ์Šคํƒ€์ผ ํŒŒ์ผ ๊ฒฝ๋กœ" rel="stylesheet" type="text/css">
    • ์ธ๋ผ์ธ ์Šคํƒ€์ผ : ๊ฐ„๋‹จํ•œ ์Šคํƒ€์ผ ์ •๋ณด๋ผ๋ฉด ์Šคํƒ€์ผ์„ ์ ์šฉํ•  ๋Œ€์ƒ์— ์ง์ ‘ ํ‘œ์‹œ

      <p style="color: blue;"> ํŒŒ๋ž€์ƒ‰ </p>

์ฃผ์š” ์„ ํƒ์ž(selector)

  • ์ „์ฒด ์„ ํƒ์ž(*) : ๋ชจ๋“  ์š”์†Œ์— ์Šคํƒ€์ผ ์ ์šฉ

  • ํƒœ๊ทธ ์„ ํƒ์ž : ํŠน์ • ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•œ ์š”์†Œ์— ์Šคํƒ€์ผ ์ ์šฉ

  • ํด๋ž˜์Šค ์„ ํƒ์ž(.) : ํŠน์ • ๋ถ€๋ถ„์— ์Šคํƒ€์ผ ์ ์šฉ(์—ฌ๋Ÿฌ๋ฒˆ ์ ์šฉ๊ฐ€๋Šฅ)

  • id ์„ ํƒ์ž(#) : ํŠน์ • ๋ถ€๋ถ„์— ์Šคํƒ€์ผ ์ ์šฉ(ํ•œ ๋ฒˆ๋งŒ ์ ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.)

  • ๊ทธ๋ฃน ์„ ํƒ์ž(,) : ๋‘˜ ์ด์ƒ ์š”์†Œ์— ๊ฐ™์€ ์Šคํƒ€์ผ ์ ์šฉ

/*์ „์ฒด*/
*{
    padding: 0;
    margin: 0;
}
/*ํƒœ๊ทธ*/
h2{
    font-size: 20px;
    color: orange;
}
/*ํด๋ž˜์Šค*/
.bluetext{
    color: blue;
}
/*ํŠน์ • ํƒœ๊ทธ์— ํด๋ž˜์Šค์—๋งŒ ์ ์šฉ*/
h2.bluetext{
    color: blue;
}
/*id*/
#container{
    background: #ffa00;
    width: 400px;
    height: 200px;
    margin: 0 auto;
}
/*๊ทธ๋ฃน*/
p, h1{
    text-align: center;
}

ํƒœ๊ทธ์™€ ์š”์†Œ์˜ ์ฐจ์ด

ํƒœ๊ทธ๋Š” ๋ง ๊ทธ๋Œ€๋กœ ํƒœ๊ทธ ์ž์ฒด๋ฅผ ๊ฐ€๋ฆฌํ‚ค๊ณ , ์š”์†Œ๋Š” ํƒœ๊ทธ๊ฐ€ ์ ์šฉ๋œ ๊ฒƒ์„ ๊ฐ€๋ฆฌํ‚จ๋‹ค.

์บ์Šค์บ์ด๋”ฉ ์Šคํƒ€์ผ ์‹œํŠธ(CSS)

Cascading ์ด๋ž€ ์œ„์—์„œ ์•„๋ž˜๋กœ ํ๋ฅธ๋‹ค๋Š” ์˜๋ฏธ๋กœ, ์„ ํƒ์ž์— ์ ์šฉ๋œ ๋งŽ์€ ์Šคํƒ€์ผ ์ค‘์— ์–ด๋–ค ์Šคํƒ€์ผ์„ ๋‚˜ํƒ€๋‚ผ์ง€๋ฅผ ๊ฒฐ์ •ํ•œ๋‹ค.

  1. ์Šคํƒ€์ผ ์šฐ์„ ์ˆœ์œ„ : ์Šคํƒ€์ผ ๊ทœ์น™์˜ ์ค‘์š”๋„, ์ ์šฉ ๋ฒ”์œ„์— ๋”ฐ๋ผ ์šฐ์„ ์ˆœ์œ„๊ฐ€ ๊ฒฐ์ •๋˜๊ณ  ๊ทธ ์šฐ์„  ์ˆœ์œ„์— ๋”ฐ๋ผ์„œ ์Šคํƒ€์ผ์ด ์ ์šฉ๋œ๋‹ค.

  2. ์Šคํƒ€์ผ ์ƒ์† : ํƒœ๊ทธ๋“ค์˜ ํฌํ•จ ๊ด€๊ณ„์— ๋”ฐ๋ผ ๋ถ€๋ชจ ์š”์†Œ์˜ ์Šคํƒ€์ผ์„ ์ž์‹์š”์†Œ๋กœ ์ „๋‹ฌํ•œ๋‹ค.

์Šคํƒ€์ผ ์šฐ์„ ์ˆœ์œ„

  • ์ค‘์š”๋„(Improtance) 1. ์‚ฌ์šฉ์ž ์Šคํƒ€์ผ ์‹œํŠธ๊ฐ€ ์ตœ์šฐ์„ (์ €์‹œ๋ ฅ์ž, ์ƒ‰์•ฝ์ž) 2. ์ค‘์š” ์Šคํƒ€์ผ(!important) : ์ตœ์šฐ์„  ์ ์šฉํ•ด์•ผ ํ•  ์Šคํƒ€์ผ์€ ๋’ค์— !important๋ถ™์ธ๋‹ค. 3. ๊ธฐ๋ณธ์ ์ธ ๋ธŒ๋ผ์šฐ์ € ์Šคํƒ€์ผ ์‹œํŠธ

  • ๋ช…์‹œ๋„(Specificity) 1. ์ธ๋ผ์ธ ์Šคํƒ€์ผ : ํƒœ๊ทธ ์•ˆ์— style์†์„ฑ ์‚ฌ์šฉ 2. id ์Šคํƒ€์ผ 3. ํด๋ž˜์Šค ์Šคํƒ€์ผ 4. ํƒœ๊ทธ ์Šคํƒ€์ผ

  • ์†Œ์Šค์—์„œ์˜ ์ˆœ์„œ : ๋‚˜์ค‘์— ์˜จ ์Šคํƒ€์ผ์ด ๋จผ์ € ์˜จ ์Šคํƒ€์ผ์„ ๋ฎ์–ด์“ด๋‹ค.

์Šคํƒ€์ผ ์ƒ์†

์ž์‹ ์š”์†Œ์—์„œ ๋ณ„๋„๋กœ ์Šคํƒ€์ผ์„ ์ง€์ •ํ•˜์ง€ ์•Š์œผ๋ฉด ๋ถ€๋ชจ ์š”์†Œ์— ์žˆ๋Š” ์Šคํƒ€์ผ ์†์„ฑ๋“ค์ด ์ž์‹ ์š”์†Œ๋กœ ์ „๋‹ฌ๋˜๋Š” ๊ฒƒ์„ ์Šคํƒ€์ผ ์ƒ์†์ด๋ผํ•œ๋‹ค.ํ•˜์ง€๋งŒ ์ฃผ์˜ํ•  ๊ฒƒ์€ ์Šคํƒ€์ผ์˜ ๋ชจ๋“  ์†์„ฑ์ด ์ƒ์†๋˜๋Š” ๊ฒƒ์€ ์•„๋‹ˆ๋‹ค. ๋ฐฐ๊ฒฝ์ด๋ฏธ์ง€๋‚˜ ๋ฐฐ๊ฒฝ์ƒ‰์ด ์ž์‹ ์š”์†Œ์— ์ƒ์†๋˜์ง€ ์•Š๋Š”๋‹ค.

CSS3์™€ CSS ๋ชจ๋“ˆ

  • CSS3๋Š” ์ด์ „ ๋ฒ„์ „๋ณด๋‹ค ์ •๊ตํ•˜๊ณ , ํ™”๋ คํ•œ ํ™”๋ฉด์„ ๊ตฌ์„ฑํ•˜๋ฉฐ ์• ๋‹ˆ๋ฉ”์ด์…˜๊นŒ์ง€ ์ง€์›ํ•œ๋‹ค.

  • CSS๋ชจ๋“ˆ์€ ๋ฐฐ๊ฒฝ, ๊ธ€๊ผด, ๋ฐ•์Šค ๋ชจ๋ธ ๋“ฑ ์ˆ˜์‹ญ ๊ฐœ ๊ธฐ๋Šฅ์„ ์ฃผ์ œ๋ณ„ ๊ทœ์•ฝ

  • CSS3๋Š” ํ‘œ์ค€์ด๋ผ๊ณ  ๋ฌถ์–ด ๋ง ํ•  ์ˆ˜ ์—†๊ณ  ๊ณ„์† ์ƒˆ๋กœ์šด CSS ๋ชจ๋“ˆ์ด ๋“ฑ์žฅํ•  ์ˆ˜ ์žˆ๋‹ค.

CSS3์™€ ๋ธŒ๋ผ์šฐ์ € ์ ‘๋‘์‚ฌ(prefix)

์ ‘๋‘์‚ฌ

์„ค๋ช…

-webkit-

์›นํ‚คํŠธ ๋ฐฉ์‹ ๋ธŒ๋ผ์šฐ์ €์šฉ(์‚ฌํŒŒ๋ฆฌ, ํฌ๋กฌ)

-moz-

๊ฒŒ์ฝ” ๋ฐฉ์‹ ๋ธŒ๋ผ์šฐ์ €์šฉ(๋ชจ์งˆ๋ผ,ํŒŒ์ด์–ดํญ์Šค)

-o-

์˜คํŽ˜๋ผ ๋ธŒ๋ผ์šฐ์ €

-ms-

๋งˆ์ดํฌ๋กœ์†Œํ”„ํŠธ ์ธํ„ฐ๋„ท ์ต์Šคํ”Œ๋กœ๋Ÿฌ

-prefix-free์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ์„ ์ด์šฉํ•˜๋ฉด ๋งค๋ฒˆ ๋ธŒ๋ผ์šฐ์ € ์ ‘๋‘์‚ฌ๋ฅผ ๋ถ™์ด์ง€ ์•Š์•„๋„ ๋œ๋‹ค.

์ฐธ๊ณ 

Last updated

Was this helpful?