์ด๋ฒˆ ๊ฒŒ์‹œ๋ฌผ์€ CSS์˜ ์ •์˜์™€ CSS๋ฅผ HTML์˜ ์š”์†Œ์— ์ ์šฉ์‹œํ‚ค๋Š” ๋ฒ•์„ ์ •๋ฆฌํ•  ๊ฒƒ์ด๋‹ค.

CSS ๊ฐ€๋ณด์ž๊ณ ~

CSS๋Š” Cascading Style Sheets์˜ ์•ฝ์–ด์ด๋‹ค. Cascade๋ž€ ํญํฌ๋ž€ ๋œป์ธ๋ฐ ์ด๊ฒƒ์—์„œ ์œ ์ถ”๊ฐ€ ๊ฐ€๋Šฅํ•˜๋‹ค.

CSS๋Š” ํญํฌ์ˆ˜๊ฐ€ ์•„๋ž˜๋กœ ๋–จ์–ด์งˆ ๋•Œ์ฒ˜๋Ÿผ CSS์—์„œ ์Šคํƒ€์ผ์ด ์ ์šฉ๋  ๋•Œ๋Š” ์šฐ์„ ์ˆœ์œ„๋ฅผ ๊ฐ€์ง€๊ณ  ์ ์šฉ์ด ๋˜๊ธฐ ๋•Œ๋ฌธ์— ์ด ๋ชจ์Šต์ด ๋งˆ์น˜ ํญํฌ์ฒ˜๋Ÿผ ์œ„์—์„œ ์•„๋ž˜๋กœ ๋–จ์–ด์ง€๋Š” ๋ชจ์–‘์ด๊ธฐ ๋•Œ๋ฌธ์— Cascade๋ผ๋Š” ๋‹จ์–ด๊ฐ€ ๋ถ™์—ˆ๋‹ค.

์œ„์˜ ์ด๋ฏธ์ง€๋Š” ์Šคํƒ€์ผ ์ ์šฉ ์šฐ์„ ์ˆœ์œ„๋ฅผ ๋งํ•˜๋Š”๋ฐ External CSS์—์„œ CSS applied by the user๋กœ ๋‚ด๋ ค์˜ค๋ฉด์„œ ์ ์šฉ์„ ํ•˜๊ฒŒ ๋œ๋‹ค.

์ž์„ธํ•œ ์šฐ์„  ์ˆœ์œ„๋Š” ๊ฐ€์žฅ ๋‚ฎ์€ ์ˆœ์œ„๋ถ€ํ„ฐ ๋†’์€ ์ˆœ์œผ๋กœ ์ •๋ ฌ๋˜์–ด์žˆ๋‹ค.

  1. ๊ฐœ๋ฐœ์ž๊ฐ€ ์ž‘์„ฑํ•˜๋Š” ์™ธ๋ถ€ ์Šคํƒ€์ผ (๊ฐ€์žฅ ๋‚ฎ์€ ์šฐ์„ ์ˆœ์œ„)
    <link href="style.css" rel="stylesheet">
  2. head ํƒœ๊ทธ ์•ˆ์˜ ์Šคํƒ€์ผ
    <head>
      <style>
        p{
        	color:red;
        }
      </style>
    </head>
  3. ํƒœ๊ทธ ์•ˆ์—์„œ ์ž‘์„ฑ๋˜๋Š” inline ์Šคํƒ€์ผ
    <p style="color:red;">HELLO WORLD</p>
  4. ์‚ฌ์šฉ์ž ์ •์˜ ์Šคํƒ€์ผ (๊ฐ€์žฅ ๋†’์€ ์šฐ์„ ์ˆœ์œ„) = ์›น๋””์ž์ธ์˜ ์ˆ˜์ค€์ด ๋†’์•„์ง€๋ฉด์„œ ์ ์  ์ง€์›์ด ์ค‘๋‹จ๋˜๋Š” ๊ธฐ๋Šฅ
  • ์‚ฌ์šฉ์ž ์ •์˜ ์Šคํƒ€์ผ์€ ์˜ค๋ž˜์ „ ์›น๋””์ž์ธ์ด ๋„ˆ๋ฌด ์—‰๋ง์ผ ๋•Œ ์‚ฌ์šฉ์ž๊ฐ€ ์ง์ ‘ ์ถ”๊ฐ€ํ•˜๊ณ  ์ด๋™ํ•˜๋Š” ๋“ฑ์˜ ์Šคํƒ€์ผ ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ–ˆ์—ˆ๋‹ค.

CSS3๊ฐ€ ์ •์‹ ๋ช…์นญ์ด ์•„๋‹ˆ๋ผ๊ณ ? ๐Ÿคจ

๋‚˜๋Š” ๋ฐฐ์šฐ๋ฉด์„œ ํ•ญ์ƒ CSS3๋ผ๊ณ  ์ธ์ง€ํ•˜๊ณ  ์žˆ์—ˆ๋Š”๋ฐ ์ด๊ฒŒ ์ •์‹ ๋ช…์นญ์ด ์•„๋‹ˆ๋ผ๋‹ˆ..?

์šฐ์„  ์ด์œ ๋ฅผ ์•Œ์•„๋ด์•ผ๊ฒ ๋‹ค.

CSS 2.1์˜ ๊ฐœ๋ฐœ์ด ์™„๋ฃŒ๋˜๊ณ  CSSWG(CSS Working Group)๋Š” ๋” ์ด์ƒ CSS์˜ ๋ฒ„์ „์„ 3, 4์™€ ๊ฐ™์€ ๋ฉ”์ด์ € ์—…๋ฐ์ดํŠธ๋กœ ๊ฐ€์ ธ๊ฐ€์ง€ ์•Š๊ธฐ๋กœ ๊ฒฐ์ •ํ–ˆ๋‹ค๊ณ  ํ•œ๋‹ค.

์ด์œ ๋Š”

  • CSS1์—์„œ CSS2๋กœ ์—…๋ฐ์ดํŠธ ๋˜๋Š”๋ฐ ์ˆ˜๋งŽ์€ ๊ธฐ๋Šฅ๋“ค์ด ์ถ”๊ฐ€๋˜์–ด์•ผ ํ–ˆ๊ณ 
  • ๊ฐ๊ฐ์˜ ๊ธฐ๋Šฅ๋“ค์ด ๊ฐœ๋ฐœ๋˜๋Š”๋ฐ ์žˆ์–ด ์˜๊ฒฌ์„ ๋ฐ›๊ณ  ๋™์˜๋ฅผ ๊ตฌํ•˜๋Š” ๊ธฐ๊ฐ„๋„ ๋Š˜์–ด๋‚จ์— ๋”ฐ๋ผ
  • ์ด๋ฏธ ์™„๋ฃŒ๋œ ๊ธฐ๋Šฅ์€ ๋ฐœํ‘œํ•˜์ง€ ๋ชปํ•˜๊ณ  ์ง€์ฒด๋˜๋Š” ์‹œ๊ฐ„์ด ๋ฐœ์ƒํ•˜์˜€๊ณ 
  • ๊ฒฐ๊ตญ CSS2 ์ „์ฒด๋ฅผ ๊ฐœ๋ฐœ์™„๋ฃŒ ํ•˜๊ธฐ๊นŒ์ง€ 9๋…„์ด๋ผ๋Š” ์‹œ๊ฐ„์ด ํ•„์š”ํ–ˆ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

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

์•„๋ž˜ ์ด๋ฏธ์ง€๋Š” ์ตœ๊ทผ์— ๋‚˜์˜จ flex์˜ ๋ช…์„ธ์ด๋‹ค. "Specification"์„ ๋ณด๋ฉด CSS Flexible Box Layout Module์ด๋ผ๋Š” ๋ช…์นญ์ด ๋ถ™์–ด ์—…๋ฐ์ดํŠธ ๋œ ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค!

์ฐธ๊ณ ๋กœ CSS1์€ level1, CSS2๋Š” level2๋กœ ํ‘œ๊ธฐํ•˜๊ณ  ์žˆ๋‹ค. CSS3๋ถ€ํ„ฐ๋Š” module3๋กœ ๋ช…์นญ๋˜์—ˆ๋‹ค.


CSS์˜ ์—ญํ• 

HTML์€ ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์›นํŽ˜์ด์ง€์˜ ๋ ˆ์ด์•„์›ƒ์„ ๋งŒ๋“œ๋Š” ๋ผˆ๋Œ€์™€ ๊ฐ™์€ ์กด์žฌ์ด๋‹ค.

๊ทธ๋Ÿผ CSS๋Š” ๋ฌด์—‡์ผ๊นŒ?

๋ฐ”๋กœ "์˜ท"๊ณผ "์‚ด"๊ณผ ๊ฐ™์ด ๋ผˆ๋Œ€๋ฅผ ๊พธ๋ฉฐ์ฃผ๋Š” ์—ญํ• ์„ ํ•œ๋‹ค.

CSS์˜ ๊ธฐ๋ณธ๊ตฌ์กฐ

์šฐ๋ฆฌ๋Š” ์ด๋ฏธ CSS๋ฅผ ์‚ฌ์šฉํ•˜๋Š”๋ฐ ์ต์ˆ™ํ•˜์ง€๋งŒ ํ•œ๋ฒˆ ๋” ์•Œ์•„์„œ ๋‚˜์œ ๊ฒƒ์€ ์—†์œผ๋‹ˆ ํ•œ๋ฒˆ ๋” ๋ณต์Šตํ•ด๋ณด์ž!

selector{
	property: value;
}

์œ„์˜ ํ˜•์‹์œผ๋กœ ์„ ์–ธํ•œ๋‹ค.

์„ ์–ธ(declaration)์€ ์‰ฝ๊ฒŒ ์ƒ๊ฐํ•ด์„œ ์ฃผ๋ฌธ์„œ๋ฅผ ์ž‘์„ฑํ•˜๊ณ  ์ œ์ถœํ•˜๋ฉด์„œ "์ด๊ฑฐ ์ด๋ ‡๊ฒŒ ํ•ด์ค˜!"๋ผ๊ณ  ๋งํ•˜๋Š” ํ–‰์œ„๋ผ๊ณ  ์ƒ๊ฐํ•˜๋ฉด ๋œ๋‹ค.

๊ตณ์ด ์„ ์–ธ์ด๋ผ๋Š” ๋‹จ์–ด๋Š” ๋ชฐ๋ผ๋„ ๋˜์ง€๋งŒ ๋‚˜๋จธ์ง€ 3๊ฐœ์˜ ๊ตฌ์„ฑ์š”์†Œ๋Š” ๋ฐ˜๋“œ์‹œ ์ˆ™์ง€ํ•˜๋„๋ก ํ•˜์ž!

์•ž์œผ๋กœ ์šฐ๋ฆฌ๊ฐ€ ์ € ์šฉ์–ด๋“ค๋กœ ์†Œํ†ตํ•˜๋Š” ์ผ์ด ๋งŽ์„ ๊ฒƒ์ด๋‹ค. ๐Ÿ˜Ž


CSS ์ ์šฉํ•˜๊ธฐ

CSS๋ฅผ ์ ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ์ด 4๊ฐ€์ง€์ด๋‹ค.

  • ์ธ๋ผ์ธ ๋ฐฉ์‹
  • ๋‚ด๋ถ€ ์Šคํƒ€์ผ ์‹œํŠธ
  • ์™ธ๋ถ€ ์Šคํƒ€์ผ ์‹œํŠธ
  • ๋‹ค์ค‘ ์Šคํƒ€์ผ ์‹œํŠธ

์ธ๋ผ์ธ ๋ฐฉ์‹ : ํƒœ๊ทธ์— ์ง์ ‘ style ์†์„ฑ์„ ์ด์šฉํ•˜์—ฌ ์ ์šฉํ•˜๋Š” ๋ฐฉ์‹

<p style="color:red;">HELLO WORLD</p>

๋‚ด๋ถ€ ์Šคํƒ€์ผ ์‹œํŠธ : HTML๋ฌธ์„œ ๋‚ด์— style ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋‚ด๋ถ€์—์„œ ์ ์šฉํ•˜๋Š” ๋ฐฉ์‹

<head>
    <style>
        p{
        	color:red;
        }
	</style>
</head>

์™ธ๋ถ€ ์Šคํƒ€์ผ ์‹œํŠธ : HTML๋ฌธ์„œ์—์„œ linkํƒœ๊ทธ๋ฅผ ์ด์šฉํ•˜์—ฌ ์™ธ๋ถ€์˜ ์Šคํƒ€์ผ์‹œํŠธ๋ฅผ ์—ฐ๊ฒฐ์‹œ์ผœ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ์‹

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

๋‹ค์ค‘ ์Šคํƒ€์ผ ์‹œํŠธ : CSS ํŒŒ์ผ ์•ˆ์— CSS ํฌํ•จํ•˜๋Š” ๋ฐฉ์‹์ด๋‹ค.

๋‚˜๋Š” ์ด ๋ฐฉ์‹์„ ๋งŽ์ด ์‚ฌ์šฉํ•ด๋ณด์ง€ ๋ชปํ–ˆ๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ๋Š”๋ฐ ๋‚ด๊ฐ€ ์“ฐ๋˜ ๊ฒƒ๋„ ์ด ๋ฐฉ์‹์ด์˜€๋‹ค.

๋ฐ”๋กœ @๋ฅผ ์‚ฌ์šฉํ•˜๋Š” at-rule ๋ฌธ๋ฒ•์„ ์‚ฌ์šฉํ•˜์—ฌ ์—ฌ๋Ÿฌ ๊ฐœ์˜ ์Šคํƒ€์ผ ์‹œํŠธ๋ฅผ ํฌํ•จ์‹œํ‚ค๋Š” ๋ฐฉ์‹์ด๋‹ค.

at-rule ๋ฌธ๋ฒ•์˜ ์ข…๋ฅ˜๋Š” ์ƒ๊ฐ๋ณด๋‹ค ๋‹ค์–‘ํ•˜๋‹ค.

  • @charset : ๋ฌธ์„œ์—์„œ ๊ฐ€์žฅ ๋จผ์ € ์„ ์–ธํ•œ๋‹ค. ์Šคํƒ€์ผ ์‹œํŠธ์—์„œ ์‚ฌ์šฉํ•˜๋Š” ๋ฌธ์ž ์ธ์ฝ”๋”ฉ์„ ์ง€์ •ํ•œ๋‹ค.
/* ์Šคํƒ€์ผ ์‹œํŠธ ์ตœ์ƒ๋‹จ */
@charset "utf-8";

  • @import : ๋‹ค๋ฅธ ์Šคํƒ€์ผ ์‹œํŠธ์—์„œ ์Šคํƒ€์ผ ๊ทœ์น™์„ ๊ฐ€์ ธ์˜จ๋‹ค. @charset ๋ฐ”๋กœ ๋‹ค์Œ์— ์„ ์–ธ๋˜์–ด์•ผ ํ•˜๋ฉฐ ๊ตฌ๊ธ€ ์›นํฐํŠธ๋ฅผ ์ด์šฉํ•˜์—ฌ ํฐํŠธ๋ฅผ ์ ์šฉํ•  ๋•Œ๋„ ์ด๋Ÿฐ ํ˜•์‹์„ ์ง€์›ํ•œ๋‹ค.
@import url('https://fonts.googleapis.com/css2?family=Rubik+Microbe&display=swap');

  • @font-face : ๋””๋ฐ”์ด์Šค์— ์—†๋Š” ํฐํŠธ๋ฅผ ๋‹ค์šด๋ฐ›์•„ ์ ์šฉํ•  ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค.
@font-face {
      font-family: "Bitstream Vera Serif Bold";
      src: url("https://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
    }

  • @keyframes : ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ๋งŒ๋“ค ๋•Œ ์‹œ์ ์„ from-to๋‚˜ % ์ˆ˜์น˜๋กœ ์„ค์ •ํ•˜์—ฌ ์‚ฌ์šฉํ•œ๋‹ค.
@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

  • @media : ์‚ฌ์šฉ์ž ๋””๋ฐ”์ด์Šค์— ๋”ฐ๋ฅธ ์Šคํƒ€์ผ์„ ๋ถ„๊ธฐ ์ฒ˜๋ฆฌํ•˜๊ณ ์ž ํ•  ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค. ๋ฐ˜์‘ํ˜• ์›นํŽ˜์ด์ง€๋ฅผ ์ œ์ž‘ํ•  ๋•Œ ๋งŽ์ด ์‚ฌ์šฉ๋œ๋‹ค.
@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

  • @supports : ์ฃผ์–ด์ง„ ํ•˜๋‚˜ ์ด์ƒ์˜ CSS ๊ธฐ๋Šฅ์„ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์ง€์›ํ•˜๋Š”์ง€์— ๋”ฐ๋ผ ๋‹ค๋ฅธ ์Šคํƒ€์ผ ์„ ์–ธ์„ ํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์„ ์ œ๊ณตํ•œ๋‹ค.
@supports (display: grid) {
  div {
    display: grid;
  }
}



์ •๋ฆฌ๋ฅผ ๋งˆ์น˜๋ฉฐ!

CSS์˜ ์ •์˜์™€ ์—ฌ๋Ÿฌ๊ฐ€์ง€ ์ ์šฉ ๋ฐฉ๋ฒ•์€ ์•Œ๊ณ  ์žˆ์–ด์„œ ๋ณต์Šต ๊ฐœ๋…์œผ๋กœ ์ •๋ฆฌ๋ฅผ ํ•˜์˜€๋Š”๋ฐ,
@์„ ์ด์šฉํ•œ at-rule๋ฌธ๋ฒ•์€ ๋ชฐ๋ž๋˜ ๊ฒƒ๋„ ์žˆ๊ณ  ์•Œ๊ธด ํ•˜์ง€๋งŒ ๋งŽ์ด ์จ๋ณด์ง€ ์•Š์•„์„œ ๊ฒฐ๊ณผ๊ฐ€ ์–ด๋–ป๊ฒŒ ๋˜๋Š”์ง€ ๋ชจ๋ฅด๋Š” ๊ฒƒ๋„ ์žˆ๋‹ค. ๋ชจ๋ฅด๋Š” ๋ถ€๋ถ„์— ๋Œ€ํ•ด์„œ๋Š” ์ฐจ์ฐจ ๊ณต๋ถ€ํ•˜๋ฉด์„œ ๊ฒŒ์‹œ๊ธ€๋„ ์ˆ˜์ •ํ•  ์˜ˆ์ •์ด๋‹ค.

๋ฌด์—‡์„ ํ•˜๋˜์ง€ ๋Œ€์ถฉํ•˜๋ ค๋Š” ๋งˆ์Œ์€ ์ ˆ๋Œ€ ์•ˆ๊ฐ€์ง€๋„๋ก ๋…ธ๋ ฅํ•  ๊ฒƒ์ด๋‹ค.

์ด๋ฒˆ CSS ์‚ฌ์ดํด๋„ ๋ถˆํƒœ์šฐ์ž!๐Ÿ”ฅ

profile
untiring_dev - Notion ํŽ˜์ด์ง€๋Š” ์ •๋ฆฌ ์ค‘!

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