190826 블로그 제작 일지
개발 •
홈 화면
슬라이더를 제거하고 이미지가 하나만 랜덤으로 나오도록 했습니다.
같은 이미지만 계속 나오는데, 굳이 그 슬라이드를 보고 있을 이유가 없을 것 같더라고요. 저도 딱히 오래 보진 않고.
서버에서 랜덤 이미지를 뿌려주는데, PHP의 랜덤도 딱히 마음에 들진 않네요.
JS보다 더 심하게 랜덤이 아닌 느낌이 듭니다.
태그 클라우드 추가
태그 클라우드용 페이지도 추가했습니다.
티스토리에선 정렬 방식도 마음대로 못 정해서 불만이 이만저만이 아니었는데, 이제 드디어 제가 자주 사용하는 태그 순 정렬이 가능해졌습니다.
포스트 리스트
포스트 리스트에 글 설명을 추가했습니다.
+ 갤러리형 리스트, 기존에 사용하던 Masonry 리스트에선 설명이 표시되지 않습니다.
예전엔 -webkit-box를 이용해 일정 줄 수를 넘기면 줄임표(...)가 표시되는 방법을 사용했었는데, 이번엔 일정 줄 수를 넘기면 글자가 페이드아웃 되는 효과를 추가해봤습니다.
Masonry를 이용한 두 번째 리스트 디자인입니다.
기존과 달리 글 정보가 마우스를 올리지 않아도 보이며(PC 기준), 글 설명도 표시됩니다.
텍스트 중심 리스트의 hover 효과도 배경이 통째로 변경되는 효과에서 테두리만 표시되는 효과로 변경했습니다.
reflow와 repaint를 최소화하며 애니메이션을 사용하고 싶어서, box-shadow를 천천히 그리거나 border를 천천히 늘리는 게 아니라, 가상 요소를 만들고, 그 요소의 scale과 opacity를 조절하며 테두리가 그려지도록 했습니다.
transform: scale을 사용하다 보니 크기를 깔끔하게 조절하긴 힘드네요. ㅠㅠ
댓글 방문자 홈페이지 링크
아무래도 워드프레스는 스팸과의 전쟁터라 해도 과장이 아니지 싶습니다.
스팸 댓글은 보통 일정 패턴을 갖고 있어서, 특정 키워드를 차단하는 방식으로 스팸을 막고는 있습니다만, 항상 예상을 빗나가는 스팸이 생기더라고요.
스팸 댓글이 댓글 작성자 주소 남기는 데 스팸 사이트도 계속 남기고 해서, 검색 엔진 봇이 제 사이트도 스팸으로 오인할까 염려돼서 봇은 해당 링크가 링크인지 판단하지 못하도록 바꿨습니다.
<!-- 예전 -->
<a href="https://marshallku.com" class="name">Marshall K</a>
<!-- 현재 -->
<div class="pseudo-link name" data-uri="https://marshallku.com">Marshall K</div>위와 같이 html 구조를 변경하고, JS로 클릭하면 새 창에서 링크가 열리도록 해뒀습니다.
댓글에 남기는 주소들도 업데이트를 해야 할 텐데, 그냥 서버 측에서 댓글에 링크를 a 태그로 변경하지 말고 클라이언트 측에서 변경하도록 업데이트해볼까 싶습니다.