CSS HTML JAVASCRIPT 웹디자인기능사 GSAP 포트폴리오 Coding19 포트폴리오는 이렇게 만들어야쥐~ 포트폴리오는 이렇게 만들어야쥐~ 나도 시작합니다. 이렇게 만들겁니다. 두고 보셔요~~ 2022. 4. 8. 난 이걸 써 본적은 없지만... 이랬을까? 난 이걸 써 본적은 없지만... 이랬을까? 애플 컴퓨터를 써 본적이 없지만 이랬나? 어렸을 때 컴퓨터 학원을 가서 그림판이라는 것을 해본적은 있는데.. 디스켓 가지고 가서 실행하고 했던 기억이 나는 구나 사이트 보기 2022. 3. 4. 로딩 애니메이션 만들 때 도움되는 Lwder.js 로딩 애니메이션 만들 때 도움되는 Lwder.js 로딩 애니메이션 만들기 귀찮을 때가 있다. 이걸 이용하면 쉽게 만들 수 있다. 다만 효과가 다양하지 않다는 아쉬움이 조금 있다. 사이트 보기 2022. 3. 4. 사이트는 같아도 색상이 다르다면 사이트는 같아도 색상이 다르다면 사이트는 같아도 색상이 다르다면 느낌이 아주 다르다. 포트폴리오를 만들다보면 이런 부분이 가장 중요한데 이걸 깨닫기 쉽지 않다. 특히 초보한테도 어렵ㄴ다. 그런 부분에 있어서 조금 도움이 될 수 있는 사이트다 사이트 보기 2022. 3. 4. 내가 원하는 THREE.JS 스킬 내가 원하는 THREE.JS 스킬 퀄리티가 다르다. 남들가 다를려면 이런걸 해야 하는데. 이것을 구현하기 위해서는 TypeScript, React（Create React App）, React Three Fiber（Three.js）, GLSL, InstancedMesh, gsap 를 할줄 알아야 한다. 사이트 보기 2022. 3. 4. Three.js의 진수를 보여주는 사이트 Three.js의 진수를 보여주는 사이트 Jesse Zhou의 환상적인 웹사이트: Three.js와 Blender로 만든 몰입형 3D라면 가게. 나도 이렇게 만들고 싶다. 도대체 이런건 어떻게 만드는 거야 사이트 보기 2022. 3. 4. Three.js 아티스트 작가 lithya.rocks 아티스트 작가 lithya.rocks 영상 아트 작품들은 three.js나 p5.js를 이용해서 표현한다. 스크립터라고 해야 하나, 영상 제작자라고 해야 하나! https://www.ilithya.rocks/ 2022. 2. 26. 둠 포탈을 구현한 Three.js의 퀄리티 Bruno Simon님의 최신 실험 작품입니다. Three.js를 사용하여 Doom Portal 재창조 하였다. 대단하다, 말이 안된다. 2022. 2. 15. 오버레이 메뉴 화면 전환 효과 SVG 오버레이 메뉴 화면 전환 효과 SVG 2022. 2. 14. SVG 파비콘 만드는 방법 SVG 파비콘 만드는 방법 전통적으로 파비콘은 ico 파일로 만들었지만 현재는 svg 파일로도 가능하다. SVG로 만들면 용량도 매우 적고 백그라운드 투명도도 지원하기 때문에 다크 모드 했을 경우 더 좋다 자세히 보기 2022. 2. 11. 웹 표준을 준수하면서 코딩하는 방법 웹 표준을 준수하면서 코딩하는 방법과 네이밍 주는 방법 이 사이트는 가장 많이 사용하는 유형에 이름을 주는 방법과 웹 표준을 준수하는 방법을 보여주는 사이트입니다. 코딩을 하다가 이 부분은 어떻게 코딩을 하고 이름을 줄지가 고민이 된디면 이 사이트를 참고하면 된다. 디자인도 너무 깔끔하고 보기 좋게 되어 있어서 좋다. 굳!! 더 보기 싶다면 아래를 클릭하시요~ 여기서 보기 2022. 2. 9. DOM 구조를 컨트롤 할 수 있는 자바스크립트 DOM 구조를 컨트롤 할 수 있는 자바스크립트 모음 사이트입니다. 도움이 되시실 https://htmldom.dev/ Manage HTML DOM with vanilla JavaScript Manage HTML DOM with vanilla JavaScript htmldom.dev 2022. 2. 9. 부드러운 스크롤 효과 자바스크립트 라이브러리 See the Pen ASScroll Basic Demo by Ash Thornton (@ashthornton) on CodePen. 부드러운 스크롤 효과 자바스크립트 라이브러리 사이트 제작시 부르럽게 주는 효과는 사이트의 퀄리트를 좌지우지 한다. 그만큼 부드러운 효과는 중요하다. 이런 부드러운 효과를 제공해주는 자바스크립트는 라이브러리 파일이다. 여기서 확인하기 2022. 2. 9. 3D particle effects 이런걸 어떻게 만드는지 설명하는 것도 대단하다. 이 설명을 이해하는 사람도 있을까나? https://varun.ca/three-js-particles/ 2022. 2. 7. Threr.js 플러그인 같은 아트 효과 사이트 Three.js를 바탕으로 돌아가는 플러그인 같은 사이트. 종류가 엄청 다양하지는 않지만, Three.js 에서 많이 쓰이는 효과를 쉽게 만들 수 있는 플러그인 같은 사이트입니다. 몇 줄의 코드만으로 퀄리티 있는 효과를 만들 수 있지만. 내손으로 만들고 싶다. 만든 놈 대단하네~ 지독한 놈 https://www.vantajs.com/ Vanta.js - 3D & WebGL Background Animations For Your Website Gallery of customizable plug & play animated backgrounds using three.js www.vantajs.com 2022. 2. 7. 3D 표현 아이콘들이 멋있는 사이트 사이트 겁나 잘 만들었네~ https://pinch.ouiwill.com/ 2022. 2. 7. 베지에 곡선에 대한 백과사전 같은 사이트 베지에 곡선 프랑스의 공학자 피에르 베지에서 이름은 딴 베지에 곡선은 모션이나 그래픽에서 많이 사용되는 공식이다. 베지에 곡선을 표현하기 위해서는 두개의 점이 필요한데. 이것에 대한 공식을 웹에서도 그대로 사용할 수 있으며, 이것에 대한 디테일한 정보가 나온 사이트다. 젠장 무슨말인지 하나도 모르겠다. 이걸 만든 님은 대단한 듯 이걸 해석하는 분들이 몇 명이나 있는지 모르겠지만 도움되는 분들은 참고하시길 https://pomax.github.io/bezierinfo/index.html 2022. 2. 5. 3D 아이콘을 공짜로 받을 수 있는 곳 Three.js의 활용성이 증대되면서.. 3D 아이콘을 무료로 다운 받을 수 있으며, 상업적으로 써도 상관이 없다. 아이콘 퀄리티도 상당하지만 이 서비스를 three.js를 통해 제공하고 있다. 나도 이런 사이트 한번 만들어 봐야 겠다. 이미지도 내가 원하는 각도와 색상에 따라 다운이 가능하다. 사이트 바로가기 2022. 2. 4. CSS 선택자를 얼마나 아시나요? CSS 선택자를 얼마나 아시나요? CSS 선택자를 이용하여 다음의 문제를 풀면 레벨을 통과하는 게임입니다. 선택자를 생각보다 많이 사용하지 않기 때문에 은근히 어렵다는 점. 밑에 힌트도 나오니 참고해보세요 https://css-speedrun.netlify.app/ 2022. 2. 4. 이전 1 다음 728x90
