티스토리29 (티스토리) 모든 포스팅 아래에 인스타 피드 고정 및 사이즈 조절 방법 (인스타 공유) 오늘은 티스토리의 모든 본문(포스팅) 아래에 인스타 피드를 고정시키는 방법에 대해 알아보고, 중앙 정렬과 가로 사이즈 조절하는 방법까지 알아보도록 하겠습니다. 만약 티스토리 스킨 편집에 대한 기초 지식이 없으시다면 아래 글을 먼저 읽고 와주세요! (티스토리) 스킨 편집 기초 상식 안녕하세요. 제 블로그에는 티스토리에서 스킨을 적용하기 위해 다양한 포스팅이 존재합니다. 이번에는 티스토리에서 어떻게 스킨을 어떻게 편집하는지 아주 간단하게 알아보려고 합니다. 스 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. (기록) 로딩화면을 위해 GIF 이미지를 처음으로 직접 만들어 보았다..! 로딩 화면을 위해 GIF를 직접 만들어본 후기 티스토리를 스킨을 꾸미면서 로딩 화면 아이콘을 찾던 도중 아래 gif 이미지를 발견했는데, 나름 쓸만하다고 생각했었어요 그런데 문제점은 배경색! 이 배경색을 없애기 위해 gif 파일을 개별 파일로 뜯고, 그 뜯은 파일을 png 형식으로 바꾸고, 바꾼 png 파일을 캐릭터 하나 빼고 크롭 하고, 그 파일 120장을 전부 포토샵으로 불러와서 하나하나 배경색을 지워줬습니다. 진짜.. 개고생 했습니다. 근데 결과는 스킨이 흰색일 때는 아무런 문제가 없지만 저는 검은색을 사랑하는 사람으로서 검은 배경일 때 테두리에 하얀색 도트가 너무 많이 찍힌다는 게 너무너무너무너무 걸렸습니다. 그래도 만들었으니 사용하려고 했죠. 근데 이게 사람 마음이라는 게 한번 정 떨어지니까 바.. PLAY/잡담 2022. 3. 18. (티스토리) 스킨 편집 자바스크립트 및 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. (티스토리) 리스트 스타일 들여쓰는 방법 리스트 스타일 티스토리에는 list를 적용시킬 수 있는 , , 태그가 존재합니다. 주로 검색 엔진이 받아들이기 쉬운 태그이기 때문에 글을 마구자비로 쓰는 것보다 좋습니다. 왜냐하면 아래 예시 처럼 1. 안녕하세요. 2. 서근입니다. 로 숫자를 직접 기입하는 것보다 안녕하세요. 서근입니다. 이런 식으로 리스트 스타일을 주는 것이 웹사이트가 검색 결과에 더 잘 보이도록 최적화를 잘한다고 합니다.(SEO-검색 엔진 최적화) 리스트 사용법 보통은 순서대로 엔터 없이 글을 쓰고 드래그해서 위 메뉴의 리스트를 누른 뒤에 내용을 추가하면 됩니다. 리스트 사용방법에 대해 알아봅시다 리스트 들여 쓰는 방법 아래 예제처럼 리스트를 들여쓰는 방법은 어떻게 해야 할까요? 서근 개발노트 이름 : 서근 주제 : 스위프트 가장 간.. TIP/CSS & Tistory 2022. 2. 20. (티스토리) 코드블럭에 클립보드로 복사 버튼 추가 이번에는 블로그에 코드블럭을 넣으면서 복사버튼이 코드블럭안에 나타나 버튼을 클릭시 클립보드로 복사가 되는 스크립트를 구현하고 티스토리에 적용 시켜볼까 합니다. 만약 티스토리 스킨편집에 대한 기초 지식이 없으시다면 아래 글을 먼저 읽고 와주세요! (티스토리) 스킨 편집 기초 상식 안녕하세요. 제 블로그에는 티스토리에서 스킨을 적용하기 위해 다양한 포스팅이 존재합니다. 이번에는 티스토리에서 어떻게 스킨을 어떻게 편집하는지 아주 간단하게 알아보려고 합니다. 스 seons-dev.tistory.com 클립보드 복사 버튼 만들기 티스토리를 이용하는 많은 분들이 콘텐츠를 무단으로 복사할 수 없도록 플러그인을 사용하여 마우스 사용을 막아놓았습니다. 하지만 코드를 자주 사용하는 블로그인 경우 아주 난감합니다...! 그.. FRONT-END/CSS 2022. 1. 21. (애드센스) 두 번만에 승인된 후기 및 꿀팁 목차 블로그를 시작하고 거의 한 달 정도 됐을 때 관심도 없던 애드센스를 한번 신청해볼까 하는 마음에 이리저리 포스팅을 찾아보고 있었습니다. 여러 블로그에서 공통되게 말하는 승인받는 팁은 이러했습니다. 한 번에 승인 받는 팁 방문자수 하루에 200명 이상 구글 애널리틱스 사용 일주일에 3~4개 이상 포스팅 포스팅 최소 단어 1000~1200개 전문성을 가지고 있는 블로그 총 포스팅 100개 이상 3개월 이상 운영된 블로그 신청 이렇게 요구조건이 충족된 블로그는 애드센스 신청 후 최대 14일 후에 승인이 된다고 보면 됩니다. 일단 저는 블로그를 시작한 지 한 달 정도 된 새내기 블로거였고 그 대신 포스팅 수가 100개 정도였습니다. 물론 어떤 게시글은 1000 단어 이상이 된 포스팅도 많았고, 300단어 .. TIP/CSS & Tistory 2021. 4. 18. (티스토리) 본문에 형광펜 효과 주는 방법 본문에 형광펜 효과 주기 HTML 태그 중에는 B, I, U, S 태그가 있습니다. 글씨를 굵게 / 기울임꼴 / 밑줄 / 취소선을 표현하는 태그입니다. 티스토리 블로그에서는 이 태그를 활용하여 특정 문구를 강조하는 형광펜 효과를 낼 수 있습니다. 태그명 우선 각자의 태그 명을 알아보도록 하겠습니다. 굵게 단축키 : (윈도우) 컨트롤 + B / (맥) 커멘드 + B .tt_article_useless_p_margin>p>b 기울임꼴 단축키 : (윈도우) 컨트롤 + i / (맥) 커멘드 + i .tt_article_useless_p_margin>p>i 밑줄 단축키 : (윈도우) 컨트롤 + U / (맥) 커멘드 + U .tt_article_useless_p_margin>p>u 취소선 단축키 : (윈도우) 컨트.. FRONT-END/CSS 2021. 4. 15. (HTML/CSS/Javascript) 코드 정리해주는 사이트 모음 HTML / CSS / Javascript 코드 정리해 주는 사이트 아래 사이트를 참고하여 깔끔하고 보기좋은 코드를 정리할 수 있습니다 :) 1. ⭐️ Online JavaScript Beautifier : 사용자에게 맞게 코드를 정렬해주는 사이트 Online JavaScript beautifier HTML , formatting: Keep indent level of the tag Add one indent level Separate indentation beautifier.io 2. Cleancss : CSS 코드 정리 CSS Formatter Format your CSS to clean it up and beautify it. Make your CSS easier to read and validat.. FRONT-END/CSS 2021. 4. 15. (티스토리) 본문에 TOC 목차 넣기 Toc toc 란 toc는 table of contents를 의미하고, markdown으로 작성한 글의 header를 모아서 보여주는 용도로 사용됩니다. 제가 적용한 toc는 tocbot이고, 기본 스타일도 깔끔하지만 제 블로그 스킨에 맞게 CSS를 건드려 봤습니다. toc code 적용 방법 당연히 tistory skin을 html로 수정을 해야하기 때문에 약간의 html, javascript개발에 대한 지식이 필요합니다. 아래 각 부분을 위치에 맞게만 넣고, javascript 부분만 조금 수정을 하면 크게 문제 없이 적용 가능할 것 같습니다. 이 외에도 toc에 제목을 넣어주기 위해 tistory 기본 스킨 부분을 수정한 것도 있고, 브라우저 개발자 도구로 하나씩 찾아가면서 뜯어 고친 부분도 몇 있.. FRONT-END/CSS 2021. 4. 14. (티스토리) 마우스 오버시 썸네일이 움직이는 애니메이션효과 이번에는 마우스를 이미지에 올리면 애니메이션 효과를 가지고 좌우로 움직이는 코드를 만들어 보겠습니다. 마우스 오버 시 애니메이션 효과 우선 제가 적용한 부분은 메인화면의 썸네일 부분입니다. TIP 사용자 스킨에 따라 썸네일의 class가 다르기 때문에 크롬에서 오른쪽 마우스 클릭 후 검사를 통해 정확한 위치를 파악하는 것이 좋습니다. 제 스킨의 경우는 thumbnail이네요. 여러분들도 정확한 위치를 찾으셨다면, 우선 애니메이션을 만들어주셔야 합니다. 적용 하기 CSS /*썸네일 애니메이션*/ @keyframes post-ani { 25% { transform: rotate(2deg) scale(1.01); } 50% { transform: rotate(0deg) scale(1); } 75% { tran.. FRONT-END/CSS 2021. 4. 14. (티스토리) 사용자 테마에 따라 다크모드 적용하기 이번에는 사용자가 다크모드인지 라이트모드인지에 따라 티스토리 블로그의 스킨을 변경해보려고 합니다. 우선 제가 꾸민 화면부터 보여드릴께요 :) 라이트모드 다크모드 다크모드로 지정하면 라이트와는 다르게 색이 다르게 보이게 됩니다 :) 저는 맥에서 낮에는 라이트모드, 밤에는 다크모드로 자동으로 설정되게 해놨는데 블로그도 이방법을 사용하면 자동으로 스킨이 변경되는 방식입니다. 이것을 적용하려면 CSS 를 이해하고 계셔야 합니다. 사용 방법 /* 다크 모드 */ @media (prefers-color-scheme: dark) { #main { background-color: #555; } ... } 위 코드는 CSS에서 운영체제가 선호하는 색상 테마가 다크모드인지 감지해 다크모드 일때만 해당 코드를 실행하는 구조.. FRONT-END/CSS 2021. 4. 14. 이전 1 2 다음 한국어 (기본) English Русский 日本語 👉🏻 잠깐만요! 이 글도 한 번 보고 가세요 이전글 다음글 티스토리툴바 서근 개발노트구독하기