728x90
๋ฐ˜์‘ํ˜•

2025/07/03 1

[CSS] pointer-events

pointer-events๋Š” CSS ์†์„ฑ ์ค‘ ํ•˜๋‚˜๋กœ, ๋งˆ์šฐ์Šค ํด๋ฆญ์ด๋‚˜ ํ„ฐ์น˜ ๊ฐ™์€ "ํฌ์ธํ„ฐ ์ด๋ฒคํŠธ"๋ฅผ ํ•ด๋‹น ์š”์†Œ์— ์ „๋‹ฌํ• ์ง€ ์—ฌ๋ถ€๋ฅผ ๊ฒฐ์ •ํ•ฉ๋‹ˆ๋‹ค.๐Ÿ” ์‰ฝ๊ฒŒ ๋งํ•ด:pointer-events: none;์„ ์ฃผ๋ฉด,ํ•ด๋‹น ์š”์†Œ๋Š” ํด๋ฆญ๋˜์ง€ ์•Š์œผ๋ฉฐ, hover, active ๋“ฑ๋„ ๋ฌด์‹œ๋ฉ๋‹ˆ๋‹ค.๐Ÿงช ์˜ˆ์‹œํด๋ฆญ ์•ˆ ๋จํด๋ฆญ ๋จ none → ํด๋ฆญํ•ด๋„ ์•„๋ฌด ์ผ๋„ ์•ˆ ์ƒ๊น€auto → ๊ธฐ๋ณธ ๋™์ž‘ (ํด๋ฆญ ๊ฐ€๋Šฅ) ์ด ๋ฒ„ํŠผ๋„ ํด๋ฆญ ์•ˆ๋จ ๋ถ€๋ชจ์ธ ์— pointer-events: none์„ ์ค˜๋„, ์ž์‹์ธ ๋ฒ„ํŠผ๋„ ํด๋ฆญ ์•ˆ ๋ฉ๋‹ˆ๋‹ค. ๊ฐ’์„ค๋ช…auto๊ธฐ๋ณธ๊ฐ’, ํฌ์ธํ„ฐ ์ด๋ฒคํŠธ ์ •์ƒ ์ฒ˜๋ฆฌnoneํฌ์ธํ„ฐ ์ด๋ฒคํŠธ ๋ฌด์‹œ (ํด๋ฆญ, hover ๋ชจ๋‘ ๋ฌด์‹œ)inherit๋ถ€๋ชจ ์š”์†Œ์˜ ๊ฐ’์„ ์ƒ์†

Front/CSS 2025.07.03
728x90
๋ฐ˜์‘ํ˜•