본문 바로가기

일상의 이해/하루의 노래 티스토리 기본 스킨 디자인 개조

by 서울나기 2020. 2. 28.

  • 새로 구입한 artnfear.com 도메인으로 바꾸고 애드센스도 다시 신청.
  • 티스토리 기본 스킨 CSS 수정.

초기부터 티스토리에서 제공하는 스킨을 썼는데 약간 질리는 느낌이라 오늘 디자인을 조금 바꿔 보았다. 제목을 가운데로 위치시킨 뒤에 콘텐츠 항목을 조금 위로 올렸더니 조금 모던한 느낌이 난다. 반응성 체크해서 어긋나는 부분도 대부분 수정했다. 아주 깔끔해 보여서 좋다. 한동안은 이 스킨으로 사용하려고 한다.

 

CSS 애니메이션 크게 4가지 부분에 넣었는데...

 

  1. 본문 타이틀이 가려졌다 나타나는 애니메이션 추가
  2. 1초 뒤에 컨텐츠 항목이 올라갔다가 내려가는 애니메이션
  3. 로고 텍스트 움직이는 애니메이션
  4. 목록에 몇개의 글이 있는지 나타내는 애니메이션 1번의 CSS 재활용

이렇게 추가했다가 2번, 3번은 왠지 정신없어서 뺐다.

 

2번 애니메이션 CSS 소스

.entry-content {
    -webkit-animation: ringding 1.5s 1s;
    -moz-animation: ringding 1.5s 1s;
    -ms-animation: ringding 1.5s 1s;
    -o-animation: ringding 1.5s 1s;
      animation: ringding 1.5s 1s;
}

/* entry-content 애니메이션 */
@-webkit-keyframes ringding {from {margin-top: -74px;} 85% {margin-top: -1000px;} to {margin-top: -74px;}}
@-moz-keyframes ringding {from {margin-top: -74px;} 85% {margin-top: -1000px;} to {margin-top: -74px;}}
@-ms-keyframes ringding {from {margin-top: -74px;} 85% {margin-top: -1000px;} to {margin-top: -74px;}}
@-o-keyframes ringding {from {margin-top: -74px;} 85% {margin-top: -1000px;} to {margin-top: -74px;}}
@keyframes ringding {from {margin-top: -74px;} 85% {margin-top: -1000px;} to {margin-top: -74px;}}

최종 디자인

메인 화면

로고 타이틀은 구글 웹폰트에서 발견한 Open Sans Condensed 폰트를 사용했다. 이벤트 배너 마진도 1px로 줄이고 넓이를 100%로 수정. 그밖에 불필요한 마진은 대부분 줄였다. 왜 제작자가 배너 마진을 102%로 디자인했는지는 모르겠다. 뭔가 이유가 있을 것 같았는데 발견하지 못했다.

카테고리

상단 안내 문구에 애니메이션 추가했다. 모바일 반응성 문제가 있었는데 글자 줄이는 걸로 해결.

본문 페이지

본문 타이틀을 중앙으로 위치시키고 본문 영역을 조금 올렸다. z-index 처리하는게 복잡해서 수정과 삭제 메뉴는 본문 안에 포함시켰다. 가장 시간이 많이 걸린 부분인 것 같다.

 

그밖에 티스토리는 파이어폭스와 친하지 않다는 사실을 알았다.


내용 꽉꽉 채워서 올해 안에 500개 포스팅하려고 했는데 아무래도 무리인 듯싶다. 못하더라도 일주일에 3개는 꼭 올리려고 노력하자.

댓글0