์ธํฐ๋ํฐ๋ธ ์น ๊ฐ๋ฐ ์ ๋๋ก ์์ํ๊ธฐ
ํฌ๋ฆฌ์์ดํฐ๋ธ ๋์น๋ ์ธํฐ๋ํฐ๋ธ ์นํ์ด์ง๋ฅผ ๊ฐ๋ฐํ ์ ์๋ ๊ธฐ๋ณธ๊ธฐ๋ฅผ ๋ค์ง ์ ์๋ ์์ ์ ๋๋ค.
์๊ฐ์ 3,537๋ช
๋์ด๋ ์ด๊ธ
์๊ฐ๊ธฐํ ๋ฌด์ ํ
- ๋ฏธํด๊ฒฐ
์ผ์ชฝ/์ค๋ฅธ์ชฝ ๋์์ ๋๋ ์ด ๋ฌธ์
์์ค๋ฅผ ๊ทธ๋๋ก ์ฌ์ฉํ๋๊ฒ์ด ์๋๊ณ ํ๋จ๊ณ, ํ๋จ๊ณ ๋ง๋ค์ด๊ฐ๋ฉด์ ํ๊ณ ์๋๋ฐ์.ํ, ๋ค๋ฆฌ, ๋ชธํต, ๋จธ๋ฆฌ ์์ค ๋ถ๋ถ๋ถ๋ถ์ฉ ์ง๋๋๊ฐ๋๋ง๋ค ๋ณต๋ถํ๋ฉด์ ์งํํ๊ณ ์์ต๋๋ค. ๋ค ์ ์งํ๋๋๋ฐ, ํค๋ณด๋ ์ผ์ชฝ/์ค๋ฅธ์ชฝ ์ด๋์, ์ ์ด
HTML/CSSjavascript์ธํฐ๋ํฐ๋ธ-์น....
ใป
์ผ ๋ ์
0
77
1
- ํด๊ฒฐ
๋ณ์ ๋ฒ์ ๊ด๋ จ ์ง๋ฌธ
let currentItem; function activate(elem){ // ํ์ฑํ : ๋ฌธ์ด๊ธฐ elem.classList.add('door-open'); currentItem = elem
HTML/CSSjavascript์ธํฐ๋ํฐ๋ธ-์นRooRoo
ใป
0
93
1
- ๋ฏธํด๊ฒฐ
perspective ๋ฌธ์
perspective : 800px์ .stage์ ๋ฃ์ผ๋ฉด, ๋ค๋ฅด๊ฒ ํ์ ์ด ๋์ด์ผ ํ๋๋ฐ์ ๋ .door์ ๋ฃ์ ๊ฒ์ฒ๋ผ ๋๊ฐ์ด ์ผ์ ํ๊ฒ ํ์ ๋ฉ๋๋ค.์ด์ ๋ฅผ ๋ชจ๋ฅด๊ฒ ์ด์~
HTML/CSSjavascript์ธํฐ๋ํฐ๋ธ-์นRooRoo
ใป
0
79
1
- ๋ฏธํด๊ฒฐ
์์ฑ์ ํจ์๋ฅผ ํด๋์ค ํจ์๋ก ๋ณ๊ฒฝ ํ๊ณ this ์ค๋ฅ ๊ด๋ จ
init() { window.addEventListener('scroll', () => { this.scrollRunHandler();
HTML/CSSjavascript์ธํฐ๋ํฐ๋ธ-์นsamkookji12
ใป
0
134
1
- ๋ฏธํด๊ฒฐ
์คํฌ๋กค์ด ์ค๊ฐ ์์น์ ์์ ๋ ์ฐฝ์ ํฌ๊ธฐ๋ฅผ ๋ณํํ๋ฉด ์๊ธฐ๋ ๋ฌธ์
์คํฌ๋กค์ด ์ฒ์๊ณผ ๋์ด ์๋ ์ค๊ฐ ์์น์ ์์ ๋ ์ฐฝ์ ํฌ๊ธฐ๋ฅผ ๋ณํํ๋ฉด ์คํฌ๋กค ๋น์จ์ด ๋ฌ๋ผ์ ธ์ ๊ทธ๋ฐ์ง ํ๋ฉด์ด z์ถ์ ๊ธฐ์ ์ผ๋ก ์๊ฐ์ด๋์ ํฉ๋๋ค. ์ด๊ฒ์ ๋ถ๋๋ฝ๊ฒ ํ๊ธฐ ์ํด์๋ ์ด๋ ํ ๋ฐฉ๋ฒ์ด ์์๊น์?
HTML/CSSjavascript์ธํฐ๋ํฐ๋ธ-์น์ ์ธ์ค
ใป
0
109
1
- ๋ฏธํด๊ฒฐ
animation์ด๋ฒคํธ ์ง๋ฌธ์ด์!
window๋ฅผ ballElem๋ก ๋ณ๊ฒฝํ๋ฉด clickํ์๋ ์๋์ ํ์ง ์๋๋ฐ ์ด์ ๋ฅผ ๋ชจ๋ฅด๊ฒ ์ต๋๋ค..! const ballElem=document.querySelector(
HTML/CSSjavascript์ธํฐ๋ํฐ๋ธ-์นminisnake
ใป
0
60
1
- ๋ฏธํด๊ฒฐ
resize handler์์ ์ง๋ฌธ์ด ์์ต๋๋ค.
๋ณธ ๊ฐ์์์๋ resize ํธ๋ค๋ฌ๋ฅผ ์ฌ์ฉํด์ ๊ตฌ์ฑ์ด ๋์๋๋ฐ,(function () { const houseElem = document.querySelector(".house");
HTML/CSSjavascript์ธํฐ๋ํฐ๋ธ-์น์์ฌ์
ใป
0
105
1
- ๋ฏธํด๊ฒฐ
์นด๋ ๋ค์งํ ๋ F๊ฐ ๋ณด์ธ ์ด์
์๋ ํ์ธ์? ๊ฐ์ ์ ๋ณด๊ณ ์์ต๋๋ค. F, B ์นด๋๊ฐ ์๊ณ ๋ค์ง๋ ๊ฑฐ์์์? F์ z-index๋ฅผ 1์ ์ฃผ์๊ธฐ ๋๋ฌธ์ B๋ณด๋ค ์์ ์์ด์ F->B ์์๋ก ๋ณด์ด๊ตฌ์. ์ฌ๊ธฐ์ ๊ถ๊ธํ ๊ฒ์ ์ค๋ฌผ ์นด๋๋ก ์๊ฐ์ ํด๋ณด์์ ๋, F์นด๋
HTML/CSSjavascript์ธํฐ๋ํฐ๋ธ-์นnewbie
ใป
0
132
1
- ๋ฏธํด๊ฒฐ
3d ๋ค์ง๊ธฐ ์ถ๊ฐํจ๊ณผ
์ง๊ธ ์นด๋๋ฅผ 3d๋ก ๋ค์ง๋๋ฐ ๊ทธ๋ฅ ๋ค์งํ๋๊ฒ์๋๋ผ์นด๋์ ๋ท๋ฉด์ด ๋ฌด์์ธ์ง ์ผ์ชฝ์๋๋ ์ผ์ชฝ๋ฉด๋ถํฐ ์กฐ๊ธ์ฉ ๋ค์ง์ด์ง๋ ๋๋์ผ๋ก ๋ค์ง๊ธฐ ์ํด์ animation3์์ ์ด๋ฏธ์ง๋ฅผ ๋๋ ์ ๋ณด์ฌ์ค๊ฒ์ฒ๋ผ ํจ๊ณผ๋ฅผ ์ค์ผํ ๊น์? ๊ทธ๋ฅ ์นด๋๊ฐ 3d๋ก ํ ๋ค์งํ๋๊ฒ ์๋ ์ฑ ์ฅ๋๊ธธ๋์ฒ
HTML/CSSjavascript์ธํฐ๋ํฐ๋ธ-์นmirage0720
ใป
0
192
1
- ํด๊ฒฐ
์ ์ง! 3D ์คํฌ๋กค 21 ๊ฐ์ ์ง๋ฌธ
์ ์ง! 3D ์คํฌ๋กค 21 ๊ฐ์์์,์คํฌ๋กค์ ๋ด๋ฆฌ๊ฑฐ๋ ์ฌ๋ฆด ๋ css๋ฅผ ์ ์ฉํ๋ ๊ณผ์ ์์ css ์ฝ๋๊ฐ ์ ์ดํด๊ฐ ๊ฐ์ง ์์์ ์ง๋ฌธ ๋๋ฆฝ๋๋ค..character[data-direction=
HTML/CSSjavascript์ธํฐ๋ํฐ๋ธ-์น๊ฐ๋ํฌ
ใป
1
161
1
- ๋ฏธํด๊ฒฐ
eventlistener ์ง๋ฌธ
์ด๋ฒคํธ ๊ฐ์๋ฅผ ๋ฃ๊ณ ๋์ addEventListener๋ฅผ ์ด์ฉํ์ฌ ์ฌ๋ฌ ์ฅ์ ์ฌ์ง์ด ์์ผ๋ฉด ์ฌ๋ผ์ด๋์ฒ๋ผ ํ๋์ฉ ๋๊ฒจ์ ๋ณผ ์ ์๋ ์ด๋ฒคํธ๋ฅผ ๋ง๋ค ์ ์์ ๊ฒ ๊ฐ์ ํผ์ ์ฝ๋๋ฅผ ์ง์ ์ง๋ดค๋๋ฐ์,body ๋ถ๋ถ์ ์๋์ฒ๋ผ ์์ฑํ๊ณ ,<code
HTML/CSSjavascript์ธํฐ๋ํฐ๋ธ-์น๊ฐ๋ํฌ
ใป
0
138
1
- ๋ฏธํด๊ฒฐ
zMove ๋ฅผ 1000์ผ๋ก ์ค์ ํ๋ ์ด์ ์ ๋ํ์ฌ.
์๋ ํ์ธ์ 1๋ถ ์ฝ๋ฉ๋.์์์ 6:10์ zMove ๋ณ์์ ๊ฐ์ ์ค์ ํ ๋ 0 - 1 ์ ๋น์จ์ด ๋๋ฌด ์์ ์ ์ด๊ธฐ ๋๋ฌธ์ * 1000 ์ ํด์ฃผ์ ๋ค๊ณ ํ์ จ๋๋ฐ์.houseElem ์์๊ฐ 0 - 1000vw ๋งํผ ์ด๋ํด์ผ ํ๊ธฐ ๋๋ฌธ์ * 1
HTML/CSSjavascript์ธํฐ๋ํฐ๋ธ-์นKim Teahyoung
ใป
0
157
1
- ๋ฏธํด๊ฒฐ
[์ ๋ณด-23๊ฐ] ES6 class ๋ฌธ๋ฒ์ผ๋ก ๊ณต๋ถํ์๋ ๋ถ๋ค!! ํ์ดํ ํจ์๋ก๋ ์๋ํด๋ณด์ ์!
๊ฐ์์์ ๋์ค๋ prototype ๋ง๊ณ class ๋ฌธ๋ฒ์ผ๋ก ๋ฐ๊ฟ์ ๊ณต๋ถํ์๋ ๋ถ๋ค ์ฐธ๊ณ ํ์ ์! ๐ซถโค ํ์ดํํจ์๋ ?<blockqu
HTML/CSSjavascript์ธํฐ๋ํฐ๋ธ-์นChaeni Lee
ใป
1
180
1
- ๋ฏธํด๊ฒฐ
๋์ ์ผ๋ก html ์์ฑ ํ ์ด๋ฒคํธ ์์ ์ง๋ฌธ ์์ต๋๋ค.
์๋ ํ์ธ์. ์ด๋ฒคํธ ์์ ์ฐ์ตํ๋ค๊ฐ ๋ณ์น์ ์ผ๋ก ์ฐ์ตํ๊ณ ์๋๋ฐ์. ๋์ ์ผ๋ก html ์์ฑ ๋ ํ์ ๋ฒํผ์ ''-active"ํด๋์ค ์ถ๊ฐ ํ๋ฉด ์ค์ ๋ก ํด๋์ค๊ฐ ์ถ๊ฐ๊ฐ ์๋๋ค์. ๊ทธ๋ฐ๋ฐ elem์ consol ์ฐฝ์ ์ฐ์ด๋ณด๋ฉด "-avtive"ํด๋์ค๊ฐ ์ถ๊ฐ๋ ์์๋ก ๋์ค
HTML/CSSjavascript์ธํฐ๋ํฐ๋ธ-์น๊น์ฌํ
ใป
0
239
1
- ๋ฏธํด๊ฒฐ
rotateY()์์ deg์ ๋ฐ๋ฅธ ์ฐจ์ด
์ค๋ฅธ์ชฝ ๋ฒฝ์์ transform์์๋์ ๊ฐ์ด ์ค์ ํ๋ฉด ๋ธ๋ผ์ฐ์ ๋ฅผ ํตํด ๋ณด์ฌ์ง๋ ๊ธธ์ด๊ฐ ๋ค๋ฆ ๋๋ค. ์ด์ ๊ฐ ๋ญ๊น์?transform: rotateY(-90deg) translateZ(400v
HTML/CSSjavascript์ธํฐ๋ํฐ๋ธ-์นddd
ใป
0
181
1
- ๋ฏธํด๊ฒฐ
์ฝ๋ ์์ฑ ์์
์๋ ํ์ธ์ ์ ์๋~ ์์ ์ ๋ฃ๊ตฌ์์ต๋๋ค ใ ใ ใ door-opened ํด๋์ค๋ฅผ addํ๊ณ removeํ๋ ์์๋ก ์๊ฐํ๋๋ฐ ์ฝ๋ ์์ฑ ํ๋ฆ์ด ๊ฑฐ๊พธ๋ก ์ญ์์ผ๋ก ๊ฐ๋ ์ด์ ๊ฐ ์์๊น์...?^^;;;
HTML/CSS์ธํฐ๋ํฐ๋ธ-์นjavascriptHyeyeon Kim
ใป
0
252
1
- ํด๊ฒฐ
์ด๋ฏธ์ง๊ฐ ์๋๋ฐ ์ฒจ๋ถํ์ผ์ ๋ค์ด ๋ฐ๋ ๋ฐฉ๋ฒ์ด ์๋์??
ํด๋น ๊ฐ์๋ฅผ ์งํํ๊ธฐ ์ํด์์คํ๋ผ์ดํธ ์ด๋ฏธ์ง๋ฅผ ๋ค์ด๋ฐ์ผ๋ ค๊ณ ํ๋๋ฐ ์ ๊ณต๋๋ ์ด๋ฏธ์ง๊ฐ ์๋ ๊ฒ ๊ฐ์์์! ๋ฐ๋ก ๋ค์ด ๋ฐ์ ์ ์๋ ๋งํฌ๊ฐ ์๋์??
HTML/CSSjavascript์ธํฐ๋ํฐ๋ธ-์น์์ฌ์
ใป
1
369
1
- ๋ฏธํด๊ฒฐ
'์ด๋ฒคํธ ์์ ๋ณด๊ฐ ์์'์ ์๋ ์์ html์ด ์ ๋ณด์ ๋๋ค
์น์ 5์์ ์ ๊ณต ์ค์ธ ํ์ผ์ ๋ชจ๋ ๋ฐ์ ๋ดค์ต๋๋ค.๊ทธ๋ฐ๋ฐ ์ด๋ฒคํธ ์์ ๋ณด๊ฐ ์์์์ ๋ณด์ด๋ delegation.html์ด ์ ๋ณด์ ๋๋ค..ํน์ ์ ๊ฐ ๋ชป ์ฐพ์๊ฑธ๊น์??
HTML/CSSjavascript์ธํฐ๋ํฐ๋ธ-์นBONGJUN
ใป
0
244
2
- ๋ฏธํด๊ฒฐ
์น์ 5 ์๋ฐ์คํฌ๋ฆฝํธ ์ด๋ฒคํธ ๋ค๋ฃจ๊ธฐ ์ง๋ฌธ
์๋ ํ์ธ์ ์ ์ค๋ชจ ๊ฐ์ฌ๋.'์์ง์ด๋ ์บ๋ฆญํฐ ์์ ๋ก ํด๋ฆญ ์ด๋ฒคํธ ์ตํ๋ณด๊ธฐ'์์ 10๋ถ 30์ด์ฏค "์ ์ญ๋ณ์ ํํผ๋ฅผ ์ํด์"๋ผ๊ณ ๋งํ์ จ๋๋ฐ, ์ด ๋ง์ด ์ด๋ค ๊ฑด์ง ์์ธํ ์ ์ ์์๊น์??
HTML/CSSjavascript์ธํฐ๋ํฐ๋ธ-์นBONGJUN
ใป
1
219
1
- ๋ฏธํด๊ฒฐ
[#์ ์ง! 3D ์คํฌ๋กค 11] mousePos ๊ณต์ ์ง๋ฌธ ์์ต๋๋ค!
๊ฐ์ข์น์ , ์ ์ง! 3D ์คํฌ๋กค 11(5:49) ์์ mousePos ๊ณต์ ์ด๋ป๊ฒ ๋์ค๊ฒ ๋๋์ง๊ถ๊ธํด ๋ฌธ์ ๋๋ฆฝ๋๋ค! mousePos.x = -1 + (e
HTML/CSSjavascript์ธํฐ๋ํฐ๋ธ-์นํ๋ฆฐ์ด
ใป
0
414
2







