본문 바로가기
반응형

포트폴리오3

HTML에 SVG 파일 추가하여 움직이는 애니메이션 구현 오랜만에 포트폴리오 포스팅을 하네요 :) 오늘은 저의 두번째 포트폴리오 메인에 사용된 디자인을 같이 구현해볼까합니다. 먼저 한번 완성작을 같이 보시죠 해당 완성작은 웹페이지에서 작동하는 것을 녹화한 거입니다. SVG파일을 먼저 만들러 가봅시다!! 일단 일러스트를 켜주세요 :) chpofo.tistory.com/39 포트폴리오 시작 - 로고제작 작년 여름방학 때부터 진행되었던 저의 포트폴리오 제작기를 오늘부터 하나씩 정리해볼까 합니다. 디자인을 전공하지 않아서 디자인적으로는 많이 부족한걸 저 또한 잘 알고 있습니다. 구독자 chpofo.tistory.com 해당 로고를 만들었을때 사용했던 필기체 글꼴를 사용해서 만들어봅시다. 1. 해당 글꼴로 원하는 글씨를 써주세요 2. 폰트를 깨주기 위해서 폰트를 선택하.. 2021. 4. 28.
스크롤 시 한 영역씩 이동 안녕하세요 :) 오늘은 포트폴리오에서 많이 사용하는 스크롤 시 영역이 이동되는 쿼리를 해볼까 합니다 이전 포스팅에서 JS플러그인을 소개하는 글에서 처음으로 소개했던 플러그인을 사용해도 무방하지만 코드로 작성할 수 있으면 더 좋지 않을까 해서 제가 학원에서 배운 것을 공유를 해드릴게요^^ 포트폴리오에 사용된 JS 포트폴리오를 준비하면서 벤치마킹을 열심히 하면서 괜찮은 JS 플러그인들이 많아서 소개하려합니다. 1. fullPage.js 첫번째로 소개해줄 플러그인은 첫번째 포트폴리오 기획했던 내용중 https://chpofo chpofo.tistory.com 먼저 완성작을 먼저 보고 코딩을 시작해 봅시다:) 스크롤 시 영역이동 영상에서와 같이 스크롤을 하면 한 영역씩 이동이 되는 그런 코드를 작성해봅시다 생각.. 2021. 4. 8.
포트폴리오 시작 - 로고제작 작년 여름방학 때부터 진행되었던 저의 포트폴리오 제작기를 오늘부터 하나씩 정리해볼까 합니다. 디자인을 전공하지 않아서 디자인적으로는 많이 부족한걸 저 또한 잘 알고 있습니다. 구독자님들이나 방문자들 중에서 디자인을 전공하신 분들이나 관심이 많으신 분들이 많이 들어와서 조언을 해주시면 저에게 많은 도움이 될 거 같아서 부끄럽지만 이렇게 정리해볼까 합니다. 포트폴리오를 시작하기 전에 나만의 로고를 제작을 제일 먼저 했던 거 같네요 로고를 어떻게 만들까 고민을 많이 하다가 고딕체와 필기체를 겹쳐서 만들면 이쁠 거 같아서 일러스트를 이용해서 제작을 해보았습니다. 함께 만드는 과정을 같이 보시죠 :) 위에 있는 로고가 저의 포트폴리오에서 사용된 저의 로고입니다. 이와 같이 고딕체와 필기체를 같이 사용하여서 멋있는.. 2021. 3. 26.
반응형