TIP/CSS & Tistory22

• 

  [CSS] hover Media query CSS의 Media query에 대해 알아보다가 몰랐던 기능인 @media(hover: hover)가 유용하다고 느껴 이것에 대해 알아보고자 합니다. hover hover은 데스크톱에서 특정 요소에 마우스를 올렸을 때 행동을 취하는 기능을 제공합니다. a:hover { background-color: red; } 여기서 문제는 '데스크톱'이라는 것입니다. 만약 모바일 이라면? 기존 hover을 사용하면 모바일에서 아주 잠시 동안 데스트톱에서 보이던 hover 효과가 보이게 되고 이것은 모바일 사용자에 있어 부정적인 경험을 주게 됩니다. 당연하게도 모바일에서는 마우스를 올려놓는 행위를 하는 것이 아니라 터치를 하는 행위를 하기 때문입니다. 이때 이것을 해결할 수 있는 방법이 바로 Media query를 사.. TIP/CSS & Tistory 2022. 10. 7.

• 

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

• 

  (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.

• 

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

• 

  (티스토리) 게시글에 공개 ➜ 비공개 버튼 만드는 방법 티스토리를 운영하다 보면 게시글을 올리고 난 후, 해당 게시글에 대해 공개에서 비공개 또는 비공개에서 공개 처리해야 하는 경우가 존재합니다. 한 가지의 게시글이면 상관없겠지만, 그러한 게시글이 많을수록 또, 어느 게시글이 비공개 게시글인지 확인이 어려울 때도 아주 편리한 버튼을 넣어주도록 하겠습니다. 게시글 비공개 처리 버튼 게시글을 비공개 처리하기 위해서 원래는 아래와 같이 한 단계를 더 거쳐야 했습니다. 저는 이 방법이 부정적 경험이라고 생각이 되었습니다. 바로 한번 적용시켜 보죠! HTML 스킨 편집 (티스토리) 스킨 편집 기초 상식 안녕하세요. 제 블로그에는 티스토리에서 스킨을 적용하기 위해 다양한 포스팅이 존재합니다. 이번에는 티스토리에서 어떻게 스킨을 어떻게 편집하는지 아주 간단하게 알아보려고.. TIP/CSS & Tistory 2022. 6. 11.

• 

  (티스토리)블로그에 깃허브 댓글을 달아보자 - utterances 저번 게시글에서 디스커스 소셜 SNS 댓글을 달아 댓글을 작성할 수 있는 방법에 대해 알아봤었는데, 오늘은 기술 블로그 개발자들이 자주 사용하고 있는 깃허브 댓글 utterances를 적용하는 방법에 대해 알아보도록 하겠습니다. utterances utterances는 마크다운 형식을 댓글에서도 지원해주고 있기 때문에 조금 더 자유롭고 광범위하게 소통이 가능하다는 장점을 가지고 있습니다. 적용 방법 깃허브 repository 생성 우선 깃허브 홈페이지에서 로그인 후, 상단바의 + 아이콘을 클릭해 new repository 를 눌러줍니다. 생성창에서 Repository name을 tistoryComments로 정해줬고, Public를 선택 후 하단 Create repository를 클릭해 새로운 repos.. TIP/CSS & Tistory 2022. 6. 11.

• 

  (티스토리) 포스팅에 인라인 코드블럭(inline code block) 적용 방법 및 팁! 티스토리에서 블로깅을 하다 보면 다음과 같은 코드들을 볼 수 있는데, 이게 코드 블럭도 아니고 그렇다고 텍스트도 아닌 신기한 박스를 보신 적이 있으실 거예요. 이 박스가 바로 인라인 코드블럭(inline code block) 이라는 네이밍을 한 요소입니다. 오늘은 인라인 코드블럭을 티스토리에서 사용하는 방법에대해 알아보겠습니다. 인라인 코드블럭 사용방법 위와 같이 코드를 강조하는 방법인 인라인 코드블럭을 사용하기 위해서는 에디터의 기본모드가 아닌 마크다운 또는 HTML에서 사용해야만 합니다. 각각의 사용법과 편의성이 다르니 하나씩 알아보도록 하죠! HTML HTML 편집기에서는 원하는 텍스트 앞과 뒤에 와 로 감싸주면 인라인 코드블럭을 사용할 수 있습니다. inline codeblock 저는 주로 HTM.. TIP/CSS & Tistory 2022. 3. 22.

• 

  (티스토리)블로그에 소셜 SNS 댓글을 달아보자. - 디스커스(disqus) 블로그에 티스토리 댓글뿐만 아니라 소셜 SNS 댓글을 달아 댓글을 작성할 수 있는 선택지를 늘려줄 수 있습니다. 소셜댓글의 종류는 사실 다양한데, 지금 까지 사용해오면서 가장 만족하고 스킨에 디자인도 위화감 없는 디스커스(disqus)에 대해 알아볼까 합니다. 디스커스 설정 방법 디스커스(disqus)를 티스토리에 등록하기 위해서는 몇 가지 단계가 필요합니다. 회원가입 먼저, 디스커스 홈페이지에 들어가서 회원가입을 진행해주셔야 합니다. 메인 페이지에 GET STARTED라는 버튼을 눌러주세요. 그리고 구글, 페이스북, 트위터 등으로 아주 쉽게 회원가입이 가능합니다. 정보를 입력하면 아래와 같은 화면이 나오는데 여기서 I want to install Disqus on my site를 눌러주세요. 이제 본인.. TIP/CSS & Tistory 2022. 3. 22.

• 

  (티스토리) 모든 포스팅 아래에 인스타 피드 고정 및 사이즈 조절 방법 (인스타 공유) 오늘은 티스토리의 모든 본문(포스팅) 아래에 인스타 피드를 고정시키는 방법에 대해 알아보고, 중앙 정렬과 가로 사이즈 조절하는 방법까지 알아보도록 하겠습니다. 만약 티스토리 스킨 편집에 대한 기초 지식이 없으시다면 아래 글을 먼저 읽고 와주세요! (티스토리) 스킨 편집 기초 상식 안녕하세요. 제 블로그에는 티스토리에서 스킨을 적용하기 위해 다양한 포스팅이 존재합니다. 이번에는 티스토리에서 어떻게 스킨을 어떻게 편집하는지 아주 간단하게 알아보려고 합니다. 스 seons-dev.tistory.com 인스타그램 피드 모든 게시글 고정 방법 사전 작업 먼저 티스토리 스킨 편집에서 본문 치환자를 찾아줘야 합니다. 본문 아래에 인스타 피드를 추가하기 위해서이겠죠?! HTML에서 Ctrl + F로 를 검색하면 바로 .. TIP/CSS & Tistory 2022. 3. 20.

• 

  포스팅을 할 때 사진을 극적으로 줄이는 완벽한 방법! WebP (단순 용량 압축 X ) 오늘은 티스토리나 웹사이트에 포스팅을 작성할 때 사진을 많이 사용하게 되는데, 게시글의 속도가 느려지며 구글 SEO(검색 엔진 최적화) 적으로 굉장한 마이너스를 받게 되며 구글 상단 노출의 기회를 놓칠 수 있습니다. 그렇기 때문에 포스팅을 하기 전 사진의 용량을 줄이는 작업을 필수적으로 하시는 게 좋습니다. 보통의 방식은 PNG 나 JPG 같은 파일을 압축해 용량을 줄이는 방법을 사용할 수 도 있지만, 오늘은 WebP라는 파일에 대해 알아보며 이 파일들의 형식과 압축률에 대해 비교해보려 합니다. JPG & PNG & WebP 란? JPG, PNG 차이 및 장단점 JPG/JPEG는 PNG 파일에 비해 압축률이 뛰어납니다. 하지만 아래 처리과정을 보면 어떠한 단점이 있는지 알 수 있습니다. 쉽게 말해 말하면.. TIP/CSS & Tistory 2022. 3. 19.

• 

  (티스토리) 미넴스킨 - BGM 넣는 방법 및 스킨을 업데이트해도 스킨 설정 유지하는 방법! 오늘은 제 블로그에서 사용하고 있는 미넴 스킨의 기능 중에 하나인 BGM 넣는 방법에 대해 자세히 알려드리려고 합니다. 그리고, 만약 미넴 스킨의 버전이 업데이트되어 새롭게 적용할 때, 스킨 편집 부분의 설정 내용이 초기 설정으로 돌아가서 BGM 을 포함해 직접 설정한 값을 다시 넣어야 되는 경우가 있습니다. 어떻게 이 값을 본인의 값으로 저장할 수 있는지도 알려드리겠습니다. 미넴 스킨 BGM 적용 방법 사실 미넴 스킨 BGM 변경 방법에 대해서는 아미넴님의 블로그에 이미 포스팅이 되어있습니다. 하지만 글을 확인하지 못하신 분들이 꽤 있으신 거 같더라구요..! 그래서 어떻게 설정해야 하는지 설명드리겠습니다. BGM 업로드 미넴 스킨에 BGM을 넣기 위해서는 당연히 .mp3 파일을 업로드해야 합니다. 해당.. TIP/CSS & Tistory 2022. 3. 19.

• 

  (티스토리) 스킨 편집 자바스크립트 및 CSS가 많을 때 한 파일로 몰아넣는 방법! 이번에는 티스토리의 스킨에서 HTML부분 자바스크립트 및 CSS가 너무 길 거나 많을 때, HTML 부분을 깔끔하게 한파일로 넣고 호출하는 방법까지 알아보도록 하겠습니다. HTML의 자바스크립트가 너무 많거나 중복되면 구글 SEO에 안 좋기 때문에 해당 방법을 사용하는 것을 추천드립니다. 만약 티스토리 스킨 편집에 대한 기초 지식이 없으시다면 아래 글을 먼저 읽고 와주세요! (티스토리) 스킨 편집 기초 상식 안녕하세요. 제 블로그에는 티스토리에서 스킨을 적용하기 위해 다양한 포스팅이 존재합니다. 이번에는 티스토리에서 어떻게 스킨을 어떻게 편집하는지 아주 간단하게 알아보려고 합니다. 스 seons-dev.tistory.com 스킨 편집 자바스크립트 및 CSS 정리 방법 파일 생성 HTML에서 자바스크립트를.. TIP/CSS & Tistory 2022. 3. 17.

• 

  (티스토리) 카테고리 새 글 발생 시 나오는 NEW 아이콘 변경하는 방법 - 아이콘 첨부! 티스토리에서 새 글을 발행하면 카테고리에 아이콘이 생기는 것을 확인할 수 있는데, 이번에는 이 애매하고 예쁘지도 않은 아이콘을 원하는 이미지로 변경하는 방법을 알아볼까 합니다. 직접 일러스트레이트로 따와서 SVG 파일로 변경한 이미지 파일도 첨부합니다! 많은 분들이 이미 알고 계신 줄 알았는데 댓글로 요청해주셔서 이번 기회에 포스팅해봅니다! 만약 티스토리 스킨 편집에 대한 기초 지식이 없으시다면 아래 글을 먼저 읽고 와주세요! (티스토리) 스킨 편집 기초 상식 안녕하세요. 제 블로그에는 티스토리에서 스킨을 적용하기 위해 다양한 포스팅이 존재합니다. 이번에는 티스토리에서 어떻게 스킨을 어떻게 편집하는지 아주 간단하게 알아보려고 합니다. 스 seons-dev.tistory.com 카테고리 새 글 아이콘 변경.. TIP/CSS & Tistory 2022. 3. 16.

• 

  (티스토리) 스킨 편집 기초 상식 제 블로그에는 티스토리에서 스킨을 적용하기 위해 다양한 포스팅이 존재합니다. 이번에는 티스토리에서 어떻게 스킨을 어떻게 편집하는지 아주 간단하게 알아보려고 합니다. 스킨 편집 기초 상식 스킨 편집 경로 티스토리에서 스킨을 편집하기 위해서는 관리 페이지로 가야 합니다. 관리 페이지로 가는 방법은 다양한데 아래와 같이 할 수 있습니다. https://본인의 티스토리 주소.tistory.com/manage 본인의 티스토리에서 단축키 Q 블로그 상단 프로필 또는 적용된 스킨에서 '관리' 버튼 클릭 관리 페이지에 오셨다면, 왼쪽 박스에서 꾸미기 ➜ 스킨 편집 ➜ html 편집을 차례로 눌러줍니다. 그러면 HTML / CSS / 파일업로드 탭이 오른쪽에, 왼쪽에는 프리뷰 창이 나오게 됩니다. HTML HTML은 블.. TIP/CSS & Tistory 2022. 3. 15.

• 

  (티스토리) 사이드바 카테고리 접기/펼치기 버튼 구현하기! 오늘은 사이드바 카테고리 접기 및 펼치기 기능을 구현하면서 어떻게 적용시키는지 알아보도록 하겠습니다. 사이드바 카테고리 접기 및 펼치기 버튼 구현 티스토리에서 기본적으로 제공하는 카테고리는 보통 펼쳐진 상태입니다. 만약 본인이 사용하는 스킨에 카테고리 접기 및 펼치기 스크립트 기능이 없다면 카테고리의 서브메뉴가 길어지면 길어질수록 가독성도 그렇고 상당히 보기 지저분해지는 경향이 있습니다. 만약 티스토리 스킨편집에 대한 기초 지식이 없으시다면 아래 글을 먼저 읽고 와주세요! (티스토리) 스킨 편집 기초 상식 안녕하세요. 제 블로그에는 티스토리에서 스킨을 적용하기 위해 다양한 포스팅이 존재합니다. 이번에는 티스토리에서 어떻게 스킨을 어떻게 편집하는지 아주 간단하게 알아보려고 합니다. 스 seons-dev.t.. TIP/CSS & Tistory 2022. 3. 15.