๋ชฉ๋ก2022/03/11 (4)
whatisthis?
Slide Page - only CSS - without JS - ๐ ์ค์ตํ๋ฉด์ ์๊ฒ๋ ์ ๊ธฐ๋ก ์ฌ์ง๊ป js๋ก ๋ณต์กํ๊ฒ ํ๋ ๋ฐฉ์ ๋์ , js๋ฅผ ํ๋๋ ์์ฐ๊ณ ์ค๋ก์ง css์ :checked ์ ํ์ ๋ง์ผ๋ก ์ฌ๋ผ์ด๋๋ฅผ ๊ตฌํํ ์ ์๋ค๊ณ ํ๋ค. ๐ :checked - CSS ๊ฐ์ํด๋์ค - ์ ํํ๊ฑฐ๋ on ์ํ์ธ radio, checkbox, option์์๋ฅผ ๋ํ๋ __ ๐ CSS sibling element ๊ด๋ จ ๊ฒฐํฉ์ ~ : ์ดํ ํ์ ์์ ๋ค๊ฐ์ด~ ์ ํํ๋ ๋๋. + : ๋ฐ๋ก ๋ค์์ ์์นํ๋ ํ์ ์์๋ง ์ ํ. >> ๋ฐ๋ก ๋ค์ ํ์ ๋ง ํ์ํ๋ฉด + / ๊ทธ ์ธ๊ฐ ํ์ํ๋ฉด ~ ์ฐ๊ธฐ. p ~ span { color: red; }โ ์ด๊ฑด ๋นจ๊ฐ์ด ์๋๋๋ค. ์ฌ๊ธฐ ๋ฌธ๋จ์ด ์์ต๋๋ค. ๊ทธ๋ฆฌ๊ณ ์ฝ๋๋ ์์ต๋๋ค. ์ด์ ๋นจ๊ฐ์ ..
์ฌ๋ผ์ด๋ ํ์ด์ง (2) ํฐ์นํ(๋๋๊ทธ) - ๐ ์ค์ตํ๋ฉด์ ์๊ฒ๋ ์ ๊ธฐ๋ก ๐touch ์ด๋ฒคํธ changedTouches The TouchEvent.changedTouches property is a TouchList object that contains one Touch object for each touch point which contributed to the event. >> ์ฆ, touchList ๊ฐ์ฒด์ด๋ฏ๋ก ์ฒซ๋ฒ์งธ ์์ดํ ์ธ [0]์ ๊ฐ์ ธ์จ๊ฒ. (ํฐ์น๊ฐ ์ฌ๋ฌ๊ตฐ๋ฐ ๋๋ฉด ์ฌ๋ฌ ๊ฐ ์กด์ฌ) +) ๊ทธ ์ธ์๋ TouchEvent.targetTouches TouchEvent.touches ๋ฑ์ ํ๋กํผํฐ๊ฐ ์กด์ฌํจ. ++) ํฐ์น ์ด๋ฒคํธ์๋ (event) touchstart, touchmove, touchend, t..
์ฌ๋ผ์ด๋ ํ์ด์ง (1) ๋ฒํผํ index.html (style ๋ด์ฅ) First Second Third โฌ Left Rightโก app.js // Div ์ฌ์ด์ฆ ๋์ ์กฐ์ const outer = document.querySelector(".outer"); const innerGrp = document.querySelector(".inner-grp"); const inners = document.querySelectorAll(".inner"); let currentIndex = 0; inners.forEach(inner => { inner.style.width = `${outer.clientWidth}px`; console.log(outer.clientWidth); }); innerGrp.style.wid..
Tab Menu - Tab Menu ๋ค์ํ css skill์ ํฐ๋. ๐ ์ค์ตํ๋ฉด์ ์๊ฒ๋ ์ ๊ธฐ๋ก background: -webkit-linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-background-clip๊ณผ color ๐บmdn ๋ฌธ์ ์ฐธ๊ณ (-webkit-text-fill-color ์ color์ ์ฐจ์ด๋?) background-clip - CSS: Cascading Style Sheets | MDN CSS background-clip ์์ฑ์ ์์์ ๋ฐฐ๊ฒฝ์ด ํ ๋๋ฆฌ, ์์ชฝ ์ฌ๋ฐฑ, ์ฝํ ์ธ ์์ ์ค ์ด๋๊น์ง ์ฐจ์งํ ์ง ์ง์ ํฉ๋..