๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

Media1

โœˆcss3 :not ์„ ํƒ์ž css3๋ฅผ ์“ฐ๋ฉด css2์— ๋น„ํ•ด์„œ ํผ๋ธ”๋ฆฌ์…”๊ฐ€ ์›ํ•˜๋Š” ๊ฒฐ๊ณผ๋ฅผ ์–ป๊ธฐ๊ฐ€ ๊ต‰์žฅํžˆ ์ˆ˜์›”ํ•˜๋‹ค. ์˜ˆ์ „ ๊ฐ™์œผ๋ฉด ์Šคํฌ๋ฆฝํŠธ์˜ ๋„์›€์„ ๋ฐ›์•˜์–ด์•ผ ํ•  ์ผ์„ css๋งŒ์œผ๋กœ ์ฒ˜๋ฆฌ๊ฐ€ ๊ฐ€๋Šฅํ•ด์กŒ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. display:flex, nth-child(), calc()์™€ ๋”๋ถˆ์–ด :not ์„ ํƒ์ž๋Š” ์ •๋ง ์ถ•๋ณต์ด๋‹ค. ์‚ฌ์šฉ๋ฐฉ๋ฒ•์€ ๊ฐ„๋‹จํ•˜๋‹ค. :not(.foo) {color:blue} ์™€ ๊ฐ™์ด ์‚ฌ์šฉํ•˜๋ฉด .foo ํด๋ž˜์Šค๊ฐ€ ์•„๋‹Œ ๋‹ค๋ฅธ ์—˜๋ ˆ๋จผํŠธ๋Š” ๋ชจ๋‘ ํ…์ŠคํŠธ ์ปฌ๋Ÿฌ ์ƒ‰์„ ํŒŒ๋ž€์ƒ‰์œผ๋กœ ๋ฐ”๊พธ๋ž€ ๋œป์ด๋‹ค. ์ข€ ๋” ์„ธ๋ถ„ํ™” ํ•  ์ˆ˜๋„ ์žˆ๋‹ค. div:not(.foo) { color:blue} div์ค‘์—์„œ fooํด๋ž˜์Šค๊ฐ€ ์—†๋Š” div๋Š” ํ…์ŠคํŠธ ์ปฌ๋Ÿฌ๋ฅผ ํŒŒ๋ž€์ƒ‰์œผ๋กœ ํ•˜๋ผ๋Š” ๋œป์ด๋‹ค. Elements๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ํด๋ž˜์Šค, ID๋ฅผ ๋Œ€์ƒ์œผ๋กœ๋„ ์„ ์–ธํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์€ ๋‹น์—ฐํ•˜๋‹ค. .chartAr.. 2019. 8. 30.