CSS
ํ์ต ํค์๋
CSS
Sass
CSS ๋ฐฉ๋ฒ๋ก
CSS Modules
CSS
Cascading Style Sheets
์นํ์ด์ง๋ฅผ ๊พธ๋ฏธ๋ ค๊ณ ์์ฑํ๋ ์ฝ๋
๐ CSS์ ๋ฑ์ฅ
1990
๋ฌธ์๋ฅผ ๊ณต์ ํ๊ธฐ ์ํด์ HTML ๋ฑ์ฅ
1990
๋ฌธ์๋ฅผ ๊ณต์ ํ๊ธฐ ์ํด์ HTML ๋ฑ์ฅ์น์ ๋ฌธ์๋ฅผ ๊ณต์ ํ๊ธฐ ์ํด ๋ง๋ค์ด์ก๋ค. ๋ฌธ์๋ฅผ ๋ง๋ค๊ธฐ ์ํด HTML์ด ๋ฑ์ฅํ๊ฒ ๋์๊ณ , HTML์ ์์์ ์ ํ๊ธฐ ์ํด ํ๊ทธ์ ์ง์ ์คํ์ผ์ ์ ๋ ฅํ๋ ๋ฐฉ์(inline-style) ์ผ๋ก ์ฌ์ฉ๋์๋ค.
<div>
<p>๋ ๋ฌธ์๊ณ , <strong style="color:red">๊ฐ์กฐํ๊ณ ์ถ์ด!!</strong><p>
</div>
1996
CSS ํ์
1996
CSS ํ์inline-style์ ๋ฌธ์ ์ ์ผ๋ก ์ธํด CSS๊ฐ ํ์ํ๊ฒ ๋๋ค.
๋์ผํ๊ฒ ๊ฐ์กฐํ๊ณ ์ถ์ ๊ณณ์ ๋งค๋ฒ ๋์ผํ ์ฝ๋๋ฅผ ์์ฑ
์์ฑ์ด ๋ณ๊ฒฝ๋๋ ๊ฒฝ์ฐ ์ผ์ผ์ด ๋ค ๋ฐ๊ฟ์ผ ํ๋ ์ํฉ์ด ๋ฐ์
/* CSS Ruleset : ์ ํ์(Selector) & ์ ์ธ(Declaration) */
strong {color:red; text-decoration:underline;}
HTML์์ ์์์ ๋ถ๋ฆฌํ๊ณ ์ํ๋ ํ๊ทธ๋ฅผ ์ ํ(Selector)ํ์ฌ ์คํ์ผ ์ ์ธ(Declarations)ํด๋๋ ๋ฐฉ์์ผ๋ก ์ ์ฉํ ์ ์๊ฒ ๋์๋ค.
๐จ CSS์ ๋ฌธ๋ฒ์ ํ์ฅ
2006
Sass์ ๋ฑ์ฅ
2006
Sass์ ๋ฑ์ฅSass๋ Nested(์ค์ฒฉ๋) ํ
Selector
์variable
๋ฅผ ๋ฑ๋กํ ์ ์๋ ์ถ๊ฐ์ ์ธ ๋ฌธ๋ฒ์ผ๋ก ์์ฑํ๋ฉด CSS๋ก ๋ณํ์ ์์ผ์ฃผ๋ pre-processor(์ ์ฒ๋ฆฌ๊ธฐ)์ด๋ค.

์ ์ฒ๋ฆฌ๊ธฐ๋ฅผ ์ฌ์ฉํด์ Selector์ ๋ฐ๋ณต์ ์ค์ด๊ณ ์์ฃผ ์ฌ์ฉ๋๋ ๊ธ์ํฌ๊ธฐ,์์ ๋ฑ์ ๋ณ์๋ก ๋ฑ๋กํ์ฌ ์ฌ์ฉํ ์ ์๋๋ก ํด์ฃผ์๋ค. ๊ทธ๋ฌ๋ CSS ํ์ผ๋ก ๋ณ๊ฒฝํด์ฃผ๋ ์ปดํ์ผ๋ฌ
๊ฐ ํ์ํ๋ ๋จ์ ์ด ์๋ค.
๐จ ์ปดํฌ๋ํธ ๊ธฐ๋ฐ์ App ๋ฑ์ฅ, CSS ๊ตฌ์กฐ์์ ๋ฌธ์ ๋ฐ์
ํ์ด์ค๋ถ์ ์ฑ์ฅ์ผ๋ก ์ธํด React๋ฅผ ๋น๋กฏํ Framework๊ฐ ๋ง๋ค์ด์ง๋ฉด์ ๋ฌธ์ ๊ธฐ๋ฐ์ด ์๋ ์ปดํฌ๋ํธ ๊ธฐ๋ฐ์ ๊ฐ๋ฐ ๋ฐฉ์์ด ์๋ฆฌ์ก๊ฒ ๋์๋ค.
๋ฌธ์๋ฅผ ํธํ๊ฒ ๊พธ๋ฐ ์ ์๋๋ก ์ค๊ณ๋ CSS๋ ๋ฌธ์๋ฅผ ๊พธ๋ฏธ๋ ๋ฐ ์์ด์ ์ ์ฉํ์ง๋ง ์ ํ๋ฆฌ์ผ์ด์ ์ค๋ฌ์ด UI์ ๋ชจ๋๊ณผ ์ปดํฌ๋ํธ์ ๋ฐฉ์์ ๊ฐ๋ฐ ๋ฐฉ์๊ณผ๋ ๋ง์ง ์์๋ค.
๐ CSS ์ค๊ณ ๋ฐฉ์์ ๋ฌธ์ ์
Global Scope
: CSS์ ์์ฑ์ ์ด๋์๋ ์ ์ธ ๊ฐ๋ฅํ๋ฉฐ (ex. inline, style ํ๊ทธ, link ํ๊ทธ๋ก ์ฐ๊ฒฐํ ํ์ผ.. ๋ฑ) ๋ชจ๋ ํ๋ก์ ํธ์ ์ํฅ์ ์ค๋ค.
๋ชจ๋ ์คํ์ผ์ด global์ ์ ์ธ๋์ด ์ค๋ณต๋์ง ์๋ class ์ด๋ฆ์ ์ ์ฉํด์ผ ํ๋ ๋ฌธ์
Specificity
: HTML์์ ์ง์ ํ class ์์๊ฐ ์๋๋ผ CSS์ ์์์ ์ํด ์์ ์ฐ์ ์์๊ฐ ๊ฒฐ์ ๋ฉ๋๋ค.
CSS ๋ก๋ ์์์ ๋ฐ๋ผ ์คํ์ผ์ด ์ฐ์ ์์๊ฐ ๋ฌ๋ผ์ง๋ ๋ฌธ์
๐ก CSS ๋ฌธ์ ๋ฅผ ํด๊ฒฐํด๋ณด์
2013
CSS ๋ฐฉ๋ฒ๋ก (feat.BEM)
2013
CSS ๋ฐฉ๋ฒ๋ก (feat.BEM)๐ BEM Block, Element, Modifier์ ์ค์๋ง๋ก CSS ํด๋์ค ๋ค์ด๋ฐ ์ปจ๋ฒค์ ๋ฐฉ๋ฒ๋ก HTML ์์๋ค์ ๊ฐ๊ฐ Block, Element, Modifier ์ธ ๊ฐ์ง๋ก ๋ถ๋ฅํด์ ์๋ช ์ ํ๋ ๋ฐฉ๋ฒ๋ก

์ฒด๊ณ์ ์ผ๋ก ๊ท์น์ ๊ฐ์ง๊ณ CSS๋ฅผ ์์ฑ์ ํด์ผ๊ฒ ๋ค๋ ํ์์ฑ์ ์ํด CSS ๋ฐฉ๋ฒ๋ก ๋ค์ด ๋ฑ์ฅํ๊ฒ ๋์๋ค. ๊ตฌ์กฐ๋ฅผ ํํํ๊ณ Specificity๋ฅผ ํ๋๋ก๋ง ๊ด๋ฆฌํ์ฌ ๊ธฐ์กด์ ๋ฌธ์ ์ ์ ํด๊ฒฐํ๊ณ ์ ํ๋ ๋ฐฉ์์ด๋ค. ๊ฐ๊ฒฐํ๊ณ ์ง๊ด์ ์ด๋ฉฐ ๋ฐฐ์ฐ๊ธฐ ์ฌ์์ BEM์ด ๋์ธ๊ฐ ๋์๋ค.
2015
CSS Modules
2015
CSS ModulesSelector๋ ๋จ์ํ๋๋ ๋ฐฉํฅ์ผ๋ก ์งํํ์ง๋ง ์ฌ์ ํ Global Scope ์ผ๋ก ์ธํด ์ปดํฌ๋ํธ์ CSS๊ฐ์ ๊ตฌ์กฐ์ ๋ฒ์๋ฅผ ์ผ์นํ๋ ๋ฌธ์ ๊ฐ ๋จ์ ์์๋ค. ์ด๋ฌํ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๋ ค๋ ์ฒซ๋ฒ์งธ ์์ง์์ผ๋ก CSS Modules
์ด ๋ฑ์ฅํ์๋ค.
CSS Modules
CSS๋ฅผ ๋ชจ๋ํ
ํ์ฌ ์ฌ์ฉํ๋ ๋ฐฉ์์ด๋ค.๋ฒ๋ค๋ฌ๊ฐ CSS ํด๋์ค์ ํด์ ๋ฌธ์์ด์ ์ถ๊ฐํ์ฌ ๊ณ ์ ํ className์ ๋ง๋ค์ด, Scope๋ฅผ ์ง์ญ์ ์ผ๋ก ์ ํํ ์ ์๋ค.

์ฌ์ฉ๋ฐฉ๋ฒ
.module.css
ํ์ฅ์๋ฅผ ์ฌ์ฉํด์ CSS ๋ชจ๋ ํ์ผ์ ์์ฑ
.box{
background : black;
color: white;
padding : 2rem;
}
import React from "react";
import styles from "./Box.module.css";
function Box() {
return <div className={styles.box}>{styles.box}</div>;
}
export default Box;
์ฅ์
ํด์ ๋ฌธ์์ด์ด ์ถ๊ฐ ๋์ด ๊ณ ์ ํ ํด๋์ค๋ค์์ ๊ฐ๊ธฐ ๋๋ฌธ์, CSS ํด๋์ค๊ฐ ์ค์ฒฉ๋๋ ๊ฒ์ ์๋ฒฝํ ๋ฐฉ์งํ ์ ์๋ค.
css ๋ค์ด๋ฐ ๊ท์น์ ๊ฐ์ํ ํ ์ ์๋ค.
์ปดํฌ๋ํธ ๋จ์๋ก ์คํ์ผ์ ๊ด๋ฆฌํ ์ ์์ด ์ ์ง๋ณด์ ์ฉ์ด
๋จ์
๋ณ๋์ CSS ํ์ผ์ ๋ง๋ค์ด ๊ด๋ฆฌํด์ผ ํ๋ค.
๋๋๋ง ๊ณผ์ ์์ ์๋ ๋ณํ๋ ํด๋์ค๋ช ์ด ์ฝ๋์ ๊ฐ๋ ์ฑ์ ์ ํดํ๋ ๊ฒฝ์ฐ๋ ์๋ค.
๐ ์ฐธ๊ณ
Last updated