๐ท CSS(0) ์์ ์ ํํ๊ธฐ
๋ณด๊ธฐ ์ข์ ๋ก์ด ๋จน๊ธฐ๋ ์ข๋ค.
์๋ฆ๋ค์์ ๋ํ ์ ๋ง์ ์ธ๊ฐ์ด ๋ณธ๋ฅ์ ์ผ๋ก ์ง๋๊ณ ์๋ ์์ฑ์ด๊ณ ๊ทธ๊ฒ์ ์น ๋ฌธ์์๋ ๋ง์ฐฌ๊ฐ์ง์ด๋ค.
์๋ฌด๋ฆฌ ์ ๋ณด๋ฅผ ๋ด๋ ๋ฌธ์๋ผ๊ณ ํ์ง๋ง ์ง์ ๋ถํ๊ณ ๋์กํ๊ฒ ์ฐ์ฌ์ ธ ์๋ค๋ฉด ์ฐธ ๋ณด๊ธฐ ์ซ์ ๊ฒ ๊ฐ๋ค.
์น ๋ฌธ์๋ ๋ด๊ฐ ๋ง๋ ์ํ์ด๋ ๋ค๋ฆ ์๋๋ฐ, ๊ทธ๊ฒ์ ์ถํ ๋ชจ์ต์ผ๋ก ๋จ๊ธฐ๊ธฐ๋ ์ซ๋ค. ํ์ด์ง๋ฅผ ์ฅ์ํด์ฃผ๋ CSS์ ๋ํด ์์๋ณด์.
์ ํ์
HTML์ ๋ค์ํ ์์๊ฐ ๊ด๊ณ๋ฅผ ๋งบ๋ ํํ๋ก ๊ตฌ์ฑ๋๋ค. ๊ทธ๋ ๋ค๋ฉด ์์๋ฅผ ๊พธ๋ฉฐ์ฃผ๊ณ ์ถ์๋ฐ ํด๋น ์์๋ฅผ ์ด๋ป๊ฒ ๋ธ๋ผ์ฐ์ ์ ์๋ ค์ค์ผ ํ ๊น? ์ด๋ ์ฌ์ฉ๋๋ ๊ฒ ์ ํ์๋ค.
์์์ class๋ id ๋ฑ ์์ฑ์ ๋ถ์ฌํ๊ฑฐ๋ ์์์ ๊ด๊ณ, ๋๋ ์์ ๊ทธ ์์ฒด๋ฅผ ์ ํํด ๋ธ๋ผ์ฐ์ ์๊ฒ ์๋ ค์ฃผ๋ ์ ํ์๋ CSS์์ ๋นผ๋์ ์ ์๋ ์ค์ํ ๋๊ตฌ์ด๋ค.
*, tag, class, id
*๋ ์ ์ฒด ์ ํ์๋ค. ๋ชจ๋ ์์๋ฅผ ์ ํํ๋ ๋งํผ ๋ฒ์ฉ์ ์ธ ์์ฑ์ ์ค ๋ ์ ์ฉํ๋ค. tag(tagname), class(.)๋ ๊ฐ์ tag, class๋ฅผ ๊ฐ์ง ์์๋ค์ ๋ชจ๋ ์ ํํ๊ณ , id(#)๋ ๋จ ํ๋์ ์์๋ฅผ ์ ํํ๋ค.(id๋ ์ค๋ณต ๋ถ์ฌ๊ฐ ๋ถ๊ฐ๋ฅํ๊ธฐ ๋๋ฌธ)
* {
margin: 0;
}
div {
color: gray;
}
.container {
background-color: black;
}
#box {
color: blue;
}
๋ณตํฉ ์ ํ์
div.container {
background-color: yellow;
}
๋ค์ ๊ตฌ๋ฌธ์ ๋ณตํฉ ์ ํ์๋ค. div ํ๊ทธ ์ค container class๋ฅผ ๊ฐ์ง๋ ์์๋ฅผ ์ ํํ๋ค.
.containerdiv {
background-color: gray;
}
๋ค์๊ณผ ๊ฐ์ ๊ตฌ๋ฌธ์ CSS ํ์์์ containerdiv ํด๋์ค๋ก ์ธ์ํ๋ค. ํ๊ทธ ์ ํ์๋ ์์ ๊ธฐํธ๊ฐ ์๊ธฐ ๋๋ฌธ์ ์์ชฝ์ ๋ถ์ด๋ ๊ฒ ์ฌ๋ฐ๋ฅด๋ค.
์์, ํ์
div > span {
color: blue;
}
div span {
color: red;
}
>๋ ์์ ์ ํ์๋ค. ํ ๊ณ์ธต ์๋์ ์๋ ์์๋ค์ ์ ํํ๋ค. ๋ ์ ํ์ ์ฌ์ด์ ๊ณต๋ฐฑ์ ๋ฃ์ผ๋ฉด ๋ค์ ์๋ ์ ํ์๊ฐ ํ์ ์ ํ์๋ก ์์ฉํ๋ฉฐ, ์์๊ณผ ๋ค๋ฅด๊ฒ ๊ณ์ธต ๊ด๊ณ์์ด ํ์ ๋ชจ๋ ์์๋ค์ ์ ํํ๋ค.
ํ์
div + p {
color: red;
}
div ~ p {
color: blue;
}
ํ์ ์ ํ์๋ ์ธ์ ํ ์์๊ฐ์ ๊ด๊ณ๋ฅผ ํตํด ์ ํํด์ค๋ค. +๋ ๋ฐ๋ก ์ธ์ ํ ํ์ ๋ฅผ ์ ํํ๊ณ , ~๋ ๊ฐ์ ๊ณ์ธต์ ์๋ ํ์ ๋ค์ ๋ชจ๋ ์ ํํ๋ค.
๊ฐ์ ํด๋์ค ์ ํ์
๊ฐ์ 'ํด๋์ค' ์ ํ์๋ค. ์์๋ก ๋ช ์ํด๋์ ๊ฒ์ด ์๋๊ณ ํน์ ์ํ์ ๋ฐ๋ผ ์ ํ๋๊ณ , ์ถ์ ํด๋์ค ์ ํ์๋ผ๊ณ ๋ ํ๋ค.
input:hover {
font-size: 1.5rem;
}
div.active {
background-color: yellow;
}
๋ค์๊ณผ ๊ฐ์ด ์ฐ์ด๋ฉฐ ํ์ ์ค ๋ช ๋ฒ์งธ ํ์ ์ธ์ง ๋ฑ๋ ์ ํ ๊ฐ๋ฅํ๋ค. ๋ชจ๋ ์์ฑ์ ์ธ์ฐ๊ธฐ๋ ๋นํจ์จ์ ์ด๋ ๊ทธ๋๊ทธ๋ ํ์ํ ์ ํ์๋ฅผ ์ฐพ์์ ์ฐ์.
๊ฐ์ ์์ ์ ํ์
div::before {
content: "hello "
}
div::after {
content: "World!!"
}
before์ after๋ content ์์ฑ๊ณผ ํจ๊ป ์ฐ์ธ๋ค. ๊ฐ๊ฐ ์, ๋ค๋ก content๋ฅผ ์ถ๊ฐํด์ฃผ๋ฉฐ inline ์์ฑ์ ๊ฐ์ง๊ณ ์๋ค. ํญ๋ชฉ ์ฌ์ด์ ๊ตฌ๋ถ์ ์ ๋ฃ๋๋ฐ ์ ์ฉํ๋ค.
::first-line, ::first-letter ๋ฑ๋ ์์.
์์ฑ ์ ํ์
input[disabled] {
color: gray;
}
input[type="text] {
font-size: 1.5rem;
}
div[data-type="goods"] {
color: white;
}
ํน์ ์์์ ์์ฑ์ ๋ฐ๋ผ ์คํ์ผ์ ์ค ์ ์๋ค. ์ด ์ญ์ ๋ค์ํ ์์ฑ์ด ์๋ ๋งํผ ์ ์ฌ์ ์์ ์์ฑ๋ค์ ์ดํผ๋ฉฐ ์จ์ผ ํ๋ค.
์ ํ์ ์ฐ์ ์์
๊ฐ๊ฐ์ ์ ํ์๋ค์ ์ฐ์ ์์๋ฅผ ๊ฐ์ง๊ณ ์๊ณ , ๋ง์ฝ ์ฐ์ ์์ ๊ฐ์ ์ ํ์๋ผ๋ฉด ๋์ค์ ์ ์ธํ ์คํ์ผ์ด ์ ์ฉ๋๋ค.
div {
background-color: red !important;
}
!important ๊ท์น์ ๊ฐ์ฅ ๋์ ์ฐ์ ์์๋ฅผ ๊ฐ๋๋ค. ๋ชจ๋ ์คํ์ผ ์ ์ธ ์ค ์์ธ์ ์ผ๋ก ๋์ ๋ช ์๋๋ฅผ ์ค์ ํ๋ค.
ํ์ง๋ง !important์ ์ฌ์ฉ์ ์์ ํ๋ ํธ์ด ์ข์๋ฐ, ๊ฑฐ๋ํ CSS ํ์ผ์์๋ ๋ค๋ฅธ ๊ฐ์ ๋ฎ์ด์์ฐ๋ ์ํ์ง ์๋ ๊ฒฐ๊ณผ๋ฅผ ๋ถ๋ฌ์ฌ ์ ์๊ธฐ ๋๋ฌธ์ด๋ค.
important -> inline -> id -> class -> tag -> * ์์ผ๋ก ์ฐ์ ์์๊ฐ ๋ฎ์์ง๋ค.
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(๐ท CSS(0) ์์ ์ ํํ๊ธฐ), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@ja960508/CSS0-์์-์ ํํ๊ธฐ์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค