안녕하세요! 친절한효자손입니다. 새해를 맞이해서 뭔가 의미있고 쓰임새 좋은 친효애드온을 한 번 만들어보자고 생각했고 바로 실행에 옮겨서 금방 완성 되었습니다. To Do List 라고 하죠? 그렇습니다. 현재 공지사항에 2023 투 두 리스트를 만들어 게시를 해 둔 상태입니다. 아래에 링크를 걸어두겠습니다. https://rgy0409.tistory.com/notice/5011 친절한효자손 2023년 To Do List 2023 To Do List 친효스킨 - 아트북 (티스토리 두번째 반응형 스킨) 만들기 이모티콘 두번째 작품 제출하기 현실에서 써먹는 매직카드 30장 그리기 몸무게 85kg 달성하기 브런치 구독자 50명 만들기 다 rgy0409.tistory.com 그러면 어떻게 세팅하는지 알아보겠습니다..
안녕하세요. 친절한효자손입니다. 진짜 오랜만에 친효애드온 작업을 진행한 것 같습니다. 게으른 성격 탓에 이걸 미루고 미뤄왔었지요. 어느날 이대로 계속 미뤘다가는 진짜 영영 못 할 것 같다는 생각에 느닷없이 행동으로 옮기게 됩니다. 그런데 중간에 한 번 시행착오가 있었습니다. 일단 이 부분은 차차 이야기하기로 하고 어떤 히스토리를 말하는건지 예시를 통해 직접 확인해 보시기 바랍니다. 예시 살펴보기 친절한효자손 히스토리 네이버 블로그 시작 2011.?? 자료 저장용으로 티스토리 개설 2012.04 네이버 블로그 하루 방문자 20,000명 달성 2012.06 돈 되는 대로 대가성 글을 작성하다 결국 블로그 저품질 발생 2012.08 삼성전자서비 rgy0409.tistory.com 현재 제 티스토리 공지글로 히..
안녕하세요. 친절한효자손입니다. 진짜 오랜만에 본문 중간 링크 스타일을 만들어 보았습니다. 그동안 게을렀던 자신을 탓하고 반성하며 이따금씩 이런 스타일들을 틈나는대로 만들어 보기로 다짐합니다. 완성된 모습은 다음과 같습니다. 아래의 버튼에 마우스를 올려보세요. See the Pen 친효애드온 : 본문 링크 (마크10) by rgy0409 (@rgy0409) on CodePen. 기본적으로 짙은 회색 박스안에 텍스트가 들어있는 형태의 링크 버튼입니다. 이 링크 버튼은 문단 사이에 있는 특정 단어에 링크를 걸 때는 사용하기가 부적합합니다. 상/하/좌/우로 기본 패딩값이 무려 20px이나 적용되기 때문입니다. 따로 링크 텍스트를 만들 때 적합합니다. 그러면 세팅부터 사용 방법까지 알아보겠습니다. 먼저 아래의 ..
스마트폰으로 인터넷 정보를 스크랩하는데 스크랩된 이미지 아래 부분에 웹사이트라는 문장이 표시가 되는것을 목격했습니다. 분명 캡쳐할때는 이런 글씨가 없었는데 싶었고 다시 한 번 해당 웹문서를 캡처 시도하며 체크했는데 역시 없습니다. 안드로이드에 추가된 기능인지는 모르겠으나 현재 사용중인 갤럭시노트20 울트라는 웹문서 캡쳐 시 URL 정보가 이미지에 남습니다. 그래서 캡쳐된 이미지를 갤러리에서 확인 시 북마크처럼 편리하게 해당 웹페이지를 방문하는 기능이 있습니다. 여기에서 힌트를 얻었습니다. 티스토리 본문에도 링크를 걸어서 마우스 오버 시 "바로가기" 표시가 되도록 만들고 싶었습니다. 왠지 가능해 보였습니다. 태그만 제어하면 될 것 같았습니다. 바로 시도해보았고 마침내 구현에 성공했습니다. 위의 이미지에 마..
본문의 친효스킨 전용 태그 모듈 스타일을 따로 설치가 가능한지에 대한 문의 댓글이 있었습니다. 생각해보니 태그 모듈만 따로 만들어 배포는 하지 않았었군요. 그러므로 즉시 착수에 옮겨봅니다. 본문 하단의 태그 부분으로 스타일은 친효스킨을 따릅니다. 타스킨에서도 적용 가능합니다. 파일 다운로드 먼저 아래의 첨부파일을 다운로드 받습니다. 텍스트 파일을 열어보시면 HTML 태그와 CSS 스타일 코드가 들어있습니다. 다음은 세팅 방법입니다. HTML 세팅 먼저 뼈대에 해당하는 HTML 태그를 사용하고자 하는 스킨에 설치해야 합니다. TAG : 위의 태그는 친효스킨 본문에서 사용하고 있는 태그 모듈 코드입니다. 이것을 현재 사용하는 스킨의 본문 아래에 붙여넣어야 합니다. 그런데 문제가 있죠? 그렇습니다. 본문 아래..
안녕하세요. 친절한효자손입니다. 본문 중간에 삽입하는 수동 링크 스타일을 새로 만들어봤습니다. 아마 지난번 유튜브 실시간 스트리밍을 보신 분이시라면 이걸 만드는 과정을 라이브로 보셨을 거에요. 거의 한시간만에 완성한 애드온이지요. 스타일은 코드펜을 참고해서 만들었습니다. 미리보기 먼저 스타일을 미리 만나보시겠습니다. 아래의 링크에 마우스를 올려보시기 바랍니다. 그리고 변화되는 애니메이션을 직접 목격해 보세요. 짧은 텍스트의 링크글 이것은 어느정도 텍스트의 양이 제법 되는 본문 중간 링크글 와우! 이건 정말이지 말로 표현할 수 없을 정도로 텍스트의 양이 대단히 길기 때문에 두 줄로 내려가버리는 상당히 많은 텍스트의 양이 담긴 본문 중간 링크글 이런 느낌의 본문 중간 수동 링크글 스타일입니다. 보시면 아시겠..
친효애드온 중 하나인 커스텀 DIV 박스 활용에 대해서 좀 더 자세한 설명 방법이 필요할 것 같습니다. 뭐 대단한건 아니구요. 색상에 대해서 변경하는 방법을 알려드리면 여러분들께서 직접 원하는 색을 선택해서 적용을 할 수 있을 것 같습니다. 색이란게 자꾸 보면 질리잖아요? 따라서 사용자가 그때 그때 원하는 색을 사용함으로서 티스토리를 운영하는데 약간의 즐거움이라도 충족한다면 좋지 않을까 싶습니다. 커스텀 DIV 박스란? 친효스킨 최신버전에는 지금까지 개발한 친효애드온이 기본적으로 세팅되어 있습니다. 사용자는 그저 이것을 꺼내 사용하기만 하면 되는 것입니다. 그러나 의외로 이 기능을 모르고 친효스킨을 사용하시는 분들이 많습니다. 개인적으로 정말 많이 사용하는 애드온 중 하나인 커스텀 DIV 박스! 이 내용..
이 방법은 기존 DIV 커스텀 박스 만들기와 같습니다. 단지 클래스명만 다를 뿐 입니다. 그래도 처음부터 설명드리는게 훨씬 이해하시기 수월할테니 꼼꼼히 차근차근 안내해 드리겠습니다. 아래의 글은 그냥 참고만 하시기 바랍니다. 친효애드온 : 커스텀 DIV 박스 모듈 (마크1) CSS 세팅하기 기본적으로 친효스킨 최신 버전을 사용하시면 CSS는 세팅이 되어 있습니다. 따라서 본문의 내용은 친효스킨을 사용하지 않는 분들을 기준으로 설명되어 있음을 밝힙니다. 먼저 아래의 첨부파일을 다운로드 해주시기 바랍니다. 첨부파일의 텍스트 문서를 열어보시면 다음의 CSS 코드들이 들어있습니다. .rgyBG2, .rgyBG3, .rgyBG4, .rgyBG5 { margin: 10px 0; padding: 10px 15px; ..
혹시 폰트어썸도 애니메이션이 적용이 될까 싶어서 호기심에 만들어본 친효애드온 입니다. 결론적으로 말씀드리자면 되는군요! 폰트 어썸도 애니메이션을 구간별로 적용 시켜서 마치 변화하는 듯한 애니메이션 효과를 연출 할 수 있습니다. 여기에서 애니메이션이란 폰트어썸에서 제공하는 애니메이션이 아닌, 키프레임을 사용하는 경우를 말합니다. 말이 길었죠? 바로 세팅 후 사용해 봅시다. 미리보기 아래는 미리보기 예시 입니다. 마우스도 올려보시기 바랍니다. 짧은 링크글 텍스트가 제법 중간 사이즈 정도 되는 링크글 이것은 짧은 글의 몇 배 이상이 되는, 그러니까 텍스트가 꽤 긴 사이즈를 자랑하는, 본문 가로 사이즈를 넘어서는 그런 링크글 기본 애니메이션은 링크 글 앞에 배터리가 차오르는 동작이 들어있습니다. 마우스를 올려 ..
본문 중간에 삽입하는 링크용 친효애드온 스타일 마크7 입니다. 그냥 오늘 갑자기 이렇게 한번 만들어보고 싶다는 생각이 강하게 느껴져서 바로 작업했습니다. 사선으로 넣어보면 어떨까 싶었고 그 결과는 이렇게 완성되었습니다. 미리보기 짧은 링크글 텍스트가 제법 중간 사이즈 정도 되는 링크글 이것은 짧은 글의 몇 배 이상이 되는, 그러니까 텍스트가 꽤 긴 사이즈를 자랑하는, 본문 가로 사이즈를 넘어서는 그런 링크글 이렇게 됩니다. 별 다른 특징은 없고 애니메이션은 그냥 마우스를 올렸을 때 텍스트 색상이 바뀌는게 전부입니다. 요즘에는 그냥 밋밋한 스타일이 좋더라구요. 튜닝의 최종 종착지는 순정이라는 말이 정말 진리인 것 같습니다. 아무리 이것 저것 꾸며도 역시 심플한게 최고인 것 같아요. 심플 이즈 베스트 입니다..
원래 자주 들어가지도 않는데, 오랜만에 심심해서 다른 분들은 무슨 콘텐츠를 생산하고 있는지 벤치마킹도 해볼겸 한번 들어가봤습니다. 하지만 역시... 이곳도 슬슬 오염이 되어가고 있더군요. 포럼의 제 기능은 해당 카테고리에 대해서 질문이나 토론 등을 왕성하게 진행해야 하는 공간 아니겠습니까? 근데 서로 맞구독이니 맞댓글이니 이런 내용들이 점차 늘어나기 시작하고 있습니다. 심지어 서로 광고 클릭해주면서 수익을 도모하자는 이야기까지 오고갑니다. 대체 티스토리 포럼은 언제부터 이렇게 오염되기 시작했을까요? 원인은 수익! 쵸코파이랑 같은 상황입니다. 그렇습니다. 말하지 않아도 알아요. 이건 100% 티스토리를 수익으로서 운영하는 사람들의 소행입니다. 일등공신은 유튜브죠. 유튜브에서 티스토리를 알게 된 분들이 모두..
오늘 확인해보니 친효애드온에 대한 사용 방법을 따로 글로 작성하지는 않았다는걸 확인했습니다. 매번 사용 방법에 대해 언급하기가 대단히 귀찮기 때문에 아예 이렇게 공식적으로 문서화를 해두면 저도 편하고 사용하시는 분들도 일괄적으로 배울 수 있으니까 일석이조라는 생각이 들었습니다. 거두절미하고 바로 시작하겠습니다. 친효애드온이란? 스타크래프트 테란 종족에 있는 Add-On(애드온)에서 힌트를 얻어서 개발되었습니다. 해당 건물의 특수 기능들을 사용할 수 있게 도와주는 애드온은 매우 유용한 기능이죠. 친효애드온 또한 친효스킨을 좀 더 개성있게 꾸밀 수 있는 일종의 부가서비스 같은 개념 입니다. 굳이 사용하지 않아도 상관 없지만 가독성이나 개성 부분을 좀 더 살리고 싶을 때 종종 이용하는 기능 입니다. 쉽게 말해..
스타일들이 통일감은 전혀 없지만 그냥 만들고 싶은대로 만드는 중 입니다. 이 중에서 마음에 드는 스타일을 골라 사용하시면 됩니다. 이번에도 본문 중간에 삽입하는 링크용 스타일을 연출해 보았습니다. 여섯번째 버전 입니다. 먼저 적용 예시 입니다. 짧은 제목의 링크 글 중간 사이즈 정도 되는 텍스트가 살짝 있는 제목의 링크 글 이것은 정말로 상상을 초월하는 가장 긴 사이즈를 자랑하는 제목의 링크 글이 되려고 열심히 발악하는 규모의 글 이런 스타일 입니다. 마우스를 올리면 색상이 변하면서 흔들거리는 애니메이션을 추가했습니다. CSS 세팅 먼저 아래의 첨부파일을 다운로드 받습니다. 그리고 파일을 열어줍니다. 텍스트 파일 문서 안에는 다음의 CSS 코드들이 들어 있습니다. /* 친효애드온 : 본문 중간 수동 링크..
이번에도 심심해서 본문 중간 링크용 스타일을 만들어봤습니다. 앞서 소개한 두 개가 다소 유니크한 느낌이라면 이번에는 정말 평범하게 만들었습니다. 마크1과 비슷한 컨샙의 모듈 입니다. 일단 아래에 샘플이 있으니 직접 마우스로 올려보면서 테스트해 보시기 바랍니다. 참고로 클릭해도 아무런 변화가 없습니다. 짧은 제목의 링크 글 중간 사이즈 정도 되는 텍스트가 살짝 있는 제목의 링크 글 이것은 정말로 상상을 초월하는 가장 긴 사이즈를 자랑하는 제목의 링크 글이 되려고 열심히 발악하는 규모의 글 이런 느낌의 본문 중간 링크글 입니다. 완전 단순하죠? 복잡한 스타일을 싫어하신다면 마음에 드실 것 같습니다. 저 역시 종종 이용하게 될 스타일 입니다. CSS 세팅 아래의 첨부파일을 다운로드 받습니다. 그리고 파일을 열..
본문 중간 링크글에 대한 스타일이 어느덧 네번째까지 맞이하게 되었습니다. 코딩의 세상은 참 오묘합니다. 그리고 너무나도 객관적인 영역인데 크리에이터의 입맛과 취향에 따라 그 결과물이 천지차이여서 참 신기함과 동시에 재밌기까지 합니다. 코딩하시는 분들이 이 맛에 작업하시는게 아닐까 싶습니다. 물론 그 코딩이 순수 개인의 의지냐, 아니면 돈을 벌기 위한 수단이냐에 따라 엄청난 차이가 있겠지만요. 서두가 길었습니다. 네번째 스타일을 만나보시겠습니다. 짧은 제목의 링크 글 중간 사이즈 정도 되는 텍스트가 살짝 있는 제목의 링크 글 이것은 정말로 상상을 초월하는 가장 긴 사이즈를 자랑하는 제목의 링크 글이 되려고 열심히 발악하는 규모의 글! 반드시 두 줄로 만들었어야만 하는 그 링크 글! 이런 형태의 수동 링크글..
본문 중간에 삽입하는 링크에 대한 세번째 스타일 입니다. 이번 디자인은 완전 90년대 메트로 스타일로 만들었습니다. 완전 고전 스타일의 버튼 형식 입니다. 거두절미하고 바로 예제를 살펴보겠습니다. 짧은 제목의 링크 글 중간 사이즈 정도 되는 텍스트가 살짝 있는 제목의 링크 글 이것은 정말로 상상을 초월하는 가장 긴 사이즈를 자랑하는 제목의 링크 글이 되려고 열심히 발악하는 규모의 글! 반드시 두 줄로 만들었어야만 하는 그 링크 글! 이런 스타일의 본문 중간 링크 입니다. 특징이라면 마우스를 올려도 아무 변화가 없습니다. 하지만 버튼 스타일이기 때문에 클릭을 할 때 스타일이 순간 바뀝니다. 마치 실제로 버튼이 눌리는 것 처럼 말입니다. 클래식한 버튼을 좋아하시거나 특별한 스타일의 링크글을 연출하고 싶다면 ..
본문 목차에 대한 리스트 모듈 입니다. 말 그대로 본문 분량이 많아지는 경우에 요긴하게 사용할 수 있는 모듈 입니다. 이 방법은 현재 널리 알려져있는 TOC 제이쿼리 스크립트를 이용한 방법이 아닙니다. 비록 자동은 아니지만 수동으로 넣음으로서 불필요한 스크립트를 최대한 줄여 속도를 개선했습니다. 어차피 목차라는게 본문 내용이 길어질 때 필요한 경우이고, 티스토리의 모든 문서에 대해서 목차화를 할 필요가 전혀 없다고 판단되어지기 때문에 이렇게 따로 친효애드온으로 모듈을 만들었습니다. 현재 친효스킨 다운로드 페이지와 티스토리 사용법 페이지에 해당 목차 모듈이 적용되어 있으니 한번 직접 방문하셔서 확인해 보시기 바라겠습니다. 친효스킨 다운로드 / 사용법 / 업데이트 일지 티스토리 블로그 사용법 수동으로 넣는 ..
본문 중간에 참고용으로 삽입하는 링크글에 대한 두번째 친효애드온을 만들었습니다. 기존 스타일은 밋밋해서 좀 더 색다른 변화를 주고 싶었습니다. 관련글 모듈과 살짝 비슷한 부분이 있는데, 그럼에도 불구하고 개인적으로 무척 만족스러운 모듈이라고 생각하고 있습니다. 먼저 아래의 예시를 살펴보도록 하겠습니다. 이것은 짧은 제목의 링크글 이것은 그래도 제법 중간 사이즈의 제목을 가진 링크글 이것은 지금까지 여러분들께서 듣도 보도 못한 길이의 제목을 자랑하는 매우 긴 텍스트로 이루어진 장문의 링크글 보통은 링크글을 한 개 정도 배치하지만, 만약 2개 이상의 그룹으로 배치하는 경우에도 가능합니다. 링크글 목록이 약간씩 떨어져 배치됩니다. 마우스를 올리면 왼쪽의 동그라미가 가로로 길어지는 애니메이션 효과를 연출했습니다..
포스트잇 스타일로 연출해 보았습니다. 구글링을 통해서 참고하여 그대로 응용했습니다. 본문 중간 링크 모듈과 팁박스 모듈 대신 포스트잇 모듈로 대처할 수 있을 것으로 기대합니다. 사용 범위가 꽤 넓을 것 같습니다. 친효스킨에서 가장 정상작동하며 타스킨에서는 스타일에 오류가 발생할 수 있습니다. 참고하시기 바랍니다. 먼저 아래는 예시 입니다. 이것은 아주 간단한 예시의 글 제목 입니다. 이렇게 텍스트가 다소 긴 제목의 글이 있다고 하더라도 아무 문제 없이 다음 줄로 넘어가도록 설계가 되어 있는데, 고정 크기로 할지... 그냥 길게 늘어나게 할지 고민이 많습니다. 이것은 아주 간단한 예시의 글 제목 입니다.이렇게 텍스트가 다소 긴 제목의 글이 있다고 하더라도 아무 문제 없이 다음 줄로 넘어가도록 설계가 되어 ..
친효스킨의 본문 끝자락에 들어가는 관련글(참고글) 모듈 입니다. 벌써 마크5로서 다섯번째 버전입니다. 기본 스타일은 모두 같지만 마우스를 올리면 나타나는 CSS 애니메이션 효과들이 모듈마다 다릅니다. 본인이 원하는 모듈을 골라서 사용하면 됩니다. 먼저 관련글 모듈을 적용하는 방법에 대해서 숙지하시기 바랍니다. 본문에서는 CSS 파일과 간단한 설명만 언급하고 있습니다. 친효애드온: 관련글 참고글 모듈 (마크1) 그리고 아래는 예시 입니다. 마우스를 올려 보시기 바랍니다. 스마트폰에서는 아마 확인이 잘 어려울 겁니다. 짧은 글 제목이것은 적당한 중간 정도 되는 괜찮고 신기한 글 제목이것은 정말이지 대단히 긴 제목을 소유한 그런 글의 링크라고 할 수 있겠다고 말할 수 있을 듯 하면서도 꽤 길게 보여지기 위해 ..
오랜만에 친효애드온을 하나 만들어 봤습니다. 관련글 모듈입니다. 이번이 네번째 버전이 되겠습니다. 어떤 스타일을 가지고 있는지 한번 살펴보도록 하겠습니다. 아래에 예시로 올려봤습니다. 마우스를 한 번 올려보시기 바랍니다. 짧은 제목의 글제법 중간 쯤 되는 제목의 글 이라고 할 수 있지 않을까 싶은 글이것은 정말이지 실로 어마무시하게 긴 길이를 자랑하는 제목의 글이 되시겠습니다람쥐며느리모컨트롤러브레이드라이아이스케이트라이앵글라이더 기본 스타일은 기존과 동일합니다. 하지만 마우스를 올려보시면 입체적으로 해당 링크가 살짝 튀어나온 것 처럼 보여지게 연출을 해 봤습니다. 개성 넘치지 않습니까? 예전부터 이런 스타일로도 한번 만들어봐야겠다고 생각했는데 계획대로 잘 된 것 같아서 기분이 좋습니다. 이제 세팅을 해봅시..
친효애드온 중에서 관련글 마크1에 대한 업데이트 소식 입니다. 한 개의 글에 여러개의 관련글 스타일을 연달아 입력할 때 좀 더 구분이 쉽게 될 수 있도록 소제목을 넣을 수 있는 기능을 추가했습니다. 결과물에 대한 예시를 아래에 바로 출력해 보겠습니다. 관련글 소제목 링크1링크2 보시는 것 처럼 "관련글 소제목" 이라고 되어 있는 부분처럼 관련글 모듈을 여러개 사용할 때 구별이 쉽게 되도록 이렇게 소제목을 입력할 수 있습니다. 먼저 세팅 방법입니다. CSS아래의 첨부파일을 다운로드 받으셔서 기존 친효애드온 첨부파일 마크1 CSS 스타일에 추가해 놓으시면 됩니다. 아직 첨부파일 마크1을 적용하시기 전 이라면, 먼저 적용부터 진행해 주시기 바랍니다. 사용 방법은 관련글 사용 방법과 거의 동일합니다. HTML ..
친효애드온 : 본문 공유 모듈 마크1에 대한 업데이트 내용 입니다. 따라서 아래의 글을 먼저 읽어보시고 본문을 살펴보시면 많은 도움이 될 것 입니다. 친효스킨에 적용하는 방법을 기준으로 설명 드립니다. 스크립트 세팅 티스토리 스킨의 HTML 바로 위에 삽입했습니다. 카카오톡 아이콘 업로드 아래에 카카오톡 아이콘 이미지 파일이 있습니다. 다운 받아서 사용하면 됩니다. 만약 이미지가 마음에 들지 않으시면 구글에서 이미지 검색을 하시면 많이 나옵니다. 그 중 하나를 찾아서 사용하시면 되는데 파일명은 반드시 첨부파일과 똑같이 바꿔 주시기 바랍니다. 다운로드 완료 후 압축을 푸시면 이미지 파일이 생성됩니다. 해당 파일을 스킨편집에 가셔서 파일업로드 항목에 올려주시면 됩니다. 이렇게 업로드 완료 후 적용 버튼을 눌..
스크립트를 써서 출력하는 Syntaxhighlighter 코드는 로딩이 다소 오래 걸려서 포스팅 출력 시간이 지연됩니다. 신형 글쓰기에 있는 코드블럭은 뭔가 많이 부족합니다. 차라리 그럴바에 그냥 직접 DIV를 꾸며서 사용하자고 생각했고 바로 실천에 옮겼습니다. HTML, CSS, 자바스크립트 등의 코드를 직관적으로 표현하고자 할 때 사용하면 요긴합니다. 코드 뿐만 아니라 뭔가 강조하고자 하는 내용에 대한 텍스트를 작성할 때에도 좋습니다. 얼마든지 활용 가능한 모듈이라고 생각합니다. 백그라운드 색상도 커스텀 할 수 있어서 원하시는 색상코드를 넣고 사용하시면 됩니다. 커스텀 DIV 박스 모듈 미리보기 먼저 검정색 백그라운드 DIV 박스 입니다. .rgyBG { margin: 10px 0; padding: ..
지난번 친효애드온 관련글 마크2를 만들면서 영감을 얻었습니다. 생각난김에 바로 코딩을 시작했고 그 결과 훌륭하게 완성시켰습니다. 본문 끝 부분에 관련글을 넣을 때 사용하시면 되는 모듈 입니다. 친효스킨과 잘 어울립니다. 뿐만 아니라 타 스킨에서도 잘 적용이 될 것입니다. 현재 이 글의 맨 아래에 보시면 관련글이 있는데 해당 스타일대로 출력 됩니다. 참고하시기 바랍니다. CSS 세팅 먼저 스타일부터 정의합니다. 자신의 스킨 편집모드에 있는 CSS 항목으로 들어가셔서 아래의 첨부파일안의 모든 내용을 빈 공간을 확보하여 그대로 붙여넣기를 해줍니다. 어디에 붙여넣기를 하는지 자세히 안내해 드리겠습니다. 이렇게 빈 공간을 엔터로 확보하신다음 저곳에 붙여넣기 하시면 됩니다. 위의 스크린샷 이미지는 예시 입니다. 사..
기존 TOP 버튼이 딱 위로 올라가기 버튼 한 개만 존재하는 것이었다면 이번 마크2 버전은 좀 더 다양한 버튼을 넣어놓은 버전이라고 할 수 있습니다. 모바일용 이라기 보다는 주로 사용되는 해상도는 아마 데스크탑에서 많이 사용되지 않을까 싶습니다. 친효스킨을 기준으로 작업하였지만 다른 스킨에서도 정상 동작하도록 하였습니다. jQuery 세팅 먼저 제이쿼리 스크립트부터 세팅하도록 합니다. 자신의 티스토리 스킨 편집 모드로 들어가서 HTML의 전에 붙여넣기 하시면 됩니다. HTML 세팅 - 폰트어썸 CDN 링크 추가티스토리 스킨 편집으로 들어갑니다. HTML의 안쪽에 아래의 링크를 그대로 붙여넣기 합니다. (title 아래에 붙여넣기 진행을 추천함) 방법은 위에 설명한것과 동일합니다. 첨부파일로도 올려놓겠습니..
새로운 글쓰기 에디터 전용으로 제작해본 첨부파일 디자인 입니다. 친효스킨에서 가장 완벽하게 적용됩니다. 타 스킨에서는 약간의 변형이 일어날 수 있습니다. 이점 유의해 주시기 바랍니다. TIP 2019년 12월 9일 티스토리 모바일앱이 업데이트 되면서 CSS 첨부파일 스타일도 일부 변경이 되었습니다. 친효스킨 1.15 버전에서 오류가 있으니 여기에 있는 첨부파일로 업데이트를 진행해 주시기 바랍니다. CSS에서 새로운 글쓰기 에디터용 첨부파일 부분을 몽땅 변경해 주시면 해결 됩니다. HTML 세팅 기존 첨부파일의 태그명, 클래스명을 그대로 사용하기 때문에 HTML에서 따로 편집할 부분은 없습니다. CSS 세팅 먼저 아래의 첨부파일을 한번 살펴봐 주시기 바랍니다. 이런 스타일로 출력됩니다. 그리고 다운로드 받..
예전에 올렸던 TOP버튼 마크2의 업그레이드 버전 입니다. 이번에는 마우스를 가져다 올리면 왼쪽에 해당 아이콘에 대한 설명 말풍선이 나타나는 기능입니다. 대단한 기능이 추가된건 아닙니다. 단지 말풍선이 한번 더 옆으로 팝업되는 기능이 추가되었을 뿐 입니다. 거추장스러운 디자인이 싫으신 분들은 그냥 마크2 버전을 사용하시면 되겠으며, 이번 버전이 마음에 드신다면 마크3를 적용하시기 바랍니다. 친효스킨 v1.14 이상에서는 마크3 버전으로 기본 적용되어 있습니다. 아래는 예시 입니다. See the Pen 친효애드온 : TOP버튼 (마크3) by rgy0409 (@rgy0409) on CodePen. 아이콘에 마우스 포인터를 올려보시면 왼쪽으로 설명 말풍선이 나타나는것을 확인하실 수 있습니다. 적용 방법은 ..
이번 친효애드온은 카카오톡 플러스 1:1채팅에 대한 내용 입니다. 카카오톡 플러스를 보통 카톡플러스라고도 부르기도 합니다. 카톡플러스는 비즈니스 용도의 카카오톡 이라고 생각하시면 됩니다. 이 기능은 카카오톡에서 실제로 제공하고 있는 기능으로서 다양한 스타일과 기능들을 추가해서 사용자의 편의성에 많은 신경을 쓰고 있습니다. 그중에서도 카톡플러스 채팅 아이콘을 티스토리 사이드바에 넣음으로서 블로그 주인과 원활한 소통을 하는데 유리하게 만들 수 있습니다. 보통 블로그로 비즈니스를 하시는 분들에게 요긴할 것 같습니다. CSS 세팅하기 우선 CSS부터 설정하도록 합니다. 순서는 관계 없습니다. HTML이 되었든, CSS가 되었든 다 완료가 되어야 정상적으로 출력이 되니까요. 자신의 티스토리 관리자 화면에서 스킨 ..
이번 친효애드온은 본문에 종종 사용하는 b태그 입니다. 이 태그는 bold의 줄임말로 말 그대로 "굵게" 라는 뜻을 가지고 있습니다. 지금 이 문장에도 세개의 b태그가 사용되었음을 육안으로 식별할 수 있습니다. 현재 b태그와 bold, 그리고 굵게 라고 하는 키워드에만 백그라운드 색상이 조금 다릅니다. 이것을 애드온으로 만들었습니다. 사용방법 티스토리 글쓰기 모드에서 위의 스크린샷 이미지에 표시된 저 아이콘을 사용해서 진행할 수 있습니다. 형광펜처럼 표현하고자 하는 키워드를 마우스로 드래그하여 블록을 잡고 그냥 저 아이콘만 한번 눌러주시면 됩니다. 그러면 HTML상에서 어떻게 표현이 될까요? 본문의 가장 첫번째 문장을 예시로 살펴보겠습니다. 이번 친효애드온은 본문에 종종 사용하는 b태그 입니다. 이 태그..