์ด๋ฒ ๊ฒ์๋ฌผ์ CSS์ ์ ์์ CSS๋ฅผ HTML์ ์์์ ์ ์ฉ์ํค๋ ๋ฒ์ ์ ๋ฆฌํ ๊ฒ์ด๋ค.
CSS
๋ Cascading Style Sheets
์ ์ฝ์ด์ด๋ค. Cascade
๋ ํญํฌ๋ ๋ป์ธ๋ฐ ์ด๊ฒ์์ ์ ์ถ๊ฐ ๊ฐ๋ฅํ๋ค.
CSS
๋ ํญํฌ์๊ฐ ์๋๋ก ๋จ์ด์ง ๋์ฒ๋ผ CSS
์์ ์คํ์ผ์ด ์ ์ฉ๋ ๋๋ ์ฐ์ ์์๋ฅผ ๊ฐ์ง๊ณ ์ ์ฉ์ด ๋๊ธฐ ๋๋ฌธ์ ์ด ๋ชจ์ต์ด ๋ง์น ํญํฌ์ฒ๋ผ ์์์ ์๋๋ก ๋จ์ด์ง๋ ๋ชจ์์ด๊ธฐ ๋๋ฌธ์ Cascade๋ผ๋ ๋จ์ด๊ฐ ๋ถ์๋ค.
์์ ์ด๋ฏธ์ง๋ ์คํ์ผ ์ ์ฉ ์ฐ์ ์์๋ฅผ ๋งํ๋๋ฐ External CSS
์์ CSS applied by the user
๋ก ๋ด๋ ค์ค๋ฉด์ ์ ์ฉ์ ํ๊ฒ ๋๋ค.
์์ธํ ์ฐ์ ์์๋ ๊ฐ์ฅ ๋ฎ์ ์์๋ถํฐ ๋์ ์์ผ๋ก ์ ๋ ฌ๋์ด์๋ค.
<link href="style.css" rel="stylesheet">
<head>
<style>
p{
color:red;
}
</style>
</head>
inline
์คํ์ผ<p style="color:red;">HELLO WORLD</p>
๋๋ ๋ฐฐ์ฐ๋ฉด์ ํญ์ CSS3
๋ผ๊ณ ์ธ์งํ๊ณ ์์๋๋ฐ ์ด๊ฒ ์ ์ ๋ช
์นญ์ด ์๋๋ผ๋..?
์ฐ์ ์ด์ ๋ฅผ ์์๋ด์ผ๊ฒ ๋ค.
CSS 2.1
์ ๊ฐ๋ฐ์ด ์๋ฃ๋๊ณ CSSWG(CSS Working Group)๋ ๋ ์ด์ CSS์ ๋ฒ์ ์ 3, 4์ ๊ฐ์ ๋ฉ์ด์ ์
๋ฐ์ดํธ๋ก ๊ฐ์ ธ๊ฐ์ง ์๊ธฐ๋ก ๊ฒฐ์ ํ๋ค๊ณ ํ๋ค.
์ด์ ๋
๊ทธ๋์ ๊ฑฐ๋ํ ๋ฒ์ ์ผ๋ก ์
๋ฐ์ดํธํ์ง ์๊ณ ๊ฐ๋ฐ์ด ๋๋ ๋๋ก ์ค์๊ฐ์ผ๋ก ์
๋ฐ์ดํธํ๊ธฐ๋ก ํ์๋ค๊ณ ํ๋ค.
์ค์๊ฐ์ผ๋ก ์กฐ๊ธ์ฉ ์
๋ฐ์ดํธํ๋ ๋จ์๋ฅผ ์ฌ๊ธฐ์๋ module
์ด๋ผ๊ณ ๋ถ๋ฅธ๋ค.
์๋ ์ด๋ฏธ์ง๋ ์ต๊ทผ์ ๋์จ flex
์ ๋ช
์ธ์ด๋ค. "Specification"์ ๋ณด๋ฉด CSS Flexible Box Layout Module
์ด๋ผ๋ ๋ช
์นญ์ด ๋ถ์ด ์
๋ฐ์ดํธ ๋ ๊ฒ์ ๋ณผ ์ ์๋ค!
์ฐธ๊ณ ๋ก CSS1์ level1
, CSS2๋ level2
๋ก ํ๊ธฐํ๊ณ ์๋ค. CSS3๋ถํฐ๋ module3
๋ก ๋ช
์นญ๋์๋ค.
HTML์ ํ๊ทธ๋ฅผ ์ฌ์ฉํ์ฌ ์นํ์ด์ง์ ๋ ์ด์์์ ๋ง๋๋ ๋ผ๋์ ๊ฐ์ ์กด์ฌ์ด๋ค.
๊ทธ๋ผ CSS๋ ๋ฌด์์ผ๊น?
๋ฐ๋ก "์ท"๊ณผ "์ด"๊ณผ ๊ฐ์ด ๋ผ๋๋ฅผ ๊พธ๋ฉฐ์ฃผ๋ ์ญํ ์ ํ๋ค.
์ฐ๋ฆฌ๋ ์ด๋ฏธ CSS๋ฅผ ์ฌ์ฉํ๋๋ฐ ์ต์ํ์ง๋ง ํ๋ฒ ๋ ์์์ ๋์ ๊ฒ์ ์์ผ๋ ํ๋ฒ ๋ ๋ณต์ตํด๋ณด์!
selector{
property: value;
}
์์ ํ์์ผ๋ก ์ ์ธํ๋ค.
์ ์ธ(declaration)์ ์ฝ๊ฒ ์๊ฐํด์ ์ฃผ๋ฌธ์๋ฅผ ์์ฑํ๊ณ ์ ์ถํ๋ฉด์ "์ด๊ฑฐ ์ด๋ ๊ฒ ํด์ค!"๋ผ๊ณ ๋งํ๋ ํ์๋ผ๊ณ ์๊ฐํ๋ฉด ๋๋ค.
๊ตณ์ด ์ ์ธ์ด๋ผ๋ ๋จ์ด๋ ๋ชฐ๋ผ๋ ๋์ง๋ง ๋๋จธ์ง 3๊ฐ์ ๊ตฌ์ฑ์์๋ ๋ฐ๋์ ์์งํ๋๋ก ํ์!
์์ผ๋ก ์ฐ๋ฆฌ๊ฐ ์ ์ฉ์ด๋ค๋ก ์ํตํ๋ ์ผ์ด ๋ง์ ๊ฒ์ด๋ค. ๐
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 ์ฌ์ดํด๋ ๋ถํ์ฐ์!๐ฅ