🎨 썸네일 메이커 바로가기 티스토리로 포스팅을 다~ 작성해놓고, 마지막에 썸네일을 추가하는 곳에서 항상 "멈칫" 하게 됩니다. 매번 썸네일을 만들기엔 너~무 귀찮아요... (미리캔버스? 파워포인트? 이것도 괜찮긴 하지) 이왕 만드는 김에 디자인도 예쁘면 좋으니 효율성 같은건 집어치우고 디자인에 올인했습니다 😁 유리 컨셉 글래스모피즘 디자인입니다! 최적화는 다음에 심심할때 하죠 뭐... (심심하지 않습니다) 🔥 HTML 캔버스 HTML 삽입 미리보기할 수 없는 소스 캔버스를 이용해서 배경을 출력하고, 텍스트도 입력하게 만들었습니다. 위의 코드로 각각 배경, 텍스트 캔버스를 만들어 주었습니다. HTML 삽입 미리보기할 수 없는 소스 자바스크립트는 일부분만 넣어 드릴께요. 풀 버전은 깃허브에 있습니다! [깃허..
자, 이렇게 티스토리에서는 기본 기능으로서 지도를 넣을 수 있답니다. 핀을 찍을수도 있고, 그냥 지도만 넣을 수도 있죠. 그렇지만, 이 지도는 그냥 사진에 불과합니다. 블로그에 있는 지도를 보다 보면 굳이 따로 지도에서 찾아보지 않아도 볼 수 있어 편리하죠. 그런데 이 지도가 확대, 축소, 클릭도 된다면 얼마나 좋을까요... 자, 우선 카카오맵에서 지도를 추가하고 싶은 위치를 검색해 줍니다! 핀을 클릭하고, 공유 - html 태그 복사 버튼을 눌러줍니다. 그러면 이렇게 설정창이 뜨는데, 아이콘이나 지도 크기도 바꿀 수 있답니다~ 세상 참 좋아진 것 같네요! 티스토리 글쓰기 탭에서 기본모드를 html 모드로 바꿔주고요, 아까 복사한 코드를 붙여넣어 보면, 이...이 당황스러운 박스가 나오는데, 나중에 게시..
안녕하세요 :) 이번에는 티스토리 꿀팁을 가져와 봤습니다. 오늘 포스팅은 빨리 끝날 듯 하네요. 저는 이번에 새로 개설한 제 서브 블로그 덴토리에 적용해 보도록 하겠습니다. 참고로 덴토리는 치과/치아에 대한 모든 이야기를 해 주는 블로그입니다. 관심있으신 분들 와서 보세요^^ https://dentory.tistory.com 덴토리 - 치과에 대한 모든 이야기 치과가 무서우시다고요? 치과에 대한 모든 이야기를 해 드립니다!! dentory.tistory.com 오랜만에 써보는 본론 Quest.1> 자, 우선 날씨 위젯 html을 구해야 합니다. 우리는 개발자가 아니니 어떻게 만들수도 없네요. 어떻게 하실겁니까..? Sol.1> 이미 다 준비해 놨답니다. https://booked.kr/widgets/we..
안녕하세요 :) 이번에는 티스토리 기본 스킨 중에서 Top 3를 소개해 드리려 합니다. 스킨 예쁜것도 많지만 심플 중에 심플은 당연히 기본스킨이라고 생각해요 :ㅇ 기본 스킨이 7갠가? 있는 걸로 아는데 그 중에 제 기준에서 깔끔하고 좋은 스킨을 3가지 뽑아 보도록 하겠습니다. Top 3. Letter 저는 이 스킨은 사진 블로그를 위한 스킨이라고 생각합니다. 정말 썸네일을 예쁘게 보여줄 수 있거든요. 스킨 소개를 보면, 최소한의 디자인, 깔끔한 스킨을 원하는 블로거를 위해 만들었습니다. 라고 되어있습니다. 정말 최소한의 디자인이고 뭔가 허전할 정도로 깔끔한 스킨입니다. 반응형 스킨이고요, 티스토리에서 만들었습니다. 아 참! 내일과 토요일에 저 위에 있는 2개의 미리캔버스 강좌가 오전 8시 업로드되니 참고..
안녕하세요 :D 이번에는 아주아주 간단한 html 튜토리얼을 한번 해 보려 합니다. 몇몇 분들이 스킨은 어떻게 만드냐고 저에게 여쭤보시더라고요. 저는 스킨....이라기 보다는 코드 쪽에 가깝지만 만드는 것하고 등록하는 포스팅 조만간 쓰도록 할 테니 기다려주세요~!! (구독을 하면 피드에 새 글이 뜹니다.) 자, 시작해 볼까요? 일단 티스토리 댓글창 텍스트가 뭔지 알아야 바꾸든지 말든지 하겠죠? 지금 이 포스팅이든 본인 블로그의 포스팅이든 맨 아래로 내리시면 댓글창이 있을 겁니다. 그 부분에 댓글을 입력하기 전에 "여러분의 소중한 댓글을 입력해주세요" 라고 기본적으로 설정되어 있습니다. 지금 이 포스팅을 보는 분들은 바뀌어 있을 거예요. "아 맞다! 구독" 이라고 바꿔놨습니다. 제 포스팅 마무리쯤에 자주 ..
안녕하세요 :) 스킨을 업데이트 했습니다!! 지난번에 블로그에서 눈이 내리는 눈꽃빙수 스킨을 업로드한 이후로 많은 분들이 찾아주시고 댓글도 달아주셨어요~ 1편 내용인 이전 포스팅을 참고해 주시고요, 이번에는 마우스 포인터 이펙트가 추가되었습니다. 추가로 html 코드만 넣어 주면 되니까 한번 따라 해 보세요. 꼭 티스토리 블로그가 이니라도 운영하는 웹사이트나 html 편집이 가능한 곳에 모두 적용할 수 있으니 보고 따라 해 보세요. 이번에도 간단하게 복사, 붙여넣기만으로 적용할 수 있답니다. 정말 쉬워요~ 사이트 일단 마우스 포인터 효과 코드를 복사할 수 있는 사이트를 알려드리겠습니다. http://www.mf2fm.com/rv/ RV's free DHTML and JavaScript text and g..
안녕하세요 :) 제가 이번에는 스킨을 하나 만들어 봤습니다. 스킨이라기 보다는 코드이지만 앞으로 꾸준히 개발해서 스킨까지 만들어 보도록 하겠습니다!! 소개 이 스킨은 원래 사용하던 스킨에 그대로 적용할 수 있습니다. 별다른 수정 없이 그저 ctrl+c / crtl+v로 쉽게 적용할 수 있죠 :ㅇ 이 스킨을 적용하면 블로그 홈에 들어갔을 때, 포스팅에 들어갔을 때, 새로고침을 했을 때 약 15초간 눈꽃이 내리는 효과가 보여집니다. 배경이나 컨셉 컬러를 흰색 또는 밝은 색으로 했을 때 눈꽃도 하얀색이기 때문에 눈에 크게 거슬리지 않고 은은하게 눈이 내리는 느낌을 줄 수 있다는 것이 장점입니다. 또한 눈꽃이 이미지가 아닌 텍스트로 작성되어 그 부분을 원하는 대로 얼마든지 바꿀 수 있고 눈꽃 코드를 이미지로 바..
안녕하세요 :) 제가 이것저것 블로그에 도움 될 만한 것들을 찾아보다가 링크 하나만 걸어도 다양한 링크들을 걸 수 있는 신기한 서비스를 발견해서 이렇게 알려드리려 합니다!! (●'◡'●) 여러분들도 보고 차근차근 따라해보세요. 회원가입부터 사용법 가지 알려드릴게요~ #프로필링크 #인스타그램 #블로그 입장 https://prfl.link/ prfl.link - 프로필링크 세상에서 가장 예쁜 링크 연결 서비스. SNS, 쇼핑몰, 포트폴리오 등 여러 링크를 모아서 보여주고 싶을 때, 프로필링크를 사용해보세요. prfl.link 자, 우선 이 링크를 따라 프로필 링크 사이트로 들어가 주세요. 시작이 반이라고 하잖아요~ 이미 반 성공했습니다 ^^ 들어가 주시면 이런 예쁜 페이지가 나옵니다. 개인적으로 제가 좋아하..
안녕하세요 :) 오늘은 처음으로!! html 강좌를 해 보려 합니다. :ㅇ 첫 강좌이니 기본 기능을 알아보고 기본 기능만으로 이미지를 삽입하고 이미지에 링크를 걸어 보도록 하겠습니다. 자 우선 html은 head / body로 이루어져 있고 또 나누면 div나 각 구문들로 나눠집니다. html 코드를 작성하는 방법을 알아봅시다. 간단히 알려드리기 위해 앞에 쓰는 몇몇 head 구문은 작성하지 않았습니다. 오늘 이미지 링크에 필요한 img, a, div 에 대해 알려 드리겠습니다. div div 는 division의 약자입니다. division은 한글로 번역하면 나누기, 분할, 분배.. 뭐 이렇습니다. div는 말 그대로 구역을 '나누어 주는' 역할을 합니다. img img는 이미지를 넣을 수 있는 구문입..