์์ธ์์ ์น ๊ฐ๋ฐ์/๋์์ด๋๋ก ์ผํ๊ณ , ์ ์ฃผ๋ฅผ ๊ฑฐ์ณ.. ํ์ฌ๋ ๋ง๋ ์ด์์ ํ๋ญ์์ ์ด์ฌํ ๊ฐ๋ฐ๋ ํ๊ณ , ๊ต์ก ์ฝํ
์ธ ๋ ๋ง๋ค๊ณ , 1์ธ ๊ธฐ์
์ผ๋ก์ ํด๋ณผ ์ ์๋ ์ฌ๋ฌ๊ฐ์ง ์๋์ ์คํ๋ค์ ํด๋ณด๊ณ  ์์ต๋๋ค.
๋น์ฃผ์ผ ์ํฉํธ๊ฐ ์๋ ์ธํฐ๋ํฐ๋ธ ์น์ ๊ด์ฌ์ด ๋ง๊ณ , ์ ํ๋ธ์ ํ์ด์ค๋ถ "1๋ถ์ฝ๋ฉ"์์ ์น ๊ฐ๋ฐ ๊ด๋ จ ๊ธฐ์ ๋ค์ ๊ณต์ ํ๊ณ  ์์ด์.
- ๊ฐ๋ฐ์/๋์์ด๋/์ฝํ ์ธ ํฌ๋ฆฌ์์ดํฐ 
- ์น์ฌ์ดํธ https://studiomeal.com 
- ์ ํ๋ธ https://youtube.com/c/1๋ถ์ฝ๋ฉ 
- ํ์ด์ค๋ถ https://www.facebook.com/1mincoding 
Courses
Reviews
- Getting Started with Interactive Web Development
- BBC Interactive Page "The Future of Offices: How Covid-19 Will Change Its Ways" Clone
- 3D interactive web starting with Three.js
- 3D interactive web starting with Three.js
- Getting Started with Interactive Web Development
Posts
- Q&A - ํญ์ ๊ถ๊ธํ๋๋ฐ ํฌ๋ฆผ์จ ์ปฌ๋ฌ ์ ํํ์ จ์๋ ํ์ฉํ๋ ์ฌ์ดํธ ์ข ์๋ ค์ฃผ์ธ์~ - https://www.crockford.com/colors.html์ด ์ฌ์ดํธ ๋ง์์ด์ ๊ฐ์? :) - 0
- 2
- 45
 
- Q&A - vue๊ฐ์๋์ํ์๋์?! - ์ ๊ฐ์ฌํฉ๋๋ค ใ ใ AI๊ฐ ๋์ค๋ฉด์, ๊ฐ๋ฐ์ด๋ ๊ต์ก์ ๋ํ ๋ฐฉํฅ์ ๋ํด ๋ง์ด ๊ณ ๋ฏผ ์ค์ด๋๋๋ค. ๋ฐฉํฅ์ด ์ ํด์ง๋ฉด ๋ ์ฌ๋ฌ ์ฑ๋์ ํตํด ๋ง์๋๋ฆฌ๋๋ก ํ ๊ฒ์! - 0
- 1
- 48
 
- Q&A - Babel์ ์ฌ์ฉ๋ฒ ์๋ ๋งํฌ์ ์์์ด ๋น๊ณต๊ฐ ๋์์์ด๋ผ๊ณ ๋น๋๋ค. - Babel ์ฌ์ฉ๋ฒ์ ์ด ๊ฐ์ ์ปค๋ฆฌํ๋ผ์ ์์ํ ๋ฐ, ์ด๋ค ์์์ ๋ง์ํ์๋ ๊ฑธ๊น์? - 0
- 1
- 69
 
- Q&A - ์น์์ ์์น?๊ฐ - ๊ตฌ์ฒด์ ์ธ ๋์์ธ์ด๋ ๋์์ ๋ฐ๋ผ ์ฐจ์ด๊ฐ ์๊ฒ ์ง๋ง, ๊ฒ์์ด๋ผ๋ฉด ์ผ๋ฐ์ ์ผ๋ก๋ ์์น๋ฅผ ๊ณ์ฐํด์ position absolute๋ก ํ์๋๊ฒ ์ข์ ๊ฒ ๊ฐ์ต๋๋ค. ๊ทธ๋ ๊ฒ ํ์๋๊ฒ ์นด๋๋ฅผ ์ํ๋ ์์น๋ก ์์ง์ด๋ ์ ๋๋ฉ์ด์  ์ฒ๋ฆฌํ๊ธฐ๋ ์์ํ๊ณ ์. ๋ฑ ์ด๋ค ๋ฐฉ๋ฒ์ด ์ ์ผ ์ข๋ค๊ธฐ๋ณด๋ค๋, ์ํ๋ ํํ๊ฐ ๋์ฌ ์ ์๋ค๋ฉด, ๋์๋๊ป์ ๊ตฌํํ๊ธฐ ์ข์ ๋ฐฉ๋ฒ์ผ๋ก ํ์๋๊ฒ ์ข์ ๊ฒ ๊ฐ์์. - 0
- 1
- 171
 
- Q&A - '์ด๋ฒคํธ ์์ ๋ณด๊ฐ ์์'์ ์๋ ์์  html์ด ์ ๋ณด์ ๋๋ค - ์, ์ ๊ฐ ํ์ธ์ด ๋ฆ์์ต๋๋ค. ์๋ ์์ค๋ฅผ ์ฌ์ฉํ์๋ฉด ๋ฉ๋๋ค! Event Delegation body { display: flex; align-items: center; justify-content: center; } @keyframes pointer-ani { 0% { transform: scale(0); } 50% { transform: scale(1); } 100% { transform: scale(1.5); opacity: 0; } } .pointer { position: absolute; left: 0; top: 0; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; background: url('../images/ilbuni2.png') no-repeat 0 0 / cover; transform: scale(0); animation: pointer-ani 0.5s linear; } .menu { display: flex; margin-top: -10vh; padding: 2em; border-radius: 20px; background: #eee; } .menu-btn { display: inline-flex; align-items: center; margin: 0 1em; padding: 0.5em 1em 0.5em 0.5em; border: 5px solid white; border-radius: 20px; outline: 0; font: 900 1.2rem NotoSans; background: linear-gradient(0deg, rgba(223,210,0,1) 0%, rgba(255,240,0,1) 24%, rgba(255,240,0,1) 70%, rgba(255,255,255,1) 100%); box-shadow: rgba(0,0,0,0.1) 0 0 0 1px inset; } .btn-label { text-shadow: rgba(255,255,255,1) 0 1px 0; /*pointer-events: none;*/ } .icon { width: 60px; /*pointer-events: none;*/ } window.addEventListener('DOMContentLoaded', () => new IlbuniPointer()); (์ฌ์ง) ์ผ๋ถ์ด 1 (์ฌ์ง) ์ผ๋ถ์ด 2 (์ฌ์ง) ์ผ๋ถ์ด 3 const menu = document.querySelector('.menu'); function clickHandler(event) { let elem = event.target; while (!elem.classList.contains('menu-btn')) { elem = elem.parentNode; if (elem.nodeName == 'BODY') { elem = null; return; } } console.log(elem.dataset.value); } menu.addEventListener('click', clickHandler); - 0
- 2
- 221
 
- Q&A - px, em ,rem์ ์ด๋ป๊ฒ ๊ฐ๊ฐ์ ์ผ๋ก ์ธ ์ ์์๊น์? - ์ฌ์ค ์ด๊ฒ ๋ฑ ์ ํด์ง ๊ท์น์ ์์ด์, ํ๋ก์ ํธ์ ๋ง๋ค๊ณ ์๊ฐ๋๋ ์ ์ฑ ์ ์ ํ์ ํ ๊ทธ๊ฑธ ์งํค์๋๊ฒ ์ ์ผ ์ข๊ธฐ๋ ํฉ๋๋ค. ๊ฐ์ ๋ฐ๋ผ์ ๊ณ ์ ๋ ํฝ์ ๊ฐ์ ์ฌ์ฉํ๋๊ฒ ํธํ๊ฒ ์๊ณ , ํฐํธ ํฌ๊ธฐ์ ๋ฐ๋ผ๊ฐ๋๋ก ํ๋๊ฒ ํธํ ๊ฒฝ์ฐ๋ ์๋ต๋๋ค.์๋ ์์์ ์ ๊ฐ ์์ ์ ์ฌ๋ ค๋ ์์์ธ๋ฐ, ํ๋ฒ ์ฐธ๊ณ ํด ๋ณด์๋ฉด ์ข์ ๊ฒ ๊ฐ์ต๋๋ค.https://youtu.be/S5uMXoGogkk?si=TC1oql-KiqLbfrXb - 0
- 2
- 439
 
- Q&A - ์ง๊ฒ๋ค๋ฆฌ ์์ ์์ SpotLight๊ฐ ๋์ ์ค๋ฅ - ์ฌ์ฉ๋๋ Three.js ๋ฒ์ ์ ๋ฐ๋ผ์, ๋น์ ๊ฐ๋๊ฐ ์ผ์ ํ์ง ์์ ํ์์ด ์๋๋ผ๊ณ ์. ์ง์  npm์ผ๋ก ์ต์ ๋ฒ์ ์ ์ค์นํ์๋๋ก ๊ฐ์๊ฐ ๊ตฌ์ฑ๋์ด์, ์ ๊ฐ ๊ฐ์๋ฅผ ์งํํ ๋ ์ฌ์ฉํ๋ Three.js ๋ฒ์ ๊ณผ ๋ง์ง ์์์ ์๊ธด ๋ฌธ์ ์ผ ์๋ ์๋ต๋๋ค. Light์ ๊ฐ๋(intensity)๋ฅผ ์กฐ์ ํด๋ณด์๊ฒ ์ด์? - 0
- 2
- 268
 
- Q&A - ๊ฒ์ ์ค๋ฅ๋ ์ ๊ธ ์์ฑํด๋ด์.... - ์, ์ ๊ฐ ํ์ธ์ด ๋ฆ์๋ค์. ํน์ ํด๊ฒฐ ํ์ จ๋์? ์ฝ๋๋ฅผ ์ด๋ฏธ์ง๋ก ๋ง๊ณ ํ ์คํธ๋ก ์ฌ๋ ค์ฃผ์๋ฉด, ์ ๋ ํ๋ฒ ์ฐพ์๋ณด๋๋ก ํ๊ฒ ์ต๋๋ค. - 0
- 2
- 417
 
- Q&A - ์น์ 5 ์๋ฐ์คํฌ๋ฆฝํธ ์ด๋ฒคํธ ๋ค๋ฃจ๊ธฐ ์ง๋ฌธ - ์ ์ญ๋ณ์๋ ๋ง ๊ทธ๋๋ก, ๋ชจ๋ ๊ณณ์์ ๊ณต์ ๋๋ ๋ณ์์ ๋๋ค. ๊ทธ๋ฌ๋ค๋ณด๋ ์ ์ญ๋ณ์๋ฅผ ๋ง์ด ์ฌ์ฉํ๊ฒ ๋๋ฉด ์๊ธฐ์น ๋ชปํ ์ค๋ฅ(๋ค๋ฅธ ๊ณณ์์ ๊ฐ์ด ๋ฐ๋๋ค๋ ์ง)๊ฐ ๋ฐ์ํ๊ธฐ๊ฐ ์ฌ์์, ์ ์ญ๋ณ์ ์ฌ์ฉ์ ํผํ๋ ๊ฒฝ์ฐ๊ฐ ๋ง๋ต๋๋ค.๊ฐ์ ๋งฅ๋ฝ์ผ๋ก "์ ์ญ๋ณ์๋ฅผ ์ฌ์ฉํ์ง ์๊ธฐ ์ํด์"๋ผ๊ณ ๋งํ ๊ฒ์ ๋๋ค :) - 1
- 1
- 206
 
- Q&A - ์์ ์ ๋ณด์ฌ์ง๋๊ฒ ๋ค๋ฆ ๋๋ค. - ๊ฐํน Three.js์ ๋ฒ์ ์ ๋ฐ๋ผ ๋ฐ๊ธฐ๊ฐ ๋ค๋ฅด๊ฒ ๋ํ๋๋๋ผ๊ณ ์!๊ฐ์๋ฅผ ์ดฌ์ํ ๋ ์ฌ์ฉํ ๋ฒ์ ๊ณผ, ํ์ฌ ์ค์นํ์ ๋ฒ์ ์ด ๋ฌ๋ผ์ ๋ฐ์ํ๋ ์ฐจ์ด๋ก ๋ณด์ ๋๋ค. ํ๋ก์ ํธ ๊ฐ๋ฐ ์ค๊ฐ์ Three.js์ ๋ฒ์ ์ ๋ฐ๊ฟ์ผ์ ์ ์์ผ๋, ํ์ฌ ๋ฒ์ ์ ๋ง์ถ์ด ์ ๋นํ ๋ฐ๊ธฐ๋ฅผ ์ ํํ์๋ฉด ๋ ๊ฒ ๊ฐ์ต๋๋ค. - 0
- 3
- 519
 






