현재 제 커스텀 스킨 카테고리에 마우스 오버 시 줄이 생기는 이벤트에 대한 포스팅 요청을 받아 작성합니다. 티스토리 클래스의 구조 우선 카테고리를 커스터마이징 하려면 카테고리의 클래스 구조를 이해해야 합니다. 아래 이미지처럼 상위 카테고리에는 .link-item 클래스가 적용되어 있으며, 하위 카테고리에는 .link-sub-item 클래스가 적용되어 있습니다. 이는 hELLO스킨 기준이며, 다를 수도 있으므로 개발자 도구를 열어 정확한 클래스를 확인해보면 됩니다. 기본 CSS 설정 #sidebar #category .tt_category ul li::after { width: 0%; height: 2px; position: absolute; transition: width 0.4s; background-..
프로젝트 모듈화 과정에서 발생한 문제를 해결한방법과 보안에 대해 고민한 부분을 정리했습니다. 모듈화란? 모듈화는 소프트웨어 개발에서 중요한 단계 중 하나로, 코드를 작은 모듈로 분리하여 관리 및 유지보수를 용이하게 합니다. 1. 파일경로 문제 해결 : import file not found 문제 상황 이전에는 모두 동일한 파일에 있었는데 모듈화를 하며 다른 파일로 나눠지게 되었습니다. project/ ├── server/ │ ├── processChatGPTRequest.js │ └── lambda/ │ └── handler.js └── public/ └── index.html 이 상황에서 lambda 디렉토리 내의 handler.js가 processRequest.js 모듈을 import 해와야 하는 구..
[안내] PC에서도 프로필 카드를 확인할 수 있어요. 안녕하세요. 티스토리팀입니다. 티스토리 글을 읽다보면 혼자만 보기 아까운 유용한 글들이 참 많은데요. 마음에 드는 블로그를 한 눈에 살펴보고, 주변 사람들과 더 쉽고 빠르게 공유할 수 있 notice.tistory.com 티스토리에서 최근에 글 본문에 프로필 카드를 추가했다. 원래 모바일에서는 보이던 거라고 하던데, 나는 티스토리 기본 모바일 스킨도 안 쓰기 때문에 이것의 존재를 이번에 처음 알았다.. 그럼 display:none 하면 되겠네! div[data-tistory-react-app="Namecard"]{ display: none !important; } 혹시 모르니 !important까지 붙여주었다.
[# #_article_rep_simple_date_# #] 위가 글 본문 날짜의 원본이고 아래가 변경본이다. ## 부분이 띄어쓰기 처리된 것은 저렇게 하지않으면 포스팅 내에도 치환자가 반영이 되기 때문이다. , [# #_article_rep_date_year_# #] 원본 month를 가져와서 -1을 해주면 자바스크립트는 자동으로 숫자로 변환해준다. -1을 하는 이유는 인덱스는 0부터 시작하기 때문이다. 목록에 뜨는 날짜 형식도 비슷한 방법으로 변경해준다. [# #_list_rep_regdate_# #] 위가 원본이고 아래가 변경본이다. 글 본문에 들어가 있는 month는 하나라서 스크립트를 내부에 삽입하는 것으로 변경이 가능했지만, 리스트는 여러 글을 다루기에 다른 방법을 써야 한다. 우선 스타일을 ..
1. PC의 페이징과 동일하게 나오게 하기 #paging span:not(.selected) { display: inline-block; } 모바일에서도 위와 같은 모양으로 나오도록 하려면 selected 클래스(현재 선택된 페이지)가 아닌 span의 display를 none에서 inline-block으로 변경해주면 된다. 2. 최대 페이지수만 추가해주기 위와 같은 결과가 나오도록 하고 싶었다. 최대 페이지수가 나오고 그 사이에 슬래시 모양이 표시되게 하는 디자인이다. 이를 위해서 selected 클래스가 아닌 다른 페이지들은 display none을 적용해 주고, 그 중 마지막 페이지만 inline-block으로 보이게 했다. 마지막 페이지는 li:nth-last-child로 지정해줄 수 있다. 이 경..
HTML에서 와 안에 있는 div와 img에 cover-blur 클래스를 추가해주면 된다. div의 thumbnail 앞에 cover-blur 넣어주기 img의 absolute 앞에 cover-blur 넣어주기 그리고 해당 cover-blur 클래스를 아래와 같이 설정하여 CSS에 추가해준다. div.cover-blur { overflow: hidden; } img.cover-blur { filter: blur(20px); } img에 cover-blur 클래스가 설정되어 있으면 20px의 blur 효과를 주는 필터를 건다. 이때, blur때문에 지정 사이즈 밖으로 이미지가 번지기에 overflow를 hidden으로 주어 지정한 사이즈 부분만 표시되게 하는 것이다.
사이드바의 카테고리 목록 중, 현재 보고 있는 글이 속한 카테고리만 펼쳐지게 하고 싶었다. 1. HTML 바로 윗부분에 아래의 스크립트 삽입 sub_category_list 클래스는 카테고리의 세부 목록에 해당하는 클래스다. 펼쳐야 하는 카테고리는 해당 세부 목록이 있는 카테고리기에 해당 클래스를 변수로 선언해준다. 2. category-getter라는 css클래스를 '카테고리명이 들어가는 페이지'에 해당하는 HTML 부분에 넣어준다. 카테고리를 눌렀을 때 뜨는 '해당 카테고리의 글 목록' 페이지 : 상단의 카테고리 타이틀이 표시되는 부분 글을 눌렀을 때 볼 수 있는, '해당 글'의 페이지 : 상단의 카테고리가 표시되는 부분 이렇게 두 군데에 넣어주면 된다. 각각 해당하는 HTML 부분은 아래와 같다. ..
소소한 기능 커스텀하는 게 너무 재밌어! 1. 스킨 편집에서 카테고리 접기/펼치기 옵션을 아래와 같이 설정 2. HTML 바로 윗부분에 아래의 스크립트 삽입 [0] 을 다른 숫자로 바꿔주는 방법으로 해당 순번의 카테고리가 펼쳐지도록 설정할 수 있다. (0이 1번째 카테고리) 처음에는 DOMContentLoaded로 하면 반응이 없어서 load로 바꿨는데, 다시 실험해보니 문제없이 작동한다. DOMContentLoaded가 안 되는 경우에는 load를 사용하면 될 것 같다. 처음에는 카테고리를 설정하는 js 파일의 forEach문에서 어떻게 한 인덱스만 제외하고 돌아가게 할 수 없을까 방법을 찾아보았다. 그러나 검색해서 나온 방법들은 '인덱스'를 기준으로 제외하는 게 없었다. (array 내부 내용을 정확..
티스토리 문제로 Lightbox를 사용할 수 없게 되었다. 그래서 대안을 찾다가 FancyBox를 넣은 분의 글을 찾게되어 정리해둔다. 1. HTML head에 아래의 스크립트를 추가해준다. 기존의 티스토리 코드의 lightbox 부분을 삭제하고 data-fancybox="fancybox" 속성을 삽입한다. 아쉽게도 이 설정을 적용하면 전체 이미지가 fancybox라는 그룹으로 묶이게 되기 때문에 무조건 이미지 보기는 갤러리 형식으로 고정된다. 원래 fancybox는 data-fancybox만 넣어줘도 사용할 수 있지만 티스토리의 lightbox가 아직 완전히 삭제되지 않았기 때문에 data-fancybox만 넣을 시에는 이미지를 클릭해도 동작하지 않는다. 원본 코드에는 맨 밑에 한 줄이 더 있는데, 확..
