3D๋ฆฌํ๋ฆฟ ๋ง๋ค๊ธฐ - ์ธํฐ๋ํฐ๋ธ ์น ํ๋ก์ ํธ
์ธํฐ๋ํฐ๋ธ ์น ํ๋ก์ ํธ๋, CSS์ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ด์ฉํด ์ฐฝ์์ ์ธ ์ธํฐ๋์ ์ด ์๋ ์์ ๋ฅผ ํ๋์ฉ ๋ง๋ค์ด๋ณด๋ ์๋ฆฌ์ฆ์ ๋๋ค.
์๊ฐ์ 756๋ช
๋์ด๋ ์ค๊ธ์ด์
์๊ฐ๊ธฐํ ๋ฌด์ ํ

- ๋ฏธํด๊ฒฐ
transform-style: preserve-3d; ๋ฅผ ์ถ๊ฐํ๋ฉด
.page:nth-child(2) ์ .back-btn ๋ฒํผ์ด ๋๋ฆฌ์ง ์์, ์๋ณธ ์ฝ๋๋ฅผ ๋ณด๋ .page-face ์ transform-style: preserve-3d; ๊ฐ ์ถ๊ฐ ๋์ด ์์ด์ ์ ์ฉํ์ต๋๋ค. ๊ทธ๋ฐ๋ฐ,
HTML/CSSjavascript์ธํฐ๋ํฐ๋ธ-์น๋๋
ใป
4๋ฌ ์
0
38
1
- ๋ฏธํด๊ฒฐ
Babel์ ์ฌ์ฉ๋ฒ ์๋ ๋งํฌ์ ์์์ด ๋น๊ณต๊ฐ ๋์์์ด๋ผ๊ณ ๋น๋๋ค.
๋น๊ณต๊ฐ ์์์ธ๋ฐ, ์ด๋ป๊ฒ ์์์ ๋ณผ ์ ์๋์?
HTML/CSSjavascript์ธํฐ๋ํฐ๋ธ-์น14212424
ใป
0
96
1
- ๋ฏธํด๊ฒฐ
ํ์ด์ง ํด๋์ค๋ฆฌ์คํธ ์ ๊ฑฐ ํด์คฌ์๋
(() => { const leaflet = document.querySelector('.leaflet'); const pagesElem = document.querySelector('.pa
HTML/CSSjavascript์ธํฐ๋ํฐ๋ธ-์นsamkookji12
ใป
0
81
0
- ๋ฏธํด๊ฒฐ
ํ์ด์ง๋ฅผ ํด๋ฆญํ ๋ Uncaught TypeError: Cannot read properties of undefined (reading 'contains') ์๋ฌ๊ฐ ๋น๋๋ค.
<img src="https://cdn.inflearn.com/public/fil
HTML/CSSjavascript์ธํฐ๋ํฐ๋ธ-์นJay
ใป
0
1,011
1
- ๋ฏธํด๊ฒฐ
์ง๋ฌธ ์์ต๋๋คใ .ใ ..
์ง๊ธ 1, 3๋ฒ์ back-btn์ด ์ ๋๋ก ํฌ์ปค์ค๊ฐ ๋๋๋ฐ 2๋ฒ๋ง ๊ณ์ page-face๊ฐ ์กํ์..์ด๋ค ์ด์ ๋๋ฌธ์ผ๊น์8ใ 8
HTML/CSSjavascript์ธํฐ๋ํฐ๋ธ-์นhong00412
ใป
0
401
1
- ๋ฏธํด๊ฒฐ
ํด๋ฆญ ์ ์๊พธ page element๋ง ์ธ์๋ฉ๋๋ค.
์ ํ๋ฉด์์ BackBtn์ด ์ธ์์ด ๋์ง ์๊ณ Page el
HTML/CSS์ธํฐ๋ํฐ๋ธ-์นjavascriptMinJeong Kim
ใป
0
225
1
- ๋ฏธํด๊ฒฐ
๊ฐ์ด๋ฐ ํ์ด์ง๋ง ์ค์ธ์ด ๋ฉ๋๋ค
์ ์ ํ์ด์ง์ ์์๋ค์ ํด๋ฆญํด๋ ์ค์ธ์ด ์๋๊ณ , ๊ฐ์ด๋ฐ ํ์ด์ง์ ์์๋ง ์ค์ธ์ด ๋ฉ๋๋ค. ์ ๊ทธ๋ฐ์ง ๋ชจ๋ฅด๊ฒ ์ด์... ์ฌ๋ ค์ฃผ์ ์์ค์ฝ๋์์ ๊ทธ๋๋ก ํด๋ ์ ์์ ์ค์ธ์ด ๋์ง ์์ต๋๋ค. ํ์ด์ดํญ์ค์์๋ ์๋ํ๋๋ฐ ์ด๋ฏธ์ง๊ฐ ํ์๋์ง ์์ต๋๋ค <pre class=
์ง๋ฌธjavascriptHTML/CSS์ธํฐ๋ํฐ๋ธ-์นHZ
ใป
0
253
1
- ๋ฏธํด๊ฒฐ
body์ perspective๋ฅผ ์ฃผ๋ฉด ๊ฐ์๊ธฐ html๊ณผ body ๋์ด๊ฐ 0์ด ๋ฉ๋๋ค
body์ perspective๋ฅผ ์ฃผ๋ฉด html, body๊ฐ ๋์ด๊ฐ 0์ด ๋์ด์ ์ผ๋จ body์ 100vh ์ฃผ๊ธด ํ๋๋ฐ.. ์ ๊ฐ์์๋ ๋ค๋ฅด๊ฒ ์ ์ฉ๋๋ ๊ฑธ๊น์?
javascript์ธํฐ๋ํฐ๋ธ-์นHTML/CSS๋ฏผ์ฒฉํ ๋ฌธ์ด
ใป
0
393
1
- ๋ฏธํด๊ฒฐ
์ค์ธ ์ํ์ผ ๋
์ค์ธ ์ํ์ผ ๋, current-menu ํด๋์ค๊ฐ ์ถ๊ฐ๋ menu-item ์ธ์ ๋ค๋ฅธ menu-item์ ๋๋ฅด๋ฉด leaflet ์ ์์น๊ฐ ๋ฐ๋๋ฉด์ ํ์ด ํ์ด์ง๋ ์ด์๊ฐ ์๊ฒผ์ต๋๋ค. current-menu ํด๋์ค๊ฐ ๋ฉ๋ด ์ค 1๊ฐ๋ผ๋ ์ถ๊ฐ๊ฐ
javascriptHTML/CSS์ธํฐ๋ํฐ๋ธ-์น์ด์ํ
ใป
0
258
1
- ๋ฏธํด๊ฒฐ
์ด๋ฒคํธ ์์ ๋ฐฉ์ ์ง๋ฌธ
์ด๋ฒคํธ ์์ ๋ฐฉ์์ผ๋ก ํ๊ฒ๋๋ฉด ํ์ฌ 2F๋ฅผ ๊ฐ์ธ๋ page ์๋ page-flipped ํด๋์ค๊ฐ ์ถ๊ฐ๊ฐ ๋ฉ๋๋ค. 2F๋ฅผ ๊ฐ์ธ๋ page ์๋ page-flipped ํด๋์ค๊ฐ ์ถ๊ฐ๊ฐ ๋์ง ์๊ฒ ํ๋ ค๋ฉด data- ์์ฑ์ ์ด์ฉํด ์ ์ฉ
HTML/CSSjavascript์ธํฐ๋ํฐ๋ธ-์น์ด์ํ
ใป
0
219
1
- ๋ฏธํด๊ฒฐ
์ด์ฌ๋ ๋๊ตฐ์ง ์์ธ์..?
๋๊ตฌ์ง.... ์ ๋ฌผ์ด ๋ณด์ง.... :0 ๋ชฐ๋ผ์ ๊ตฌ๊ธ๋ง ํด ๋ณด์์ด์. <img src="https://cdn.inflearn.com/public/files/posts/3598ce1d-8207-405d-bc6a-db3e73cd09e0/who
์ธํฐ๋ํฐ๋ธ-์นjavascriptHTML/CSSDongwoo Ha
ใป
3
409
1
- ๋ฏธํด๊ฒฐ
์ ์๋ ์ง๋ฌธ์์ต๋๋ค ์ด ๊ฐ์๋ฅผ ๋ฆฌ์กํธํ๊ฒฝ์์ ์ ์ฉํ๊ณ ์ถ์๋ฐ์,
๊ทธ๋ด๊ฒฝ์ฐ useEffect ์์์ ํจ์ ์ฒ๋ฆฌ๋ฅผ ํด์ค์ผํ ๊น์? ์๋ฅผ๋ค์ด ์ด๋ฐ์์ผ๋ก? <div style="color: #d4d4d4; background-color: #1e1e1e; font-family: Consolas, 'Courier Ne
HTML/CSSjavascript์ธํฐ๋ํฐ๋ธ-์น๋ฐ๊ฐ์ฐ๋ฉด๋ฐ๊ฐ๋ค๊ณ ํด
ใป
0
276
1
- ๋ฏธํด๊ฒฐ
์ง๋ฌธ์์ต๋๋ค.
forwards ๋ฅผ ์์ฑ์ํด์ค๋ ์ ๋๋ฉ์ด์ ์ด ์ ๋๋ก ๋์ํ๋๋ฐ์. ์ด๋ค ํ์ ๋๋ฌธ์ ์ ์ฉ์ ํ์ ๊ฒ์ธ์ง ๊ถ๊ธํฉ๋๋ค! ๊ทธ๋ฆฌ๊ณ menu-item์ ํด๋ฆญํํ ์ค์ธ์ด ๋์์๋ ๋ค๋ฅธ๊ณณ์ ํด๋ฆญํ๋ฉด ๋ ์ด์์(?)์ด ๋ค๋ฅธ๋ฐ๋ก ์ด๋๋๋ํ์์ด์๋๋ฐ์ ์ด๋ฐ๊ฒฝ์ฐ
์ธํฐ๋ํฐ๋ธ-์นjavascriptHTML/CSS๋ฐ๊ฐ์ฐ๋ฉด๋ฐ๊ฐ๋ค๊ณ ํด
ใป
0
199
1
- ๋ฏธํด๊ฒฐ
์ ์๋ ์ง๋ฌธ์์ต๋๋ค. ใ
๋ฐฑํ์ด์ค ํ๋ ์ค๋ ๊ฐ๋๋ฅผ ๋๋ฆฌ๋ฉด ๊ทธ ๋ท๋ฉด์ด๋ณด์ด๋๊ฑด๊ฐ์? ๋ฐฑํ์ด์ค ์์ฒด๊ฐ ๋ท๋ฉด๋ง ์๋ณด์ด๊ฒ ํ๋์์ฑ์ธ๊ฐ์ ใ ? ๋ฐฑํ์ด์ค๋ฅผ ์์ฃผ๊ณ preserve-3d๋ง ์ฃผ์ด๋ ๋์ ๋ณด์ด๊ธฐ์๋ ๋๊ฐ์ ๋ณด์ด๋๋ฐ ๋ฐ๋ก ๊ผญ์ค์ผ ๋๋ ์์ฑ์ธ๊ฐ์ ใ ?
HTML/CSS์ธํฐ๋ํฐ๋ธ-์นjavascript๊น๋
ใป
0
262
1
- ๋ฏธํด๊ฒฐ
์ค์ธ์ด ์ ์๋๋์ง๋ฅผ ๋ชจ๋ฅด๊ฒ ์ด์..
(() => { const leaflet = document.querySelector(".leaflet"); const pageElems = document.querySelecto
HTML/CSSjavascript์ธํฐ๋ํฐ๋ธ-์นkha2858
ใป
1
260
1
- ๋ฏธํด๊ฒฐ
์ง๋ฌธ์ด ์์ด์
๊ฐ ํ์ด์ง๋ง๋ค transform-style: preserve-3d๋ก ์ค์ ํด์ฃผ๋ฉด .page-face์ backface-visibility : hidden์ด ์์ด๋ ์, ๋ท๋ฉด ํ์ธ์ด ์ ๋๋๊น backface-visibility : hidde
HTML/CSS์ธํฐ๋ํฐ๋ธ-์นjavascript๊น ์ฝ๋ฉ์ ๊น์ฑก์จ
ใป
1
240
1
- ๋ฏธํด๊ฒฐ
์ง๋ฌธ ์์ต๋๋ค.
body์ perspective๋ฅผ ์ฃผ์๊ณ leaflet์ preserve-3d๋ฅผ ์์ง ํด์ฃผ์ง ์์๋๋ฐ ์ด๋ป๊ฒ page๋ rotateY์ 3d ํจ๊ณผ๊ฐ ์ ์ฉ๋๊ฑด๊ฐ์?? body์ perspectiveํจ๊ณผ๊ฐ htmlํ๊ทธ ๋จ๊ณ๋ฅผ ๊ฑฐ์น๋ฉด ์ ์ฉ์ด ์๋๋ค๊ณ ํ์ จ๋
javascript์ธํฐ๋ํฐ๋ธ-์นHTML/CSS์ ์ฐ์ง
ใป
0
362
2
- ๋ฏธํด๊ฒฐ
์ ์๋ ์ง๋ฌธ ์์ต๋๋ค!
์๋ ํ์ธ์ ๊ถ๊ธํ์ ์ด ์์ด์ ์ง๋ฌธ ๋๋ฆฝ๋๋ค ใ .. ์ ๊ฐ ์ง๊ธ๊น์ง ์ ์๋ ๊ฐ์๋ฅผ ๋ด์์์์๋, ํญ์ ๋ถ๋ชจ ํ๊ทธ์ position: relative ๋ฅผ ์ ์ฉ ํด ์ฃผ์ ๋ค์, ์์ ํ๊ทธ์ position:absolute๋ฅผ ์จ์ฃผ์ ๊ฑธ๋ก ์๊ณ ์์ต๋๋ค.
์ธํฐ๋ํฐ๋ธ-์นjavascriptHTML/CSS๊ฐ๋ฐ์
ใป
1
254
2
- ๋ฏธํด๊ฒฐ
์ค ํ๋ฉด ํฌ๊ธฐ ์ค์ฟ์๋ ๊ธ์๋ค ์์ ธ๋์ค๋๊ฑฐ๋ ์ด๋ป๊ฒ ํด๊ฒฐํ์ฃ ?
<img src="https://cdn.inflearn.com/public/files/posts/94a31273-9563-4e88-9dd7-32b97cd3b3ca/์ฃผ์ 2020-05-27 161619.png" title="์ฃผ์ 2020-05-27 161619.pn
javascriptHTML/CSS์ธํฐ๋ํฐ๋ธ-์น์ก์งํ
ใป
0
381
2
- ๋ฏธํด๊ฒฐ
์์ค์ฝ๋ ์์ถ์ด ํ๋ฆฌ์ง ์์ต๋๋ค.
๋ฐ๋์ง์ผ๋ก ํ์๋๋ฐ ํ์ผ ์์ถ์ด ํ๋ฆฌ์ง ์์ ์์ค์ฝ๋๋ฅผ ๋ณผ์๊ฐ ์์ต๋๋ค. ํน์ ํ์ผ์ ๋ฉ์ผ๋ก ๋ฐ์์ ์๋์ง ์ฌ์ญค๋ด ๋๋ค. damanegi1979@naver.com ์ ๋๋ค. ์๊ณ ํ์ธ์~
javascriptHTML/CSS์ธํฐ๋ํฐ๋ธ-์น์กฐ์ฌ์
ใป
0
320
4






