티스토리와는 다르게 구글 블로그(Blogger)는 본문에 표를 넣는 툴이 따로 없습니다. 티스토리도 초반에는 엄청 불편했던 플랫폼이었는데 눈부신 발전을 이루었죠. 지금은 영업을 이상하게 하고 있어서 많은 이들이 떠나고 있지만 오히려 저는 괜찮습니다. 비록 애드센스 수익은 반토막이 났지만요. 그래서 구글 블로그도 열심히 관리하려고 하는 이유이기도 하고요. 전화위복이며 위기는 곧 기회이니까요. 하늘이 무너져도 정신만 바짝차리면 살 방법이... 있을 것 같습니까? 이런 말도 안 되는 비유 말고, 그냥 노력하면 반드시 돌파구는 생기기 마련! 이게 훨씬 낫군요. 구글 블로그가 아무리 불편하다 하더라도 어쨌든 오픈 소스 기반이니 표를 만드는 방법도 얼마든지 있습니다. table 태그를 써서 만들 수 있으나 이것보다..
안녕하세요! 친절한효자손입니다. 오래 기다리셨습니다. 구글 블로그용 친효스킨을 제작 완료했습니다. 허나 저도 구글 블로그는 경험을 하나 하나 해 가면서 운영하고 있다 보니 모든 기능을 다 알지는 못 합니다. 따라서 본 반응형 스킨은 일부 기능이 미구현된 상태일 수 있습니다. 이 점은 양해 바랍니다. 여러분들의 적극적인 버그 및 오류 신고가 스킨 발전에 크게 도움이 될 것입니다. 친효스킨 For 구글블로거는 현재 1.0 버전입니다. 또한 완전 무에서 시작한 스킨이 아닙니다. 구글 블로거에는 1세대 HTML 기본 스킨이 있습니다. 해당 스킨을 개조해서 만든 버전입니다. 이 점 참고해 주시기 바랍니다. 가장 기본 반응형 스킨을 개조했기 때문에 아마 스타일이 완전히 적용되지 않는 모듈은 없을 것으로 생각합니다...
구글 블로그도 유료 스킨을 결제했습니다. 도저히 무료 스킨은 가독성도 떨어지고 솔직히 엉망이어서 마음에 드는게 하나도 없었거든요. 게다가 유료 스킨을 구매한 이유가 하나 더 있는데 바로 스킨 구조를 파악하기 위해서입니다. 무료 버전은 기능 제한이 많습니다. 유료 버전으로 변경해야 모든 기능들을 다 사용할 수 있게끔 설계가 되어있습니다. 그리고 무료(데모) 버전과 유료 버전의 HTML 태그 구조 차이를 파악해보는것도 필요했습니다. 아무튼 이런 저런 이유로 유료 구매를 했습니다. 가격은 거의 만원 정도 합니다. 구글 블로거 스킨 수정도 입맛대로 https://rgy0409.blogspot.com/ 친절한효자손 취미생활 IT 제품과 새로운 프로그램 사용을 좋아하는 평범한 사람이 운영하는 공간에 잘 오셨습니다!..
친효스킨의 두 번째 버전인 친효스킨 : 아트북 반응형 스킨이 드디어 완성되었습니다. 만들어야지 생각만 하고 있다가 어느 순간 이거 계속 미뤘다가는 골로 가겠다는 느낌이 들어서 바로 작업에 착수했고 겨우 제작할 수 있었습니다. 친효스킨을 만들어본 경험이 확실히 제게는 큰 자산이 되었습니다. 티스토리의 치환자 시스템부터 인덱스 페이지의 원리까지 다 깨우친 상태라 두번째 스킨 제작은 시간 단축이 어마무시하게 되었습니다. 이 부분은 스스로에게 칭찬을 아끼지 않고 싶군요. 대견스럽습니다. 친효스킨 : 아트북 소개 기존 친효스킨의 뼈대를 어느 정도 사용은 하되 최대한 다른 테마를 제공하고 싶었습니다. 개인적으로 그림을 그리는 취미를 가지고 있습니다. 안타깝게도 현재 티스토리 스킨중에서는 그림을 그리시는 분들을 위한..
안녕하세요. 친절한효자손입니다. 드디어 친효스킨의 두번째 버전인 「친효스킨 : 아트북」 반응형 스킨이 완성되었습니다. 친효스킨2라고 하기에는 너무 밋밋해서 요즘 트랜드에 어울리기도 하고 부제목 지어주는걸 좋아해서 저도 어설프게 흉내좀 내봤습니다. 친효스킨 아트북 스킨은 아래의 테스트 티스토리에 적용시켜 두었으니 직접 육안으로 확인해 보시기 바랍니다. 정식 출시 안내 친효스킨 : 아트북은 정식 출시가 되었습니다. 아래의 링크를 방문해 주세요! 친효스킨 : 아트북 다운로드 / 사용법 / 업데이트 일지 친효스킨 : 아트북 다운로드 / 사용법 / 업데이트 일지 친효스킨의 두 번째 버전인 친효스킨 : 아트북 반응형 스킨이 드디어 완성되었습니다. 만들어야지 생각만 하고 있다가 어느 순간 이거 계속 미뤘다가는 골로 ..
안녕하십니까! 친절한효자손입니다. 2월까지 끝내려고했던 친효스킨 : 아트북 반응형 스킨의 제작은 또 한달 딜레이 되고 말았습니다. 의외로 잘 모르시는 분들이 계신데 제 성격이 굉장히 게으릅니다. 그래서 이런 결과가 나오는 것입니다. 솔직히 부지런하면 진작에 완성시켰을 스킨입니다. 이미 뼈대는 세팅이 끝났고 친효스킨을 만들어본 경험이 있으니 어디가 어떤 위치인지 파악도 끝났기에 바로 실천만 하면 되는데 이놈의 실천이 문제입니다. 겁나 게을러서... 자꾸 미뤄요. 특히 집에서는 더 안하죠. 그래서 대전에서 HTML 관련 모임도 만들어 운영하고 있습니다. 오늘은 저의 팬(?)분을 만났습니다. 사실 이분도 티스토리 스킨을 제작하고 계셔서 처음에 엄청 반가웠었죠. 그분께서 만드신 스킨이 하나 있는데 너무 마음에 ..
안녕하세요! 친절한효자손입니다. 점점 스킨의 윤곽이 잡혀가고 있습니다. 친효스킨 아트북 반응형 스킨의 댓글과 방명록에 대한 스타일 세팅이 완료되었습니다. 이제 진짜 얼마 남지 않았습니다. 커버 기능 하나만 남았군요. 완성이 코 앞입니다. 어서 완성하여 배포할 날을 학수고대하고 있습니다. 미리보기 먼저 댓글 리스트입니다. 기존 친효스킨의 말풍선 스타일이 너무 마음에 들기에 스타일을 대체로 유지하되 답글에 대한 스타일만 변경했습니다. 답글은 좀 더 직관적으로 보이게 하고 싶어서 답글 프로필의 왼쪽 상단에 뱃지를 달았습니다. 반응형으로 동작합니다. 모바일같은 가로가 좁은 화면에서는 안쪽 여백이 줄어들고 프로필 사진도 작아집니다. 폰트 크기는 변하지 않습니다. 방명록 스타일은 댓글 스타일과 동일합니다. 굳이 다..
안녕하세요. 친절한효자손입니다. 메인화면의 한 축을 담당하는 인덱스 페이지 완성했습니다. 인덱스 페이지는 검색 결과 페이지의 리스트 형태이기도 합니다. 티스토리 커버 기능 이전에 가장 기본이 되었던 메인 화면이지요. 따라서 기본 of 기본이기에 반드시 스타일을 만들어야만 하는 과정입니다. 친효스킨을 완성해본 경험이 확실히 엄청나게 도움이 되고 있습니다. 처음에는 HTML의 구조 파악부터 난관의 연속이었으나 지금은 구조는 파악했으니 스타일만 만들면 됩니다. 그렇기에 시간이 그리 오래 걸리지는 않습니다. 경험의 유무는 정말이지 엄청납니다. 이래서 경력자 우대라는 말이 나오는 것 같습니다. 미리보기 움짤로 친효스킨 아트북의 인덱스 페이지를 살펴봅시다. 인덱스 페이지는 당연히 반응형으로 동작합니다. 친효스킨과 ..
안녕하세요! 친절한효자손입니다. 발등에 불이 떨어져서 겨우 움직이기 시작한 요즘입니다. 사이드바는 거의 완성되었고 그 다음으로는 HTML 문서의 시작이라고 할 수 있는 영역을 만들었습니다. 이번 「친효스킨:아트북」의 컨셉은 사이드바의 책갈피 느낌을 살리고 본문 콘텐츠를 부각시키는 것을 목표로 하고 있습니다. 때문에 나머지 영역인 헤더나 푸터는 크게 눈에 띄지 않도록 만들 생각입니다. 미리보기 빨간색 점선 윗 부분이 헤더 영역입니다. 아래는 본문이 들어갈 공간이구요. 보시는 것처럼 완전 초 단순하게 만들었습니다. 모든 영역은 당연히 반응형으로 제작됩니다. 모바일에서 사이드바는 본문 아래로 배치됩니다. HTML 구조 뼈대라 할 수 있는 HTML 태그를 살펴봅니다. 홈 전체글 방명록 글쓰기 관리자 친효스킨1에..
블로그스팟은 개설한지가 꽤 되었지만 티스토리에 집중하느라 소홀했던 플랫폼입니다. 얼마전 발생한 카카오 데이터센터 화제로 인해 티스토리가 아주 엉망이 되었던건 다들 아실겁니다. 티스토리의 대응에 너무 실망을 했고 위기는 기회라고 했으니 이것을 기회로 여겨 백업용 블로그를 하나 더 육성해야겠다고 다짐했습니다. 당연히 새 블로그 플랫폼은 카카오그룹이 절대 아니어야 한다는 생각에 예전에 개설만 해두었던 블로그스팟을 다시 꺼내든 것입니다. 블로그스팟 기본 스킨은 너무 별로임 한참전에 만들어준 블로그스팟이기에 지금은 엄청나게 발전했으리라 잔뜩 기대하면서 오랜만에 접속했습니다. 그리고 기대는 곧 실망으로 바뀝니다. 크게 변한게 없습니다. 좋게보면 늘 한결같은 모습이고 나쁘게 보면 발전이 겁나 더디다는 뜻일겁니다. 아..
안녕하세요. 친절한효자손입니다. 올해 안으로 친효스킨 두번째 버전을 완성시키기로 올 초에 다짐했는데 12월이 된 지금에서야 슬슬 움직이기 시작했습니다. 예열하는데 무려 11개월이나 걸리다니... 게으름의 극치입니다. 그래도 올해를 넘기지 않은게 어딘가 싶은 마음에 조금은 위안이 됩니다. 이번 친효스킨 - 아트북은 최대한 기본 기능을 활용해서 제작할 예정입니다. 폰트어썸같은 외부 폰트를 최대한 사용하지 않을 생각입니다. 그야말로 티스토리의 기본 기능들을 적극 사용해서 로딩 시간을 최대한으로 단축시킬 생각입니다. 아이콘들은 특수문자로 대체합니다. 아무튼 궁극의 속도를 자랑하는 녀석으로 만들어 보겠습니다. 우선은 사이드바부터 작업을 완료했습니다. 가장 먼저 만들고 싶었던 영역이기도 하고 괜찮은 디자인이 생각났..
안녕하세요. 친절한효자손입니다. 티스토리에는 정말 다양한 반응형 스킨들이 있습니다. 기본 스킨부터 사용자가 직접 만들어 배포하는 무료 및 유료 스킨들까지 포함하면 개수가 엄청 많이 있습니다. 개인적으로는 친효스킨이 공식 스킨이 되기를 바라는 마음이 굴뚝같지만... 아마 그럴 일은 없겠죠. 그래도 점점 친효스킨을 사용하는 분들이 늘어나는 것 같아서 한편으로는 매우 뿌듯함과 보람됨을 느낍니다. 동시에 더 잘 만들고 관리해야겠다는 마음이 생깁니다. 친효스킨을 사용하시는 분들께서 스킨에 대한 설정 방법을 물어보시면 매우 정확하게 답변해 드릴 수 있습니다. 제가 만든 스킨이니까 구조라던지 스타일이 어디서 어떻게 적용되는지 100% 알고 있기 때문입니다. 하지만 타스킨의 경우에는 그렇지 않습니다. 제가 만든 스킨이..
모바일 웹 퍼블리싱 작업을 위해서 HTML 문서 내에 있는 안쪽에 다음의 메타 태그를 삽입하면 두 손 가락을 사용한 핑거스냅 사용을 할 수 있습니다. 확대 혹은 축소가 가능해집니다. 친효스킨에도 다음의 메타태그가 적용이 되어 있지만 최근에 이 메타태그가 업데이트가 된 모양입니다. HTML는 웹문서로서 버전이 있는데 시간이 지날수록 버전은 올라갑니다. 그러면서 잘 쓰이지 않는 구형의 코드들은 점점 사라지고 있습니다. 새롭게 추가되는 신형 태그(요소) 혹은 메타태그들이 있으면 기왕이면 사용해주는것이 좋을 것입니다. 앞으로의 무궁한 발전을 위해서지요. 거두절미하고 어떤 메타 태그인지 살펴보겠습니다. 뷰포드 살펴보기 구형 : 신형 : 친효스킨에서는 구형의 메타 뷰포트 코드가 삽입되어 있습니다. 작년까지는 정말 ..
이번에는 타입 중 아직까지 언급을 하지 않은 마지막 단계인 COLOR(컬러)입니다. 어떤 설정인지 단어만 봐도 바로 이해할 수 있을겁니다. 바로 그렇습니다. 색 지정에 대한 설정이 가능한 옵션을 부여합니다. 친효스킨에서는 컬러 설정 부분이 상당히 많이 쓰입니다. 대표적으로 댓글과 메인 테마 색상을 설정하는데 이 옵션이 사용되었습니다. 댓글의 경우는 세부적으로 나뉘어 다양한 영역에 대한 색 지정이 가능합니다. COLOR 타입 또한 STRING 처럼 HTML 문서 내의 안쪽에 존재하는 영역에서 CSS를 제어할 수 있습니다. 또한 내의 인라인 방식의 스타일도 제어가 가능합니다. 하지만 굳이 인라인 방식까지 제어할 필요는 없는 것 같습니다. 그냥 내에서도 충분합니다. COLOR 타입은 STRING과 똑같다고 보..
이번에는 커버 기능에 대해 좀 더 자세히 살펴보겠습니다. 이미 티스토리 스킨 제작 가이드 페이지에서 커버 부분이 나름 상세하게 나와있으니 한번 확인해 주시기 바랍니다. 특히 치환자 부분을 꼼꼼히 살펴보시기 바랍니다. https://tistory.github.io/document-tistory-skin/common/cover.html 홈 커버 · GitBook 홈 커버 홈 커버는 홈화면을 꾸미기 위해 제공되는 치환자입니다. : 커버 그룹 치환자 : 개별 커버 표시 : 개별 커버. name 애트리뷰트로 이름을 지정한다. 정의되지 않은 이름의 커버는 사용되지 tistory.github.io 치환자 종류가 생각보다 많습니다. 중요한 포인트는 반드시 가이드에 명시된 치환자 전부를 다 사용할 필요는 없다는 것입니다..
친효스킨 모바일(스마트폰) 해상도에서 애드센스를 노출 안 되게, 그러니까 감추는 방법에 대해서 문의를 주셨습니다. 좀 더 깔끔하게 보이게 하기 위함과 로딩 속도를 조금이라도 올리는데 도움이 될 것 같기 때문 입니다. 이 문제를 해결하기 위해서는 사이드바에 애드센스 삽입 시, 약간의 HTML 코드 수정을 해야 합니다. 또한 CSS 반응형 미디어쿼리도 추가해야 합니다. CSS 미디어쿼리 세팅 아래의 CSS 코드를 친효스킨의 CSS 항목에 빈 공간을 확보 후 추가합니다. 아래에 첨부파일도 있습니다. div.rgy-sidebar-adss { display: none; } @media (min-width: 1000px) { div.rgy-sidebar-adss { display: block; } } 첨부파일을 열..
안녕하세요, 친절한효자손 입니다. 오랜만에 이렇게 공식 석상에서(?) 다시 한 번 인사를 드리게 되었습니다. 다름이 아니고 제목처럼 친효스킨 1.18 버전에 대한 간단한 안내를 드리려고 글을 작성하게 되었습니다. 이번 업데이트는 정말 친효스킨 역사상 가장 비전있는 업그레이드가 될 것 같습니다. 현재까지 2.0버전 개발 내용 베일에 쌓여있던 INDEX 문서에 대해서 하나 하나 수수께끼를 풀어나가는 중 입니다. 예전부터 사용자 편의성을 위해서 이 스킨 편집 페이지에서 쉽게 조작할 수 있는 부분을 파악 중 이었는데 솔직히 뭔 소린지 몰라서 미루고 있었습니다. 하지만 드디어! 하나 하나 정체를 파악하기 시작했습니다. 현재 우선 적용된건 보시는 것 처럼 최상단 및 최하단 애드센스를 쉽게 활성화 시킬 수 있도록 개..
안녕하세요, 친절한효자손 입니다. 코로나19로 다들 많이 힘드시죠? 조금만 참고 견디면 됩니다. 얼마 안 남았잖아요? 이 시기를 잘 극복하여 더 이상 주변 사람들이 아플일이 없도록 만들어 봅시다. 오늘은 친효스킨 v1.17 업데이트에 대해서 완료가 되었다는 기쁜 소식을 전해드리기 위해서 이렇게 글을 작성하게 되었습니다. 업데이트된 내용을 한번 간략히 살펴보겠습니다. 친효스킨 v1.17 업데이트 내용 -친효애드온 : 포스트잇 모듈 마크1 적용 완료 -블로그정보 모듈 URL 텍스트 주소 입력 시 사이드바의 가로 사이즈를 초과하여 넘어가는 문제 수정 -블로그정보(프로필) 모듈 아래에 SNS 관련 아이콘 추가 -새로운 글쓰기 에디터 : 코드블럭의 선택자 및 매소드 수정 -새로운 글쓰기 에디터 : 더보기 및 접기..
친효스킨 커스터마이징 관련 글 입니다. 디스플레이 해상도에 따라서 본문 크기를 다르게 변경하고 싶은 경우에는 간단하게 미디어쿼리에 의해 동작하게 만들 수 있습니다. 친효스킨의 메인 해상도는 스마트폰을 기준으로 설계가 되어 있습니다. 따라서 미디어쿼리를 통해서 특정 해상도 이상일 때를 설계하고 해당 영역에 CSS 매소드를 만들어서 반응형으로 처리할 수 있습니다. 모바일(스마트폰)에서의 친효스킨의 본문 폰트 크기는 기본적으로 아래의 CSS에 마크업 되어 있습니다. 이 부분을 검색합니다. #contents .article { word-break: break-all; -webkit-word-break: break-all; padding: 20px; border: 1px solid #E5E5E5; border: ..
안녕하세요, 친절한효자손 입니다. 현재 새로운(신규) 글쓰기 에디터로 글을 작성할 때 이미지를 삽입하면 화면을 초과하여 잘리는 문제가 발생하고 있습니다. 확인해보니 이미지에 강제로 가로 사이즈가 적용되는 문제였습니다. max-width: 860px; 으로 860픽셀로 고정이 되기 때문에 모바일에서 볼 때는 화면이 잘려 보이게 되고 가로 스크롤바가 생깁니다. 따라서 해당 매소드만 제거하면 되지만, 문서를 일일히 다 수정 할 수는 없는 노릇이므로 CSS를 수정해야 합니다. 앞으로 배포될 친효스킨 1.17 버전에서는 이 문제가 해결되긴 했지만, 아직 배포는 멀었으니 다음의 방법대로 친효스킨의 CSS를 수정해 주시기 바랍니다. 먼저 아래의 영역을 찾습니다. "새로운 글쓰기" 라고 검색하면 빠르게 찾을 수 있을 ..
과거에 작성한 문서를 리뉴얼하는 페이지 입니다. 이번에는 티스토리의 스킨을 변경하는 방법에 대해서 배워보도록 합시다. 통상적으로 두 가지 방법으로 변경이 가능합니다. 하나는 티스토리에서 자체적으로 제공하는 기본 반응형 스킨들 중 하나로 변경하는 방법이 있습니다. 마지막 한 가지는 능력자분들이 손수 제작한 스킨으로 변경하는 방법 입니다. 이 방법으로는 친효스킨을 예로 들어보도록 하겠습니다. 1. 티스토리에서 기본적으로 제공하는 반응형 스킨으로 변경하기먼저 티스토리 내에서 기본적으로 제공하고 있는 반응형 스킨이 몇 가지 있습니다. 이 방법으로 한번 변경해 보도록 합시다. 먼저 티스토리의 관리자 화면으로 들어갑니다. 여기에서 왼쪽에 있는 꾸미기 > 스킨 변경으로 들어갑니다. 그러면 스킨 목록 화면이 나올 것 ..
안녕하세요, 친절한효자손 입니다. 친효스킨 1.16 버전을 업데이트 완료 했음을 알리는 글 입니다. 문서번호는 3119 입니다. 이번에 업데이트 된 내용은 다음과 같습니다. 친효스킨 v1.16 업데이트 내용- 본문 이미지 상/하단 여백 공간 수정- AMP 자동광고 코드 위치 변경- 본문, 댓글, 방명록의 텍스트 및 이미지가 가로로 넘치지 않도록 수정- 본문 표 가로로 넘치지 않도록 수정 (구형 글쓰기 표 에디터)- 새로운 글쓰기 에디터 : 첨부파일 스타일 수정- 새로운 글쓰기 에디터 : 본문 이미지의 margin 값 및 여백 수정- 댓글 및 방명록 글에 삽입되는 이모티콘 텍스트 가운데 정렬로 수정- 친효애드온 : 본문 공유 모듈 업데이트 → 카카오톡 공유 아이콘 추가- 친효애드온 : 본문 공유 모듈 업데..
친효스킨 최상단 및 최하단에는 반응형 구글 애드센스 코드를 삽입하여 광고를 게시할 수 있습니다. 원래는 세로로 긴 형태인 수평형 광고가 노출되었다가 최근에 엄청나게 큰 형태의 대형 광고로 바뀌면서 보기가 안 좋아졌습니다. 너무 지나치게 큰 광고는 오히려 독이죠. 인라인 방식으로 스타일을 수정해보고 CSS에서도 강제로 세로 사이즈를 조절해도 잘 되지 않았습니다. 그리고 마침내 오늘 구글 애드센스 도움말을 통해서 이 문제를 해결했습니다. 생각보다 너무 쉬웠습니다. 반응형 광고도 원하는 형태로 변경 가능그렇습니다. 반응형 광고도 어쨌든 크게 세가지 형태에서 벗어나지 않습니다. 가장 흔한 직사각형 형태의 광고, 가로로 긴 수평형 광고, 세로로 긴 수직형 광고 이렇게 세 가지 입니다. 그럼 이 셋 중 원하는 형태..
최근 댓글로 질문주신 내용입니다. 일반형 스킨과 반응형 스킨의 차이점에 대해서 궁금하다는 내용입니다. 바로 알아보도록 합시다. 일반 VS 반응형 스킨의 차이점을 알아보겠습니다. 일반형 스킨티스토리에서 거의 사라져가는 스킨 입니다. 일반형 스킨은 사이즈가 변하지 않고 고정된 형태를 말합니다. 지금은 다양한 스마트 디바이스가 공존하는 세상입니다. 스마트폰도 종류가 여러가지고 그에 따른 화면 크기도 각양각색 입니다. 화면 크기에 따라 출력되는 해상도도 다릅니다. 이 해상도가 천차만별이다보니 크기가 고정된 일반 스킨은 어떤 장치에서는 제대로 나오기도 하지만, 어떤 장치에서는 일부가 잘리거나 아예 노출되지 않는 경우도 발생합니다. 티스토리에서 일반형 스킨은 보통 모바일 전용 페이지와 PC (데스크탑) 전용 페이지..
안녕하세요, 친절한효자손 입니다. 친효스킨 1.14 버전 업데이트를 완료했음을 안내하는 글 입니다. 현재 사이드바의 추천글 목록에 보시면 친효스킨 다운로드 페이지로 바로 가실 수 있는 링크 목록을 살펴보실 수 있습니다. 혹은 여기를 누르셔서 바로 이동도 가능합니다. 가보시면 1.14 버전으로 다운로드 받으실 수 있습니다. 다운로드 받으시고 압축 푸신다음 그대로 스킨에 적용하시면 됩니다. 친효스킨 페이지에 있는 설명서를 먼저 충분히 정독하시기 바랍니다. 각종 적용 방법이 나와있습니다. 댓글로 문의하시기 전에 설명서를 충분히 읽어보시면 댓글 남기실 일이 현저하게 줄어듭니다. 만약 보시고나서도 잘 이해가 되지 않거나 부족한 설명이거나 설명에도 없는 궁금하신 내용이 있으시다면 그때 질문을 남겨주시면 감사하겠습니..
친효스킨에는 현재 TOP 버튼이 적용되어 있습니다. 하지만 일부 스킨에서는 TOP 버튼이 없을 수 있습니다. 만약 여러분들께서 사용하시는 반응형 스킨에 위로 올라가는 TOP 버튼이 없다면 이 애드온을 통해서 만드실 수 있습니다. 적용하시면 최종적으로 이런 형태의 버튼을 확인하실 수 있습니다. 티스토리 스킨의 오른쪽 하단에 생성되며 가장 맨 위로 스크롤이 되어 있는 경우에는 버튼이 자동으로 사라집니다. 그리고 스크롤을 하단으로 조금만 내려보시면 다니 나타나는것을 확인하실 수 있습니다. 누르면 빠르게 다시 제일 위로 올라갑니다. 이제 세팅 방법을 살펴보겠습니다. jQuery 세팅하기먼저 자바스크립트의 한 종류인 제이쿼리를 세팅해야 합니다. 하나씩 따라해 주시기 바랍니다. 어렵지 않습니다. 먼저 아래의 스크립..
저도 까먹기 전에 빨리 이걸 써놔야 할 것 같습니다. 더불어 티스토리 스킨을 직접 제작하려고 결심하신 분들도 계실 것 입니다. 그분들에게 조금이나마 도움이 되었으면 하는 바램도 있습니다. 티스토리 스킨을 처음 만들려고 도전했을 때, HTML 스킨 구조가 어떤건지 쉽사리 파악이 되지 않아서 다소 고생한 경험이 있습니다. 경험을 바탕으로 최대한 자세하면서 단순하게 설명해 보겠습니다. 또한 티스토리에서 제공하는 스킨 가이드 페이지도 같이 참고하시면 이해하는데 도움이 될 것입니다. 이곳에서의 설명은 HTML과 CSS를 어느정도 이해하고 계신 분들을 위한 강좌입니다. HTML 웹코딩을 좀 하실 줄 아신다면 아마 쉽게 이해가 되시겠지만, 코딩과 태그에 대한 기초 지식이 없으신 분들이시라면 파악하시는데 조금 어려움이..
CSS에서 미디어쿼리 (@media) 를 사용하면 쉽게 반응형으로 만들 수 있습니다. 특정 해상도 이상 혹은 이하일 때, 마크업 해둔 스타일로 변하도록 만드는 개념입니다. 이번에 친효스킨을 만들면서 더욱 확실히 개념을 정리할 수 있었습니다. 어떻게 이해했고, 어떤식으로 사용되어지는지 최대한 쉽게 설명을 드리겠습니다. 먼저 미디어쿼리를 마크업 할 때, 기준되는 해상도를 하나 정하셔야 합니다. 홈페이지 스타일 중 가장 만들기 쉬운 형태는 뭐가 있을까요? 저는 모바일 페이지라고 생각합니다. 블록요소가 그냥 세로로 쌓여있는 형태 입니다. 티스토리 반응형 스킨도 스마트폰에서 보면 세로로 정렬된 형태가 거의 대부분 입니다. 이는 모바일 해상도에서는 가로로 정렬할 수 있는 공간이 충분하지 않기 때문에 세로로 보여지게..
반응형 웹을 배우고 있습니다. 오늘은 궁금했던 한 부분이 해결되었습니다. 백그라운드에 이미지를 넣는데, 이것을 브라우저의 크기에 따라 자연스럽게 변하는 것을 표현해보고 싶었습니다. 해결 방법은 생각보다 간단했습니다. 먼저 아래의 코딩 상태를 봐주시기 바랍니다. 백그라운드 반응형 본문의 body 안에는 아무것도 없는 상태 입니다. 스타일에서 body 영역에 백그라운드를 넣었습니다. 백그라운드 스타일의 마크업 상태를 봐주세요. height: 100vh;background-image: url("이미지경로");background-repeat: no-repeat;background-position: center;background-size: cover;background: url("이미지경로") no-repeat..
구글에서 바로 티에디션을 반응형 코드로 만드는 방법에 대해서 알아봤습니다. 그런데 문제가 생겼습니다. 예전에는 어떤 스킨에서도 알아서 반응형으로 만들어지던 티에디션이 왠일인지 PC 모드에서는 괜찮은데, 모바일 버전에서 개선이 되지 않았던 것 입니다. 처음에는 스킨 문제라고 생각했습니다만, 유료스킨이든 무료스킨이든 모두 다 적용이 되지 않는 문제가 발생했습니다. 반응형 스킨이 대세인데다가 최근 티스토리팀에서는 새로운 스킨을 선보임에 있어서 구형의 방식인 티에디션에 대해서 더 이상 업데이트를 하지 않을 생각인 듯 합니다. 하긴 조금 지나면 더 멋진 커버 기능이 도입되니까 그걸 사용하면 멋진 스킨을 꾸밀 수 있을 것 입니다. 그러나 개인적으로 티에디션을 아주 알차게 사용해오던터라... 이 녀석을 어떻게든 반응..