CSS HTML JAVASCRIPT 웹디자인기능사 GSAP 포트폴리오 유튜브 Tutorial146 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. 12. 포트폴리오 사이트 만들기 : React-Site : 라우팅 및 컴퍼넌트 Tutorial/portfolio 포트폴리오 사이트 만들기 - React by @webs 2023. 08. 01. 02 포트폴리오 사이트 만들기 : 라우팅 및 컴퍼넌트 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 리액트 작업을 위한 기본적인 설정을 시작하겠습니다. 페이지가 하나밖엔 없지만 페이지 셋팅을 할 거구요! 컴퍼넌트를 설정하여 페이지 구성을 할 것입니다. 또한 CSS를 SCSS로 변경하여 사용하도록 해보겠습니다. 처음하시는 분들은 많이 어색할 수 있지만, 몇 번 따라하다보면 익숙해지고 쉬어집니다. 그럼 시작해 보겠습니다.🧐 인덱스 VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기 1_3. gsap.. 2023. 7. 31. 11. 포트폴리오 사이트 만들기 : React-Site : 셋팅하기 Tutorial/portfolio 포트폴리오 사이트 만들기 - React by @webs 2023. 08. 01. 01 포트폴리오 사이트 만들기 : 셋팅하기 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이 튜토리얼은 하나의 웹사이트를 여러 가지 프레임워크를 사용하여 만드는 방법에 대해 소개합니다. 웹 개발자들은 종종 다양한 프레임워크를 이용하여 작업하게 됩니다. 이 과정에서 여러 가지 프레임워크들을 어떻게 적용하는지 알아보고, 각 프레임워크들의 장단점을 비교 분석하며 학습하게 됩니다. 가장 기본이 되는 HTML/CSS를 이용하여 사이트를 먼저 만들고, 이를 바탕으로 리액트, 뷰, 넥스트 프레임워크를 통해 제작하게 됩니다. 현재를 기준으로 가장 많이 사용.. 2023. 7. 31. 10. 포트폴리오 사이트 만들기 : Vite-Site : 마무리 Tutorial/portfolio 포트폴리오 사이트 만들기 - vite by @webs 2023. 08. 01. 10 포트폴리오 사이트 만들기 : 마무리 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 이제 정말 마무리 단계에 접어들었습니다. 스크롤 할 때 스므스 효과를 주면 조금더 고급지게 만들 수 있습니다. 물론 웹사이트를 만들 때 자주 사용되는 탭 메뉴, 이미지 슬라이드, 로딩 처리 등을 구현하지 않은 부분이 여전히 많습니다. 이런 부분도 다 알려드리고 싶지만, 너무 많은 내용을 한 번에 전달하기보다는 조금씩 천천히 반복적으로 학습하는 것이 가장 중요합니다. 잘하는 것보다 오래동안 꾸준히 하는게 더 중요하더라구요! 흥미를 느끼면서 오랜 기간 동안 노력한다면, 능숙하게 웹 개발을 할 .. 2023. 7. 24. 9. 포트폴리오 사이트 만들기 : Vite-Site : 푸터 영역 Tutorial/portfolio 포트폴리오 사이트 만들기 - vite by @webs 2023. 08. 01. 09 포트폴리오 사이트 만들기 : 푸터 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 이번 섹션은 포트폴리오에서 마지막 섹션입니다. 연락처에서 끝낼까 싶었는데. 조금 아쉬워서 전체 목록이나, 연락처 목록을 나타낼 수 있는 영역으로 꾸몄습니다. 이 영역은 세부적인 부분이나 표현하기 어려운 부분을 종합적으로 나타내면 좋을 거 같습니다. 인덱스 1. 포트폴리오 사이트 만들기 : VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기 1_3. gsap/lenis 설치하기 1_4. git 연동하기 2. 레이아웃 2.1 레이아웃 구조 만들기 2... 2023. 7. 24. 8. 포트폴리오 사이트 만들기 : Vite-Site : 연락처 영역 Tutorial/portfolio 포트폴리오 사이트 만들기 - vite by @webs 2023. 08. 01. 08 포트폴리오 사이트 만들기 : 연락처 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 이번 섹션은 가로 모드 느낌을 나게 연출하겠습니다. GSAP 라이브러리를 활용하여 작업하겠습니다. 자바스크립트를 작업하여 연출할 수 있지만, 비효율적이고, 애니메이션 효과가 라이브러리보다 훨씬 좋지 않습니다. 좋은 기능들은 갔다 쓰는게 더 효율적일 수 있습니다. GSPA를 처음 듣거나 할 줄 모르다면 gsap 강의를 한번 듣고 오는 것을 추천합니다. 그럼 시작해보겠습니다. 인덱스 1. 포트폴리오 사이트 만들기 : VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vi.. 2023. 7. 24. 7. 포트폴리오 사이트 만들기 : Vite-Site : 포트폴리오 영역 Tutorial/portfolio 포트폴리오 사이트 만들기 - vite by @webs 2023. 08. 01. 07 포트폴리오 사이트 만들기 : 포트폴리오 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 이번 섹션은 가로 모드 느낌을 나게 연출하겠습니다. GSAP 라이브러리를 활용하여 작업하겠습니다. 자바스크립트를 작업하여 연출할 수 있지만, 비효율적이고, 애니메이션 효과가 라이브러리보다 훨씬 좋지 않습니다. 좋은 기능들은 갔다 쓰는게 더 효율적일 수 있습니다. GSPA를 처음 듣거나 할 줄 모르다면 gsap 강의를 한번 듣고 오는 것을 추천합니다. 그럼 시작해보겠습니다. 인덱스 1. 포트폴리오 사이트 만들기 : VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. .. 2023. 7. 24. 6. 포트폴리오 사이트 만들기 : Vite-Site : 사이트 영역 Tutorial/portfolio 포트폴리오 사이트 만들기 - vite by @webs 2023. 08. 01. 06 포트폴리오 사이트 만들기 : 사이트 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 이번 섹션은 자신이 작업한 사이트를 보여주는 섹션입니다. 본인이 작업한 사이트를 보여주고 내가 이정도는 문제없이 할 수 있다라는 것을 보여주는 것이 중요합니다. 내가 작업한 사이트의 기술 스택이나 상세 설명을 적어주는 것이 좋고, 작업한 코드를 바로 볼 수 있는 버튼과 완성된 화면을 보여주는 것이 좋습니다. 작업한 사이트들은 git이나 netlify에 배포하여 보여주는 것이 좋습니다. 기본 웹표준 코딩부터, 반응형 코딩, 모바일 코딩, 리액트 코딩, 뷰 코딩으로 구성된 사이트 등을 보.. 2023. 7. 24. 5. 포트폴리오 사이트 만들기 : Vite-Site : 스킬 영역 Tutorial/portfolio 포트폴리오 사이트 만들기 - vite by @webs 2023. 08. 01. 05 포트폴리오 사이트 만들기 : 스킬 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 이번 섹션은 자신의 스킬을 나타내는 섹션을 구성하는 부분입니다. 포트폴리오에서 자신의 스킬을 표현하는 방법은 중요하고 효과적인 커뮤니케이션을 위해 핵심적입니다 자기의 능력을 보여주는 방법은 여러가지가 있겠지만, 키워드 또는 아이콘을 이용하여 보여주는 방법이 제일 많이 쓰이긴 합니다. 스킬을 표현할 때에는 간결하고 명확한 언어로 스킬에 대한 내용을 표현하면 좋습니다. 또한 스킬을 실제로 어떻게 활용하는지 시각적으로 증명하는 것도 효과적입니다. 인덱스 1. 포트폴리오 사이트 만들기 : VI.. 2023. 7. 24. 4. 포트폴리오 사이트 만들기 : Vite-Site : 인트로 영역 Tutorial/portfolio 포트폴리오 사이트 만들기 - vite by @webs 2023. 08. 01. 04 포트폴리오 사이트 만들기 : 인트로 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 이번 섹션은 웹 페이지의 인트로(소개) 섹션을 구성하는 부분입니다. "Port developer"라는 텍스트를 강조하여 표시하여 개발자 포트폴리오라는 느낌을 주었습니다. 가로로 놓인 줄들로 꾸며진 배경은 깔끔하고 세련된 느낌을 주도록 하였습니다. 또한 "Talent is found at the end of the effort"라는 메세지를 부여하여 노력에 대한 중요성을 강조하였습니다. 배경 이미지는 꾸밈 요소로 사용되었기 때문에, 웹 접근성을 위해 "aria-hidden" 속성을 사용.. 2023. 7. 24. 3. 포트폴리오 사이트 만들기 : Vite-Site : 헤더 영역 Tutorial/portfolio 포트폴리오 사이트 만들기 - vite by @webs 2023. 08. 01. 03 포트폴리오 사이트 만들기 : 헤더 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 각각의 섹션을 하나씩 작업해보겠습니다. 반응형도 동시에 작업하고, 스크립트도 한번에 마무리 하겠습니다. 지금까지 잘 하셨다면 이제부터는 코딩영역이라 쉽습니다. 그럼 바로 시작해보겠습니다. 인덱스 1. 포트폴리오 사이트 만들기 : VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴더 정리하기 1_3. gsap/lenis 설치하기 1_4. git 연동하기 2. 레이아웃 2.1 레이아웃 구조 만들기 2.2 메인 레이아웃 구조 만들기.. 2023. 7. 24. 2. 포트폴리오 사이트 만들기 : Vite-Site : 레이아웃 Tutorial/portfolio 포트폴리오 사이트 만들기 - Vite by @webs 2023. 07. 01. 02 포트폴리오 사이트 만들기 : 레이아웃 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 기본 셋팅을 완성하였으면, 이제 본격적으로 HTML/CSS 코딩을 시작해보겠습니다. vite를 통해 작업하기 때문에 기존에 기초 코딩 방식하고는 조금 틀릴 수 있습니다. 빌드와 배포라는 과정을 통해 사이트를 조금 더 최적화 시키고 가볍게 만들어 조금더 빠르고 동적인 사이트를 만들 수 있습니다. 그럼 갈 길이 머니까 바로 시작해볼까요? 🥱 인덱스 1. 포트폴리오 사이트 만들기 : VITE SITE 1. 셋팅하기 1_1. vite 설치하기 1_2. vite 폴.. 2023. 7. 24. 1. 포트폴리오 사이트 만들기 : Vite-Site : 셋팅하기 Tutorial/portfolio 포트폴리오 사이트 만들기 - Vite by @webs 2023. 07. 01. 01 포트폴리오 사이트 만들기 : 셋팅하기 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리보이입니다. 이 튜토리얼은 하나의 웹사이트를 여러 가지 프레임워크를 사용하여 만드는 방법에 대해 소개합니다. 웹 개발자들은 종종 다양한 프레임워크를 이용하여 작업하게 됩니다. 이 과정에서 여러 가지 프레임워크들을 어떻게 적용하는지 알아보고, 각 프레임워크들의 장단점을 비교 분석하며 학습하게 됩니다. 가장 기본이 되는 HTML/CSS를 이용하여 사이트를 먼저 만들고, 이를 바탕으로 리액트, 뷰, 넥스트 프레임워크를 통해 제작하게 됩니다. 현재를 기준으로 가장 많이 사용하.. 2023. 7. 24. 15. GSAP Parallax Effect : 스무스 효과 Tutorial/webd GSAP 패럴랙스 이펙트 : 스무스 효과 by @webs 2023. 06. 01. 15 GSAP Parallax Effect : 스무스 효과 난이도 중간 소스 다운로드 완성 화면 소스 보기 유튜브 소개 안녕하세요! 웹스토리보이입니다. 이번에는 GSAP 효과를 조금 더 퀄리티 있게 만들 수 있는 효과입니다. 잘 만들어진 사이트의 대부분은 이 효과를 적용하지 않은 사이트들이 거의 없습니다. 바로 부드럽게 움직임을 주는 스무스 효과입니다. 스무스 효과를 적용하는 방법은 여러가지가 있습니다. 직접 짤 수도 있도, 플러그인을 이용하는 방법들이 있습니다. 여러가지를 다 써본 결과 지금 쓸려고 하는 lenis 효과가 가장 좋습니다. 사용법도 간단하고 버그도 가장 적습니다. 그래서 이것을 써보.. 2023. 6. 20. 14. GSAP Parallax Effect : 가로/세로 나타나기 효과 Tutorial/webd GSAP 패럴랙스 이펙트 : 가로/세로 나타나기 효과 by @webs 2023. 06. 01. 14 GSAP Parallax Effect : 가로/세로 나타나기 효과 난이도 중간 소스 다운로드 완성 화면 소스 보기 유튜브 소개 안녕하세요! 웹스토리보이입니다. 이번에는 가로/세로 응용편입니다. 멋있게 가로 세로를 구현했는데, 애니메이션 효과를 주지 않는다면 별로겠죠! 세로 모드는 일반적인 효과이기 때문에 상관은 없지만, 가로 모드는 일반적인 효과로는 구현이 힘들기 때문에 따로 조치를 해주어야 합니다. 그렇다고 어렵지 않으니 잘 따라하시면 됩니다. 그럼 시작하겠습니다. 1. 기본 구조 만들기 1-1. 준비하기 GSAP를 배우는 시간이기 때문에 HTML/CSS 코딩은 생략하겠습니다. .. 2023. 6. 20. 13. GSAP Parallax Effect : 가로/세로 효과 Tutorial/webd GSAP 패럴랙스 이펙트 : 가로/세로 효과 by @webs 2023. 06. 01. 13 GSAP Parallax Effect : 가로/세로 효과 난이도 중간 소스 다운로드 완성 화면 소스 보기 유튜브 소개 안녕하세요! 웹스토리보이입니다. 가로 효과를 무사히 작업하였다면, 이제는 가로 세로 효과를 작업해보겠습니다. 가로와 세로가 결합된 형태이기 때문에 가로 효과보다는 조금 더 어려울 수 있습니다. 처음부터 가로 효과가 아닌 원하는 섹션만 가로 효과로 만들어야 하기 때문에 그 부분만 가로로 CSS 셋팅이 먼저 되어 있어야 합니다. 그럼 한번 만들어볼까요? 🙀 1. 기본 구조 만들기 1-1. 준비하기 GSAP를 배우는 시간이기 때문에 HTML/CSS 코딩은 생략하겠습니다. 기본 코.. 2023. 6. 20. 이전 1 2 3 4 5 6 다음
