2022/0329

• 

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

• 

  누끼 따기 사이트 및 배경지우기 - 하얀색 테두리 삭제하는 방법 이번에는 사이트를 이용해서 누끼를 따고 배경을 지워서 얼굴만 투명 배경으로 저장하는 방법과, 포토샵을 이용해서 누끼를 따고 배경을 지우는 방법에 대해 알아보겠습니다. 또, 포토샵에서 누끼를 따면 검은 배경일 때, 하얀색 테두리가 남아있는 경우가 있는데 이 해결방법에 대해서도 알아보죠! 누끼 따기 사이트 및 배경 지우기 remove.gb 누끼를 따고 배경을 지우는 사이트는 다양합니다. 그런데 제가 자주 이용하는 사이트는 정말 간편하고 정확하게 사람 얼굴을 따줘서 제일 추천할 만한 사이트라고 생각이 됩니다. remove.gb라는 사이트는 아래와 같이 사용할 수 있습니다. 간단하게 이미지를 첨부하거나, 드래그 앤 드롭해서 업로드시켜줍니다. 그러면 자동으로 아래와 같이 복잡한 배경이라도 깔끔하게 배경을 지워주는.. ADOBE/Photoshop 2022. 3. 25.

• 

  프론트 앤드 개발자를 위한 크롬 확장 추천 기능! 세계 인구 중 약 65%가 크롬을 사용하는 것으로 알려져 있는데, 그만큼 개발들도 크롬을 선택해서 사용한다는 의미이기도 합니다. 그래서 오늘은 크롬을 많이 사용하는 개발자들이 유용하게 쓸 만한 크롬 확장 기능에 대해 소개해볼까 합니다. 참고로 크롬 확장 기능은 네이버 웨일 에서도 사용 가능합니다. 개발자를 위한 크롬 확장 추천 기능 CSSViewer (CSS 뷰어) 이 확장자는 커서로 마우스를 움직인 요소와 관련된 모든 CSS 스타일 속성을 보여줍니다. 글꼴, 색상, 포지셔닝 등 디테일이 모두 들어가있는 플로팅 패널입니다. 또, CSS를 쉽게 복사할 수 있도록 도와주는 크롬 확장 기능입니다. 내부 오픈소스는 GitHub https://github.com/miled/cssviewer 에서 확인할 수 있습니.. TIP/Etc Tip 2022. 3. 23.

• 

  (티스토리) 포스팅에 인라인 코드블럭(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.

• 

  클릭가능한 요소에 따라 변하는 커서 만드는 방법 (mix-blend-mode) 이번에는 제 블로그에도 적용되어있는 기능인데, 클릭 가능한 요소에 마우스를 올리면 커서가 작아졌다가 커지면서 대비 효과를 가지는 커서를 적용하는 방법에 대해 알아보려고 합니다. 만약 티스토리 스킨 편집에 대한 기초 지식이 없으시다면 아래 글을 먼저 읽고 와주세요! (티스토리) 스킨 편집 기초 상식 안녕하세요. 제 블로그에는 티스토리에서 스킨을 적용하기 위해 다양한 포스팅이 존재합니다. 이번에는 티스토리에서 어떻게 스킨을 어떻게 편집하는지 아주 간단하게 알아보려고 합니다. 스 seons-dev.tistory.com 따라 하기 쉬우니 본문을 꼼꼼히 읽어주셔서 진행해주세요. 커서 변경 방법 프리뷰 진행하기 앞서 어떤 식으로 보이는지 미리보기를 통해 확인해보겠습니다. 클릭이 가능하지 않은 요소 에서 가능한 요소.. FRONT-END/JAVASCRIPT 2022. 3. 21.

• 

  (티스토리) 블로그 하단에 원하는 버튼 기능 만드는 방법! (플로팅 버튼) 이번에는 블로그 하단에 원하는 기능을 넣을 수 있는 버튼을 생성하는 방법에 대해 알아보도록 하겠습니다. 이 버튼은 최하단에 고정됩니다. 이곳에 홈버튼, 방명록 버튼, 최상단으로 이동, 카카오톡 1:1 채팅 바로가기 등.. 다양한 기능을 넣을 수 있습니다. 블로그에 플로팅 버튼 만드는 방법 이 기능을 사용하기 위해서는 약간의 스킨 변경 지식이 있어야 합니다. 만약 티스토리 스킨 편집에 대한 기초 지식이 없으시다면 아래 글을 먼저 읽고 와주세요! (티스토리) 스킨 편집 기초 상식 안녕하세요. 제 블로그에는 티스토리에서 스킨을 적용하기 위해 다양한 포스팅이 존재합니다. 이번에는 티스토리에서 어떻게 스킨을 어떻게 편집하는지 아주 간단하게 알아보려고 합니다. 스 seons-dev.tistory.com HTML 사.. FRONT-END/CSS 2022. 3. 20.

• 

  우크라이나 러시아 전쟁속보 러시아군 총 1만명 전사 3월 20일 속보 러시아, 사관생도까지 투입 중? 우크라이나군의 주장으로, 현재 러시아에서 사관생도까지 투입시키고 있다고 합니다. 사관생도란 장교가 되기 위해 교육을 받고 있는 사람을 뜻하는데, 쉽게 말해사관학교(육군사관학교, 해군사관학교, 공군사관학교, 육군3사관학교, 국군간호사관학교)에 재학하는 사람들입니다. 그렇다는 것은 러시아군이 극심한 인적 자원 부족에 시달리고 있는 것으로 보입니다. 전쟁 초반부부터 공수부대 및 스페츠나츠와 같은 최정예 병력을 경보병으로 써버리는 악수를 두었기 때문에 이 정예병력들이 전무한 상황입니다. 러시아군 130명이 항명을 하다 러시아의 제20 소총 병사단에서 러시아군 130명이 항명을 하는 사태가 벌어졌다고 합니다. 현재 러시아군이 파병을 보낸 지역에 다시 병력을 귀환시.. ISSUE/Info 2022. 3. 20.

• 

  (티스토리) 모든 포스팅 아래에 인스타 피드 고정 및 사이즈 조절 방법 (인스타 공유) 오늘은 티스토리의 모든 본문(포스팅) 아래에 인스타 피드를 고정시키는 방법에 대해 알아보고, 중앙 정렬과 가로 사이즈 조절하는 방법까지 알아보도록 하겠습니다. 만약 티스토리 스킨 편집에 대한 기초 지식이 없으시다면 아래 글을 먼저 읽고 와주세요! (티스토리) 스킨 편집 기초 상식 안녕하세요. 제 블로그에는 티스토리에서 스킨을 적용하기 위해 다양한 포스팅이 존재합니다. 이번에는 티스토리에서 어떻게 스킨을 어떻게 편집하는지 아주 간단하게 알아보려고 합니다. 스 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.

• 

  (기록) 로딩화면을 위해 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.