CSS HTML JAVASCRIPT 웹디자인기능사 GSAP 포트폴리오 유튜브 Tutorial/port202340 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. 이전 1 2 다음
