본문 바로가기

2024/013

티스토리 블로그 꾸미기 (3) 오늘은 이전에 변경한 사이드바 카테고리 및 글을 정렬하는 방식을 변경했다. 먼저 지난 글에서 바뀐점은 다음과 같다. 변경된 점 사이드바 카테고리 깃허브 카드 플립효과 추가 글 정렬 디자인 변경 먼저 사이드바의 카테고리 디자인을 현재 UI에 맞게 수정했다. 현재 카테고리에 마우스를 가져다 대면 해당 카테고리가 선택되었다는 효과가 나타난다. 또한 깃허브 카드가 있던 박스에 내 명함을 넣고, 마우스를 가져다 대면 깃허브 카드로 뒤집히게 변경했다. 클릭시 내 깃허브로 이동하게 만들었다. 다음은 글의 정렬 디자인을 변경했다. 이 때 스크롤을 하며 페이드인 되는 효과를 구현했고, 화면에 없을 때에는 사라지도록 만들었다. 이제 내가 처음 구상했던 디자인은 모두 구현한 것 같다. 앞으로 어떤 부분을 수정해야할 지는 가.. 2024. 1. 18.
티스토리 블로그 꾸미기 (2) 오늘은 어제에 이어서 계속해서 티스토리 스킨을 만들었다. 만들면서 느낀건데 세상에서 디자인이 제일 어려운 것 같다. 디자인만 어떻게 완성되어 있으면 금방 하겠는데 다 만들고 나면 맘에 안들어서 엎고 다시하는 경우가 많았다. 그래도 나름 지금까지는 맘에 드니 다행이지만 제작 기간이 길어지면 또 바뀔 수 있을 것 같아서 최대한 빨리 끝내보려고 한다. 미리보기 오늘은 어제 못했던 글 내부에 자리를 차지하고 있던 area-common 을 없앴다. 메인에 집중하다보니 글 내부의 코드가 어떻게 되어 있는지 몰랐는데 글 내부에는 tt-body-page 라는 클래스가 있다는 것을 놓쳤다. 그래서 클래스를 추가하며 쉽게 고칠 수 있었다. 다음은 깃허브 바로가기를 만들었다. 먼저 전체 컨테이너를 a 태그로 감싸고 svg를.. 2024. 1. 4.
티스토리 블로그 꾸미기 (1) 최근 학교에서 나갔던 인턴 기간이 끝나며 나도 드디어 종강을 하게 되었다. 그래서 이 방학기간동안 티스토리 블로그 스킨을 만들어 보려고 한다. 이쁘게 만들면 내 포트폴리오가 되는거고 아니면 그냥 실력 쌓았다고 생각하면서 무지성 시작을 했다. 그런데 시작하자마자 디자인을 어떻게 해야할지 멘붕이 왔었다. 그래서 여러 사람들의 티스토리를 보며 영감을 얻어야겠다고 생각했다. 블로그를 정말 예쁘게 꾸민 분들도 많았고, 다른 사람들이 사용한 방법을 보며 여러 디자인을 생각해 보았다. 나는 내가 사용할 수 있는 기술들을 블로그에 조화롭게 넣는 것을 목표로 프로젝트를 시작했다. + 기본 스킨은 Odyssey를 사용했습니다. 초기 디자인 먼저 디자인 툴을 하나도 다루지 못해 냅다 ppt로 시작했다. 그 때는 포인트 색을.. 2024. 1. 3.