본문 바로가기
CSS HTML JAVASCRIPT 웹디자인기능사 GSAP 포트폴리오 유튜브

Tutorial/port202340

40. 포트폴리오 사이트 만들기 : Next-Site : 마무리 Tutorial/portfolio 포트폴리오 사이트 만들기 - Next by @webs 2023. 08. 01. 10 포트폴리오 사이트 만들기 : 마무리 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이제 정말 마지막단계입니다. 지금까지 잘 따라오셨습니다. 마지막까지 최선을 다해 성공합시다. 화이팅 👍 포트폴리오 사이트 만들기 VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기 1_3. gsap/lenis 설치하기 1_4. git 연동하기 2. 레이아웃 2.1 레이아웃 구조 만들기 2.2 메인 레이아웃 구조 만들기 2.3 CSS 셋팅하기 2.4 JavaScript 셋팅하기 3. 헤더 영역 3.1 헤더 구조 잡기 3... 2023. 8. 1.
39. 포트폴리오 사이트 만들기 : Next-Site : 푸터 영역 Tutorial/portfolio 포트폴리오 사이트 만들기 - Next by @webs 2023. 08. 01. 09 포트폴리오 사이트 만들기 : 푸터 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 연락처 영역을 작업해보겠습니다. 특별히 어려운 점이 없으니 잘 따라와주세요! 😬 포트폴리오 사이트 만들기 VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기 1_3. gsap/lenis 설치하기 1_4. git 연동하기 2. 레이아웃 2.1 레이아웃 구조 만들기 2.2 메인 레이아웃 구조 만들기 2.3 CSS 셋팅하기 2.4 JavaScript 셋팅하기 3. 헤더 영역 3.1 헤더 구조 잡기 3.2 헤더 디.. 2023. 8. 1.
38. 포트폴리오 사이트 만들기 : Next-Site : 연락처 영역 Tutorial/portfolio 포트폴리오 사이트 만들기 - Next by @webs 2023. 08. 01. 08 포트폴리오 사이트 만들기 : 연락처 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 연락처 영역을 작업해보겠습니다. 특별히 어려운 점이 없으니 잘 따라와주세요! 😬 포트폴리오 사이트 만들기 VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기 1_3. gsap/lenis 설치하기 1_4. git 연동하기 2. 레이아웃 2.1 레이아웃 구조 만들기 2.2 메인 레이아웃 구조 만들기 2.3 CSS 셋팅하기 2.4 JavaScript 셋팅하기 3. 헤더 영역 3.1 헤더 구조 잡기 3.2 헤더 .. 2023. 8. 1.
37. 포트폴리오 사이트 만들기 : Next-Site : 포트폴리오 영역 Tutorial/portfolio 포트폴리오 사이트 만들기 - Next by @webs 2023. 08. 01. 07 포트폴리오 사이트 만들기 : 포트폴리오 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 포토폴리오 영역을 작업해보겠습니다. 특별히 어려운 점이 없으니 잘 따라와주세요! 😬 포트폴리오 사이트 만들기 VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기 1_3. gsap/lenis 설치하기 1_4. git 연동하기 2. 레이아웃 2.1 레이아웃 구조 만들기 2.2 메인 레이아웃 구조 만들기 2.3 CSS 셋팅하기 2.4 JavaScript 셋팅하기 3. 헤더 영역 3.1 헤더 구조 잡기 3.2.. 2023. 8. 1.
36. 포트폴리오 사이트 만들기 : Next-Site : 사이트 영역 Tutorial/portfolio 포트폴리오 사이트 만들기 - Next by @webs 2023. 08. 01. 06 포트폴리오 사이트 만들기 : 사이트 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 스킬 영역을 작업해보겠습니다. 특별히 어려운 점이 없으니 잘 따라와주세요! 😬 포트폴리오 사이트 만들기 VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기 1_3. gsap/lenis 설치하기 1_4. git 연동하기 2. 레이아웃 2.1 레이아웃 구조 만들기 2.2 메인 레이아웃 구조 만들기 2.3 CSS 셋팅하기 2.4 JavaScript 셋팅하기 3. 헤더 영역 3.1 헤더 구조 잡기 3.2 헤더 디.. 2023. 8. 1.
35. 포트폴리오 사이트 만들기 : Next-Site : 스킬 영역 Tutorial/portfolio 포트폴리오 사이트 만들기 - Next by @webs 2023. 08. 01. 05 포트폴리오 사이트 만들기 : 스킬 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 스킬 영역을 작업해보겠습니다. 특별히 어려운 점이 없으니 잘 따라와주세요! 😬 포트폴리오 사이트 만들기 VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기 1_3. gsap/lenis 설치하기 1_4. git 연동하기 2. 레이아웃 2.1 레이아웃 구조 만들기 2.2 메인 레이아웃 구조 만들기 2.3 CSS 셋팅하기 2.4 JavaScript 셋팅하기 3. 헤더 영역 3.1 헤더 구조 잡기 3.2 헤더 디자.. 2023. 8. 1.
34. 포트폴리오 사이트 만들기 : Next-Site : 인트로 영역 Tutorial/portfolio 포트폴리오 사이트 만들기 - Next by @webs 2023. 08. 01. 04 포트폴리오 사이트 만들기 : 인트로 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. next.js를 작업하기 전에 기본 셋팅을 완성하겠습니다. 기존 프레이워크랑 차이점이 무엇인지 알아보고, 좋은 점이 무엇이 있는지 알아보겠습니다. 그럼 바로 시작해보겠습니다. 포트폴리오 사이트 만들기 VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기 1_3. gsap/lenis 설치하기 1_4. git 연동하기 2. 레이아웃 2.1 레이아웃 구조 만들기 2.2 메인 레이아웃 구조 만들기 2.3 CSS 셋팅하기 2.. 2023. 8. 1.
33. 포트폴리오 사이트 만들기 : Next-Site : 헤더 영역 Tutorial/portfolio 포트폴리오 사이트 만들기 - Next by @webs 2023. 08. 01. 03 포트폴리오 사이트 만들기 : 헤더 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. next.js를 작업하기 전에 기본 셋팅을 완성하겠습니다. 기존 프레이워크랑 차이점이 무엇인지 알아보고, 좋은 점이 무엇이 있는지 알아보겠습니다. 그럼 바로 시작해보겠습니다. 포트폴리오 사이트 만들기 VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기 1_3. gsap/lenis 설치하기 1_4. git 연동하기 2. 레이아웃 2.1 레이아웃 구조 만들기 2.2 메인 레이아웃 구조 만들기 2.3 CSS 셋팅하기 2... 2023. 8. 1.
32. 포트폴리오 사이트 만들기 : Next-Site : 라우팅 및 컴퍼넌트 Tutorial/portfolio 포트폴리오 사이트 만들기 - Next by @webs 2023. 08. 01. 02 포트폴리오 사이트 만들기 : 라우팅 및 컴퍼넌트 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. next.js를 작업하기 전에 기본 셋팅을 완성하겠습니다. 기존 프레이워크랑 차이점이 무엇인지 알아보고, 좋은 점이 무엇이 있는지 알아보겠습니다. 그럼 바로 시작해보겠습니다. 포트폴리오 사이트 만들기 VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기 1_3. gsap/lenis 설치하기 1_4. git 연동하기 2. 레이아웃 2.1 레이아웃 구조 만들기 2.2 메인 레이아웃 구조 만들기 2.3 CSS 셋팅.. 2023. 8. 1.
31. 포트폴리오 사이트 만들기 : Next-Site : 셋팅하기 Tutorial/portfolio 포트폴리오 사이트 만들기 - Next by @webs 2023. 08. 01. 01 포트폴리오 사이트 만들기 : 셋팅하기 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이 튜토리얼은 하나의 웹사이트를 여러 가지 프레임워크를 사용하여 만드는 방법에 대해 소개합니다. 웹 개발자들은 종종 다양한 프레임워크를 이용하여 작업하게 됩니다. 이 과정에서 여러 가지 프레임워크들을 어떻게 적용하는지 알아보고, 각 프레임워크들의 장단점을 비교 분석하며 학습하게 됩니다. 가장 기본이 되는 HTML/CSS를 이용하여 사이트를 먼저 만들고, 이를 바탕으로 리액트, 뷰, 넥스트 프레임워크를 통해 제작하게 됩니다. 현재를 기준으로 가장 많이 사용하.. 2023. 8. 1.
30. 포트폴리오 사이트 만들기 : Vue-Site : 마무리 Tutorial/portfolio 포트폴리오 사이트 만들기 - Vue by @webs 2023. 08. 01. 10 포트폴리오 사이트 만들기 : 마무리 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 뷰 마무리 섹션이 되겠습니다. 벌써 3번째 사이트를 마무리 할 때가 됐네요! 그럼 얼릉 끝내보도록 합시다! 고고 🫤 포트폴리오 사이트 만들기 VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기 1_3. gsap/lenis 설치하기 1_4. git 연동하기 2. 레이아웃 2.1 레이아웃 구조 만들기 2.2 메인 레이아웃 구조 만들기 2.3 CSS 셋팅하기 2.4 JavaScript 셋팅하기 3. 헤더 영역 3.1 헤더 구조.. 2023. 7. 31.
29. 포트폴리오 사이트 만들기 : Vue-Site : 푸터 영역 Tutorial/portfolio 포트폴리오 사이트 만들기 - Vue by @webs 2023. 08. 01. 09 포트폴리오 사이트 만들기 : 푸터 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 오늘은 연락처 컴퍼넌트를 작업해보겠습니다. 소스를 직접 치고 만드는 것이 아니라, 기존에 소스를 활용해서 만드는 것이기 때문에 비교적 빨리 만들 수 있을겁니다. 그럼 오늘도 시작해볼까요!! 🥶 포트폴리오 사이트 만들기 VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기 1_3. gsap/lenis 설치하기 1_4. git 연동하기 2. 레이아웃 2.1 레이아웃 구조 만들기 2.2 메인 레이아웃 구조 만들기 2.3 CS.. 2023. 7. 31.
28. 포트폴리오 사이트 만들기 : Vue-Site : 연락처 영역 Tutorial/portfolio 포트폴리오 사이트 만들기 - Vue by @webs 2023. 08. 01. 08 포트폴리오 사이트 만들기 : 연락처 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 오늘은 연락처 컴퍼넌트를 작업해보겠습니다. 소스를 직접 치고 만드는 것이 아니라, 기존에 소스를 활용해서 만드는 것이기 때문에 비교적 빨리 만들 수 있을겁니다. 그럼 오늘도 시작해볼까요!! 🥶 포트폴리오 사이트 만들기 VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기 1_3. gsap/lenis 설치하기 1_4. git 연동하기 2. 레이아웃 2.1 레이아웃 구조 만들기 2.2 메인 레이아웃 구조 만들기 2.3 C.. 2023. 7. 31.
27. 포트폴리오 사이트 만들기 : Vue-Site : 포트폴리오 영역 Tutorial/portfolio 포트폴리오 사이트 만들기 - Vue by @webs 2023. 08. 01. 07 포트폴리오 사이트 만들기 : 포트폴리오 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 오늘은 인트로 컴퍼넌트를 작업해보겠습니다. 소스를 직접 치고 만드는 것이 아니라, 기존에 소스를 활용해서 만드는 것이기 때문에 비교적 빨리 만들 수 있을겁니다. 그럼 오늘도 시작해볼까요!! 🥶 포트폴리오 사이트 만들기 VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기 1_3. gsap/lenis 설치하기 1_4. git 연동하기 2. 레이아웃 2.1 레이아웃 구조 만들기 2.2 메인 레이아웃 구조 만들기 2.3.. 2023. 7. 31.
26. 포트폴리오 사이트 만들기 : Vue-Site : 사이트 영역 Tutorial/portfolio 포트폴리오 사이트 만들기 - Vue by @webs 2023. 08. 01. 06 포트폴리오 사이트 만들기 : 사이트 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 오늘은 인트로 컴퍼넌트를 작업해보겠습니다. 소스를 직접 치고 만드는 것이 아니라, 기존에 소스를 활용해서 만드는 것이기 때문에 비교적 빨리 만들 수 있을겁니다. 그럼 오늘도 시작해볼까요!! 🥶 포트폴리오 사이트 만들기 VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기 1_3. gsap/lenis 설치하기 1_4. git 연동하기 2. 레이아웃 2.1 레이아웃 구조 만들기 2.2 메인 레이아웃 구조 만들기 2.3 C.. 2023. 7. 31.
25. 포트폴리오 사이트 만들기 : Vue-Site : 스킬 영역 Tutorial/portfolio 포트폴리오 사이트 만들기 - Vue by @webs 2023. 08. 01. 05 포트폴리오 사이트 만들기 : 스킬 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 오늘은 인트로 컴퍼넌트를 작업해보겠습니다. 소스를 직접 치고 만드는 것이 아니라, 기존에 소스를 활용해서 만드는 것이기 때문에 비교적 빨리 만들 수 있을겁니다. 그럼 오늘도 시작해볼까요!! 🥶 포트폴리오 사이트 만들기 VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기 1_3. gsap/lenis 설치하기 1_4. git 연동하기 2. 레이아웃 2.1 레이아웃 구조 만들기 2.2 메인 레이아웃 구조 만들기 2.3 CS.. 2023. 7. 31.
24. 포트폴리오 사이트 만들기 : Vue-Site : 인트로 영역 Tutorial/portfolio 포트폴리오 사이트 만들기 - Vue by @webs 2023. 08. 01. 04 포트폴리오 사이트 만들기 : 인트로 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 오늘은 인트로 컴퍼넌트를 작업해보겠습니다. 소스를 직접 치고 만드는 것이 아니라, 기존에 소스를 활용해서 만드는 것이기 때문에 비교적 빨리 만들 수 있을겁니다. 그럼 오늘도 시작해볼까요!! 🥶 포트폴리오 사이트 만들기 VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기 1_3. gsap/lenis 설치하기 1_4. git 연동하기 2. 레이아웃 2.1 레이아웃 구조 만들기 2.2 메인 레이아웃 구조 만들기 2.3 C.. 2023. 7. 31.
23. 포트폴리오 사이트 만들기 : Vue-Site : 헤더 영역 Tutorial/portfolio 포트폴리오 사이트 만들기 - Vue by @webs 2023. 08. 01. 03 포트폴리오 사이트 만들기 : 헤더 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이제 기본 셋팅도 완료가 됐으니, 컴퍼넌트를 하니씩 완성해 나가겠습니다. 방법은 기존과 동일하니, 반복 연습한다고 생각하시면 됩니다. 포트폴리오 사이트 만들기 VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기 1_3. gsap/lenis 설치하기 1_4. git 연동하기 2. 레이아웃 2.1 레이아웃 구조 만들기 2.2 메인 레이아웃 구조 만들기 2.3 CSS 셋팅하기 2.4 JavaScript 셋팅하기 3. 헤더 .. 2023. 7. 31.
22. 포트폴리오 사이트 만들기 : Vue-Site : 라우팅 및 컴퍼넌트 Tutorial/portfolio 포트폴리오 사이트 만들기 - Vue by @webs 2023. 08. 01. 02 포트폴리오 사이트 만들기 : 라우팅 및 컴퍼넌트 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이제 본격적으로 뷰에 대해서 셋팅을 하고 작업을 시작해보겠습니다. 기존에 했던 방식과 많이 다르지 않습니다. 하지만 겉모습은 다를 수 있습니다. 그렇다고 어렵진 않습니다. 중요한건 흐름 및 방식을 이해하는 것이 좋습니다. 원리는 비슷하기 때문에 문법이 다르다고 해서, 구현을 못하지 않기 때문에 이런식으로 작동하는구나! 이런 느낌만 받는다면 크게 문제 없을 것입니다. 그럼 시작해볼까요? 고고 😜 포트폴리오 사이트 만들기 VITE SITE 1. 셋팅하.. 2023. 7. 31.
21. 포트폴리오 사이트 만들기 : Vue-Site : 셋팅하기 Tutorial/portfolio 포트폴리오 사이트 만들기 - Vue by @webs 2023. 08. 01. 01 포트폴리오 사이트 만들기 : 셋팅하기 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이 튜토리얼은 하나의 웹사이트를 여러 가지 프레임워크를 사용하여 만드는 방법에 대해 소개합니다. 웹 개발자들은 종종 다양한 프레임워크를 이용하여 작업하게 됩니다. 이 과정에서 여러 가지 프레임워크들을 어떻게 적용하는지 알아보고, 각 프레임워크들의 장단점을 비교 분석하며 학습하게 됩니다. 가장 기본이 되는 HTML/CSS를 이용하여 사이트를 먼저 만들고, 이를 바탕으로 리액트, 뷰, 넥스트 프레임워크를 통해 제작하게 됩니다. 현재를 기준으로 가장 많이 사용하는.. 2023. 7. 31.
20. 포트폴리오 사이트 만들기 : React-Site : 마무리 영역 Tutorial/portfolio 포트폴리오 사이트 만들기 - React by @webs 2023. 08. 01. 09 포트폴리오 사이트 만들기 : 마무리 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 드뎌 마무리 단계에 왔네요! 조금 할 것이 많지만 잘 따라해주세요! 🤣 인덱스 VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기 1_3. gsap/lenis 설치하기 1_4. git 연동하기 2. 레이아웃 2.1 레이아웃 구조 만들기 2.2 메인 레이아웃 구조 만들기 2.3 CSS 셋팅하기 2.4 JavaScript 셋팅하기 3. 헤더 영역 3.1 헤더 구조 잡기 3.2 헤더 디자인 설정 3.3 반응형 작업하기 3... 2023. 7. 31.
19. 포트폴리오 사이트 만들기 : React-Site : 푸터 영역 Tutorial/portfolio 포트폴리오 사이트 만들기 - React by @webs 2023. 08. 01. 09 포트폴리오 사이트 만들기 : 푸터 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 푸터 영역을 작업하겠습니다. 어려운 것이 없으니 바로 시작해보겠습니다. 인덱스 VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기 1_3. gsap/lenis 설치하기 1_4. git 연동하기 2. 레이아웃 2.1 레이아웃 구조 만들기 2.2 메인 레이아웃 구조 만들기 2.3 CSS 셋팅하기 2.4 JavaScript 셋팅하기 3. 헤더 영역 3.1 헤더 구조 잡기 3.2 헤더 디자인 설정 3.3 반응형 .. 2023. 7. 31.
18. 포트폴리오 사이트 만들기 : React-Site : 연락처 영역 Tutorial/portfolio 포트폴리오 사이트 만들기 - React by @webs 2023. 08. 01. 08 포트폴리오 사이트 만들기 : 연락처 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 연락처 영역을 작업하겠습니다. 어려운 것이 없으니 바로 시작해보겠습니다. 인덱스 VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기 1_3. gsap/lenis 설치하기 1_4. git 연동하기 2. 레이아웃 2.1 레이아웃 구조 만들기 2.2 메인 레이아웃 구조 만들기 2.3 CSS 셋팅하기 2.4 JavaScript 셋팅하기 3. 헤더 영역 3.1 헤더 구조 잡기 3.2 헤더 디자인 설정 3.3 반응.. 2023. 7. 31.
17. 포트폴리오 사이트 만들기 : React-Site : 포트폴리오 영역 Tutorial/portfolio 포트폴리오 사이트 만들기 - React by @webs 2023. 08. 01. 07 포트폴리오 사이트 만들기 : 포트폴리오 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 포트폴리오 영역을 작업하겠습니다. GSAP를 이용하여 가로모드를 구현하는 영역입니다. 인덱스 VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기 1_3. gsap/lenis 설치하기 1_4. git 연동하기 2. 레이아웃 2.1 레이아웃 구조 만들기 2.2 메인 레이아웃 구조 만들기 2.3 CSS 셋팅하기 2.4 JavaScript 셋팅하기 3. 헤더 영역 3.1 헤더 구조 잡기 3.2 헤더 디자인 .. 2023. 7. 31.
16. 포트폴리오 사이트 만들기 : React-Site : 사이트 영역 소개 안녕하세요! 웹스토리보이입니다. 이번에는 사이트 영역을 작업하겠습니다. 크게 어려운 점이 없으니 잘 따라해주세요! 인덱스 VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기 1_3. gsap/lenis 설치하기 1_4. git 연동하기 2. 레이아웃 2.1 레이아웃 구조 만들기 2.2 메인 레이아웃 구조 만들기 2.3 CSS 셋팅하기 2.4 JavaScript 셋팅하기 3. 헤더 영역 3.1 헤더 구조 잡기 3.2 헤더 디자인 설정 3.3 반응형 작업하기 3.4 메뉴 자바스크립트 설정 4. 인트로 영역 4.1 인트로 구조 잡기 4.2 인트로 디자인 설정 4.3 반응형 작업하기 5. 스킬 영역 5.1 스킬 구조 잡기 5.2 스킬 디자인 설정 5.3 반응형 작업하.. 2023. 7. 31.
15. 포트폴리오 사이트 만들기 : React-Site : 스킬 영역 Tutorial/portfolio 포트폴리오 사이트 만들기 - React by @webs 2023. 08. 01. 05 포트폴리오 사이트 만들기 : 스킬 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 오늘은 스킬 영역을 작업하겠습니다. 스킬 영역도 크게 어려운 점이 없으니 천천히 잘 따라하시면 됩니다. 그럼 시작해보겠습니다. 인덱스 VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기 1_3. gsap/lenis 설치하기 1_4. git 연동하기 2. 레이아웃 2.1 레이아웃 구조 만들기 2.2 메인 레이아웃 구조 만들기 2.3 CSS 셋팅하기 2.4 JavaScript 셋팅하기 3. 헤더 영역 3.1 헤더 구조.. 2023. 7. 31.
14. 포트폴리오 사이트 만들기 : React-Site : 인트로 영역 Tutorial/portfolio 포트폴리오 사이트 만들기 - React by @webs 2023. 08. 01. 04 포트폴리오 사이트 만들기 : 인트로 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 오늘은 인트로 영역을 작업하겠습니다. 기존의 기본 코딩을 바탕으로 리액트에 맞게 작업하고 있습니다. 조금 다른 점이 있지만, 전체적인 맥락은 비슷하기 때문에 잘 따라 할 수 있을겁니다. 익숙해지면 쉬업집니다. 익숙해질려면 반복적으로 연습하면 됩니다. 그럼 오늘도 시작해볼까요! 인덱스 VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기 1_3. gsap/lenis 설치하기 1_4. git 연동하기 2. 레이아웃 2.. 2023. 7. 31.
13. 포트폴리오 사이트 만들기 : React-Site : 헤더 영역 Tutorial/portfolio 포트폴리오 사이트 만들기 - React by @webs 2023. 08. 01. 03 포트폴리오 사이트 만들기 : 헤더 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이제 하나씩 컴퍼넌트를 완성해 가봅시다. 7개의 컴포넌트를 하나씩 완성하면 기존처럼 멋있는 사이트가 완성될 것입니다. 처음에 만들었던 방식을 토대로 변화하는 과정과 재사용 및 효율적인 코딩방식으로 변화는 과정을 눈여겨 보면 좋습니다. 그럼 시작해보겠습니다. 인덱스 VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기 1_3. gsap/lenis 설치하기 1_4. git 연동하기 2. 레이아웃 2.1 레이아웃 구조 만.. 2023. 7. 31.

티스토리툴바