스킨10

• 

  [JS] 티스토리 카테고리 괄호 제거 방법 티스토리 카테고리에는 각각 몇개의 게시글이 있는지 개수가 표시되어있는데 괄호 안에 넘버가 들어가 있습니다. 오늘은 티스토리 카테고리의 괄호를 제거하는 방법에 대해 알아보겠습니다. 카테고리 태그 찾기 우선, 티스토리 카테고리의 태그를 찾고 그 안의 id 네임을 찾아줘야 합니다. 자신의 블로그에서 사이드바를 오픈한 상태로 개발자 도구에 들어가 준다. (더보기 > 개발자 도구) 콘솔창 1번 아이콘을 누른 뒤, 사이드바의 카테고리 부분을 선택해준다. 콘솔창의 카테고리 부분의 id 값을 복사해준다. (저의 경우 id="sidebar-category") 만약 id 값이 없다면, 스킨 편집 > HTML > 에서 id 값을 직접 넣어준다. 다시 1번 아이콘을 선택하고 괄호가 포함된 게시글 개수 부분을 선택한다. 선택한.. TIP/CSS & Tistory 2022. 9. 12.

• 

  이미지 드래그 & 오른쪽 마우스 막는 방법 이미지 드래그 & 오른쪽 마우스 블로그나 기타 웹사이트를 운영하다 보면, 이미지를 블로그에 업로드하는 경우가 빈번하게 일어납니다. 이때, 블로그에 올려둔 img 파일의 오른쪽 마우스와 드래그를 막는 방법을 소개해드리고자 합니다. 방법은 매우 간단합니다. 단순히 아래 코드를 CSS파일에 적용하면 되는데, 티스토리의 경우에는 HTML 스킨 편집 CSS탭에 코드를 추가하면 됩니다. (티스토리) 스킨 편집 기초 상식 안녕하세요. 제 블로그에는 티스토리에서 스킨을 적용하기 위해 다양한 포스팅이 존재합니다. 이번에는 티스토리에서 어떻게 스킨을 어떻게 편집하는지 아주 간단하게 알아보려고 합니다. 스 seons-dev.tistory.com 만약 이미지를 선택할 수 없게 하고 싶다면 아래 코드를 적용하면 됩니다. img.. FRONT-END/CSS 2022. 7. 5.

• 

  (Icomoon) 티스토리에 CSS 아이콘 넣는 방법 티스토리에 CSS 아이콘 넣기 티스토리에 아이콘을 넣는 방법은 여러 가지가 있는데, 대표적으로 Font Awesome이라는 라이브러리를 사용하는 것입니다. 이것에 대해서는 저번 포스팅에 작성했기 때문에 궁금하신 분들은 아래 포스팅을 참고해주세요. Font Awesome 5 Pro 사용 방법 및 다운로드 Font Awesome 5 Pro (v1.15.4) 제 블로그에서 다양한 곳에 많이 사용된 폰트 라이브러리 중에 하나인 Font Awesome 5 Pro 버전에 대한 다운로드 방법과 사용방법에 대해 알아보려고 합니다. 현재 Font Awesome Pr.. seons-dev.tistory.com 이번에는 Font Awesome이 아닌 Icomoon을 사용해서 직접 아이콘을 만들어서 넣기까지 해 보도록 하려고.. TIP/CSS & Tistory 2022. 7. 4.

• 

  (CSS) background-size에 hover transition animation 적용 안될때 해결방법 오늘은 background image를 hover시 확대되는 효과와 자연스러운 transition 애니메이션 효과를 간단하게 해결해보도록 하겠습니다. background-size transition animation CSS에서 background 이미지에 마우스를 올려 hover 효과를 주고 싶을 때가 있습니다. 보통은 transform: scale(1.1)처럼 사용하게 되면 transition효과가 적용되어 자연스럽게 커지는 효과를 받을 수 있지만, transform scale이 적용되지 않은 경우가 종종 있습니다. 먼저, 효과는 아래처럼 적용해주려고 합니다. 컨텐츠 요소에 마우스를 hover 시키면 이미지가 확대되는 형식인데, background-size를 사용한 방법입니다. 우선 이미지의 backg.. FRONT-END/CSS 2022. 7. 3.

• 

  (Illustrator) 원하는 이미지를 아이콘 SVG파일로 만드는 방법 원하는 이미지를 아이콘 SVG파일로 만들기 오늘은 Adobe Illustrator으로 원하는 아이콘을 가져와서 SVG파일로 만들어주는 방법에 대해 알아보도록 하겠습니다. SVG 벡터 이미지 만드는 방법 먼저, 원하는 아이콘을 구글이나 다양한 경로를 통해 스크린샷해서 파일을 저장합니다. 그리고 Adobe Illustrator을 열어준 뒤에, 해당 스크린샷을 업로드해주겠습니다. 저는 Notion 아이콘을 예로 들어서 진행해볼까 합니다. 파일 업로드 Adobe Illustrator에 업로드합니다. Image Trace 활성화 파일을 업로드했다면, 상단 바에 Window - Image Trace를 차례로 눌러 활성화시켜줍니다. 그러면 아래와 같이 Image Trace 도구가 활성화되는데, 하단부 Preview에.. ADOBE/Illustrator 2022. 7. 1.

• 

  폰트 용량 경량화 방법 및 TTF to WOFF 확장자 변경 폰트 용량 경량화 및 TTF to WoFF 블로그 스킨을 꾸미다 보면 페이지를 로딩하는 시간이 폰트 용량에 의해 느려지는 경우가 종종 있습니다. 보통 웹폰트를 CSS에서 그대로 사용하거나, TTF 폰트를 다운로드하여 가져오는 경우가 대부분인데, TTF 파일 안에는 한글 / 영문 / 특수문자 외에 글리프가 포함되어 있고 심지어 압축률까지 떨어지는 TTF 확장자를 사용하기 때문입니다. 그래서 이번에는 폰트 용량 경량화하는 방법 및 TTF에서 WOFF확장자를 변경하는 방법에 대해 알아보겠습니다. 폰트 경량화 방법 첫 번째로 글리프를 제거해주는 프로그램을 설치해주셔야 합니다. 일본에서 만든 サブセットフォントメーカー 이라는 프로그램인데, 아쉽게도 한국어는 지원하지 않습니다. 하지만 맥북과 윈도우 사용자 모두 지원.. TIP/Etc Tip 2022. 6. 30.

• 

  사파리에서 SVG가 나타나지 않을때 해결방법 사파리에서 SVG가 나타나지 않을 때 해결방법 티스토리 스킨을 꾸미면서 SVG를 사용하는 경우가 종종 있는데, SVG형식의 요소가 iPhone, iPad, MacBook 등 크롬, 사파리를 막론하고 SVG가 나타나지 않은 현상을 발견했습니다. 우선, 맥북에서 크로미움 브라우저로 접속하면 아래와 같이 정상적으로 출력되는것을 확인했지만, 이상하게도 iPhone 또는 iPad에서는 SVG가 나타나지 않았습니다. 그래서 MacBook을 통해 사파리로 접속후, 개발자 도구를 열어 확인해 보았습니다. ?! 애니메이션을 멈추고 보니 컨테이너를 완전히 벗어난 width 497px, height 497px로 되어 컨테이너에 담기지 못한 것이었습니다. 사파리에서 종종 SVG를 인식하거나 지원하지 않은 경우가 있다고 했었.. TIP/Etc Tip 2022. 6. 28.

• 

  (티스토리) 날짜를 현재 중심적 시간표시 하는 방법 (며칠 전, 몇 개월전..) 오늘은 댓글에서 요청해주셨던 포스팅 또는 댓글 등의 날짜를 현재 중심적인 시간으로 동적 표시하는 방법에 대해 알아볼까 합니다. 이 스크립트를 사용하게 되면, 하루 전, 며칠 전, 몇 개월 전, 약 몇 년 전처럼 나타낼 수 있습니다. 날짜를 현재 중심적 시간 표시하는 방법 제 블로그에 적용되어있는 스크립트는 크게 두 가지입니다. 하나는 nubiz 님께서 만드신 스크립트와 또 하나는 timeago 플러그인입니다. 둘 다 각자의 장점이 있는 거 같아서 저는 둘 다 사용하고 있습니다. nubiz 스크립트 nubiz님께서 작성하신 스크립트는 아래 블로그에서 그대로 적용하면 되는데, 왜인지 모르게 옛날에 작성하신 스크립트인지 본문의 게시글에서는 적상적으로 표시가 되지 않는 오류가 있었습니다. 또, 1년이 넘어가면 .. TIP/CSS & Tistory 2022. 6. 28.

• 

  (티스토리) 버튼 클릭 한 번으로 내가 원하는 위치 이동하는 방법 (플로팅버튼) 저번에 플로팅 버튼 생성하는 방법에 대해 알아보았는데, 이번에는 버튼 클릭 한 번으로 내가 원하는 위치로 이동하는 방법에 대해 알아볼까 합니다. 정말 간단해서 포스팅해야 될지 고민도 했지만, 모르시는 분들을 위해서 작성하니 참고 부탁드립니다 :) 만약 티스토리 스킨편집에 대한 기초 지식이 없으시다면 아래 글을 먼저 읽고 와주세요! (티스토리) 스킨 편집 기초 상식 안녕하세요. 제 블로그에는 티스토리에서 스킨을 적용하기 위해 다양한 포스팅이 존재합니다. 이번에는 티스토리에서 어떻게 스킨을 어떻게 편집하는지 아주 간단하게 알아보려고 합니다. 스 seons-dev.tistory.com 버튼 클릭 한 번으로 내가 원하는 위치 이동하는 방법 플로팅 버튼을 저번에 만들었으니 그것을 응용해볼까 합니다. 만약, 플로팅.. FRONT-END/JAVASCRIPT 2022. 3. 25.

• 

  (기록) 로딩화면을 위해 GIF 이미지를 처음으로 직접 만들어 보았다..! 로딩 화면을 위해 GIF를 직접 만들어본 후기 티스토리를 스킨을 꾸미면서 로딩 화면 아이콘을 찾던 도중 아래 gif 이미지를 발견했는데, 나름 쓸만하다고 생각했었어요 그런데 문제점은 배경색! 이 배경색을 없애기 위해 gif 파일을 개별 파일로 뜯고, 그 뜯은 파일을 png 형식으로 바꾸고, 바꾼 png 파일을 캐릭터 하나 빼고 크롭 하고, 그 파일 120장을 전부 포토샵으로 불러와서 하나하나 배경색을 지워줬습니다. 진짜.. 개고생 했습니다. 근데 결과는 스킨이 흰색일 때는 아무런 문제가 없지만 저는 검은색을 사랑하는 사람으로서 검은 배경일 때 테두리에 하얀색 도트가 너무 많이 찍힌다는 게 너무너무너무너무 걸렸습니다. 그래도 만들었으니 사용하려고 했죠. 근데 이게 사람 마음이라는 게 한번 정 떨어지니까 바.. PLAY/잡담 2022. 3. 18.