반응형 Portfolio9 애니메이션을 이용한 가로 막대그래프(스킬바) 오랜만에 포트폴리오 포스팅을 해볼까 합니다. 포트폴리오에 빠질 수 없는 스킬 바 바 형식이 아니더라도 나의 스킬을 표현할 수 있는 방법들은 다양하지만 이번 포스팅을 막대그래프를 활용한 스킬 바를 코딩을 해볼까 합니다. 제가 코딩을 하는 건 아니고 괜찮은 소스가 있어서 소개를 시켜드릴라고 합니다. 저의 포트폴리오에 사용도 되었던 막대그래프입니다. 포트폴리오에 스킬 바를 어떻게 하면 표현할 수 있을지 고민을 하다가 이런 그래프를 넣어야겠다 해서 많은 그래프나 도형들을 찾아봤는데 다들 소스들이 어렵고 헷갈려서 사용하기 좀 어려웠던것들은 다 패스를 하고 그래도 해당 소스는 수정하기도 편하고, 디자인도 괜찮고 해서 사용하게 되었습니다. 해당 소스는 아래의 링크에 있습니다. https://jsfiddle.net/k.. 2021. 6. 8. HTML에 SVG 파일 추가하여 움직이는 애니메이션 구현 오랜만에 포트폴리오 포스팅을 하네요 :) 오늘은 저의 두번째 포트폴리오 메인에 사용된 디자인을 같이 구현해볼까합니다. 먼저 한번 완성작을 같이 보시죠 해당 완성작은 웹페이지에서 작동하는 것을 녹화한 거입니다. SVG파일을 먼저 만들러 가봅시다!! 일단 일러스트를 켜주세요 :) chpofo.tistory.com/39 포트폴리오 시작 - 로고제작 작년 여름방학 때부터 진행되었던 저의 포트폴리오 제작기를 오늘부터 하나씩 정리해볼까 합니다. 디자인을 전공하지 않아서 디자인적으로는 많이 부족한걸 저 또한 잘 알고 있습니다. 구독자 chpofo.tistory.com 해당 로고를 만들었을때 사용했던 필기체 글꼴를 사용해서 만들어봅시다. 1. 해당 글꼴로 원하는 글씨를 써주세요 2. 폰트를 깨주기 위해서 폰트를 선택하.. 2021. 4. 28. 1320-12 column 그리드 잡기 안녕하세요 :) 오늘은 웹디자인의 기본인 그리드를 잡는 방법에 대해서 소개를 해드릴까 합니다. 첫 번째 포트폴리오는 그리드를 알기 전에 작업했던 거라서 화면이 작았지만 깨지곤 했지만 두 번째 포트폴리오는 일단 화면이 1320까지는 안 깨지니까 괜찮더라고요 아직은 반응형으로 못 만들어서 더 작아지면.. 먼저 모니터 해상도부터 알아보고 넘어갑시다 해상도는 화면에 최대 몇 개의 픽셀을 표현할 수 있는지를 나타낼 수 있는지를 알려주는 정보라고 생각을 하면 쉽게 이해를 할 수 있는데 해상도 숫자고 높을수록 고해상도의 이미지, 동영상을 출력할 수 있다. 모니터는 16:9 비율이 일반적이며, 요즘은 HD이하의 해상도는 의미가 없어서 최소로 1280 X 720라고 생각하면 된다. 그래서 그리드를 잡을 때 많이 사용하는.. 2021. 4. 14. 스크롤 시 한 영역씩 이동 안녕하세요 :) 오늘은 포트폴리오에서 많이 사용하는 스크롤 시 영역이 이동되는 쿼리를 해볼까 합니다 이전 포스팅에서 JS플러그인을 소개하는 글에서 처음으로 소개했던 플러그인을 사용해도 무방하지만 코드로 작성할 수 있으면 더 좋지 않을까 해서 제가 학원에서 배운 것을 공유를 해드릴게요^^ 포트폴리오에 사용된 JS 포트폴리오를 준비하면서 벤치마킹을 열심히 하면서 괜찮은 JS 플러그인들이 많아서 소개하려합니다. 1. fullPage.js 첫번째로 소개해줄 플러그인은 첫번째 포트폴리오 기획했던 내용중 https://chpofo chpofo.tistory.com 먼저 완성작을 먼저 보고 코딩을 시작해 봅시다:) 스크롤 시 영역이동 영상에서와 같이 스크롤을 하면 한 영역씩 이동이 되는 그런 코드를 작성해봅시다 생각.. 2021. 4. 8. 이전 1 2 3 다음 반응형
