๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๋ฐ˜์‘ํ˜•

ํ…œํ”Œ๋ฆฟ ์ ์šฉ ํ•˜๋Š” ๋ฒ•1

[CSS] ์˜์‚ฌํด๋ž˜์Šค&์›นํฐํŠธ&ํ…œํ”Œ๋ฆฟ์ ์šฉ ์˜์‚ฌํด๋ž˜์Šค์— ๋Œ€ํ•œ ๋‚ด์šฉ์ •๋ฆฌ์™€ ์›นํฐํŠธ, ํ…œํ”Œ๋ฆฟ ์ ์šฉ์— ๋Œ€ํ•œ ๋‚ด์šฉ์„ ๋‹ค๋ฃจ์—ˆ๋‹ค. 1. ์˜์‚ฌํด๋ž˜์Šค : ์„ ํƒํ•˜๊ณ ์ž ํ•˜๋Š” HTML ์š”์†Œ์˜ ํŠน๋ณ„ํ•œ '์ƒํƒœ(state)'๋ฅผ ๋ช…์‹œํ•  ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค. 1) ๊ฐ€์ƒํด๋ž˜์Šค ์„ ํƒ์ž(๋™์ ์˜์‚ฌ ํด๋ž˜์Šค) : ๋งํฌ๊ฐ€ ๊ฑธ๋ฆฌ๋Š” ํƒœ๊ทธ์˜ ์Šคํƒ€์ผ ๋ถ€์—ฌ์— ๋งŽ์ด ์‚ฌ์šฉํ•œ๋‹ค. ์ผ๋ฐ˜์ ์œผ๋กœ ํƒœ๊ทธ๋Š” ๋””ํดํŠธ๊ฐ€ ์ •ํ•ด์ ธ์žˆ์œผ๋‚˜, ์•„๋ž˜์™€ ๊ฐ™์ด ์„ธ๋ถ€์„ค์ •์„ ํ†ตํ•ด ๋””์ž์ธ์„ ์ ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. a:link {color: orange;} a:visited {color: gray;} a:hover {color: blue;} a:active {color: red;} 2) ๊ฐ€์ƒ์š”์†Œ ์„ ํƒ์ž : ๊ธฐ์กด์— ์žˆ๋Š” ์š”์†Œ์˜ ์ „ํ›„๋‚˜, ์š”์†Œ๋“ค์˜ ์ˆœ์„œ ๋“ฑ์„ ์„ ํƒํ• ๋•Œ ๋ณดํ†ต ๋งŽ์ด ์‚ฌ์šฉ๋˜๋Š” ์„ ํƒ์ž์ด๋‹ค. ์›๋ž˜ ์š”์†Œ์— ์ง์ ‘ ํด๋ž˜์Šค๋ฅผ ๋ถ€์—ฌํ•ด์„œ ์ง์ ‘ ๊ด€์—ฌํ•  ์ˆ˜ ์žˆ์œผ.. 2022. 2. 9.
๋ฐ˜์‘ํ˜•

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”