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

HTML + CSS ์‹œ๋ฆฌ์ฆˆ๐Ÿ•ธ/CSS1

์ตœ์‹  CSS ๊ธฐ๋Šฅ 5๊ฐ€์ง€! ์ •๋ฆฌ/์š”์•ฝ.txt ์˜ˆ์ „์—๋Š” JS ๋ฅผ ์‚ฌ์šฉํ•ด์•ผ๋งŒ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์—ˆ๋˜ ๊ธฐ๋Šฅ์ธ๋ฐ ์ด์ œ CSS๋งŒ์œผ๋กœ ๊ตฌํ˜„ ๊ฐ€๋Šฅํ•˜๋‹ค. 1. @supports -> ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ํ•ด๋‹น css ๋ฅผ ์ง€์›ํ•˜๋Š”์ง€ ์—ฌ๋ถ€๋ฅผ ์•Œ๋ ค์คŒ ex) ๋ธŒ๋ผ์šฐ์ €๊ฐ€ css grid ๋ฅผ ์ง€์›ํ•˜๋Š”์ง€ ์ฒดํฌ ํ•˜๋Š” ์ฝ”๋“œ! ex) ๋ธŒ๋ผ์šฐ์ €๊ฐ€ css grid ๋ฅผ ์ง€์› ์•ˆ ํ•˜๋Š”์ง€ ์ฒดํฌ ํ•˜๋Š” ์ฝ”๋“œ! 2. CSS Scroll Snap (https://codepen.io/serranoarevalo/pen/xxdYBxZ) -> ์›น์‚ฌ์ดํŠธ ์Šคํฌ๋กค์ด ์–ด๋–ค์ง€ ์ •ํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐ๋Šฅ์ž„. + ์œ„ CSS Scroll Snap ๊ธฐ๋Šฅ์ด css ์—์„œ๋„ ์‚ฌ์šฉ๊ฐ€๋Šฅํ•ด์ง€๋ฉด์„œ ๋‹จ, 2 ์ค„๋งŒ์œผ๋กœ ๊ตฌํ˜„ ๊ฐ€๋Šฅํ•ด์ง. 3. :is Pseudo Selector ์ ์€ ์ฝ”๋“œ ๋งŒ์œผ๋กœ๋„ ์ˆ˜ ๋งŽ์€ ์š”์†Œ๋ฅผ ์„ ํƒํ•  ์ˆ˜ ์žˆ์–ด์ง. 4. Flex Box Gap.. 2021. 8. 24.
728x90
๋ฐ˜์‘ํ˜•

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