๐ŸŒท CSS(0) ์š”์†Œ ์„ ํƒํ•˜๊ธฐ

2840 ๋‹จ์–ด CSSCSS

๋ณด๊ธฐ ์ข‹์€ ๋–ก์ด ๋จน๊ธฐ๋„ ์ข‹๋‹ค.

์•„๋ฆ„๋‹ค์›€์— ๋Œ€ํ•œ ์„ ๋ง์€ ์ธ๊ฐ„์ด ๋ณธ๋Šฅ์ ์œผ๋กœ ์ง€๋‹ˆ๊ณ  ์žˆ๋Š” ์†์„ฑ์ด๊ณ  ๊ทธ๊ฒƒ์€ ์›น ๋ฌธ์„œ์—๋„ ๋งˆ์ฐฌ๊ฐ€์ง€์ด๋‹ค.

์•„๋ฌด๋ฆฌ ์ •๋ณด๋ฅผ ๋‹ด๋Š” ๋ฌธ์„œ๋ผ๊ณ  ํ•˜์ง€๋งŒ ์ง€์ €๋ถ„ํ•˜๊ณ  ๋‚œ์žกํ•˜๊ฒŒ ์“ฐ์—ฌ์ ธ ์žˆ๋‹ค๋ฉด ์ฐธ ๋ณด๊ธฐ ์‹ซ์„ ๊ฒƒ ๊ฐ™๋‹ค.

์›น ๋ฌธ์„œ๋„ ๋‚ด๊ฐ€ ๋งŒ๋“  ์ž‘ํ’ˆ์ด๋‚˜ ๋‹ค๋ฆ„ ์—†๋Š”๋ฐ, ๊ทธ๊ฒƒ์„ ์ถ”ํ•œ ๋ชจ์Šต์œผ๋กœ ๋‚จ๊ธฐ๊ธฐ๋Š” ์‹ซ๋‹ค. ํŽ˜์ด์ง€๋ฅผ ์žฅ์‹ํ•ด์ฃผ๋Š” 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 -> * ์ˆœ์œผ๋กœ ์šฐ์„ ์ˆœ์œ„๊ฐ€ ๋‚ฎ์•„์ง„๋‹ค.

์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ