친절한효자손 취미생활

안녕하세요, 친절한효자손 입니다. 코로나19로 다들 많이 힘드시죠? 조금만 참고 견디면 됩니다. 얼마 안 남았잖아요? 이 시기를 잘 극복하여 더 이상 주변 사람들이 아플일이 없도록 만들어 봅시다. 오늘은 친효스킨 v1.17 업데이트에 대해서 완료가 되었다는 기쁜 소식을 전해드리기 위해서 이렇게 글을 작성하게 되었습니다. 업데이트된 내용을 한번 간략히 살펴보겠습니다.


친효스킨 v1.17 업데이트 내용

-친효애드온 : 포스트잇 모듈 마크1 적용 완료

-블로그정보 모듈 URL 텍스트 주소 입력 시 사이드바의 가로 사이즈를 초과하여 넘어가는 문제 수정

-블로그정보(프로필) 모듈 아래에 SNS 관련 아이콘 추가

-새로운 글쓰기 에디터 : 코드블럭의 선택자 및 매소드 수정

-새로운 글쓰기 에디터 : 더보기 및 접기 버튼 내의 폰트 색상이 흰색으로 적용되도록 수정

-새로운 글쓰기 에디터 : 본문 이미지 반응형으로 적용되도록 수정

-본문 줄바꿈 옵션 수정 (word-break: normal; 로 변경 - CJK는 글자 단위로 줄바꿈, 그 외의 문자는 단어 단위로 줄바꿈 발생)

-본문 기본 글씨체를 "이롭게바탕체" 로 변경

-익스플로러에서 본문 이롭게바탕체가 적용되지 않으면 나눔고딕체로 출력되도록 수정

-구형/신형 글쓰기 에디터 : 본문 리스트 스타일 일부가 비정상적으로 출력되던 문제 수정

-새로운 글쓰기 에디터 : 본문 가로폭보다 작은 이미지에 긴 내용의 캡션 텍스트를 입력 시, 이미지가 좌측 정렬이 되는 문제 수정

-새로운 글쓰기 에디터 : 본문 img가 아닌, figure에 outline 이미지 테두리가 적용되도록 수정

-새로운 글쓰기 에디터 : 파일명이 긴 첨부파일 업로드 시, 본문의 가로폭을 초과하는 문제 수정

-본문 리스트 기능 스타일 수정 (기본 색상 및 하이퍼링크 적용 시 마우스 올렸을 때 스타일 변경)

-새로운 글쓰기 에디터 : 인용구1 스타일 미적용되던 문제 수정

-본문 상단 애드센스 2개의 미디어쿼리 : 특정 해상도 구간에서 광고 2개가 세로로 배치되는 문제 수정

-친효애드온 : 본문 목차 모듈 적용

-친효스킨 스타일 변수 추가 : borderRadius 변수를 추가하여 스킨의 각 모서리를 둥글게 변경 가능하도록 수정 (둥글기 값은 변수를 사용하여 간편하게 변경 가능)

-인디케이터 (Progress Bar) 적용

-친효애드온 : 커스텀 DIV 박스 CSS 매소드 수정 및 스타일 추가

-새로운 글쓰기 에디터 : 코드블럭 폰트 "D2Coding" 으로 변경

-Footer 영역에 스킨명과 버전 표시

-댓글/방명록 비밀글 버튼을 아이폰 토글 스위치 스타일로 변경 (HTML 및 CSS 수정)

-반응형 미디어쿼리 : 본문 폰트 크기를 1000px 해상도 기준으로 다르게 적용되도록 수정

-새로운 글쓰기 에디터 : 본문 이미지 좌측/중앙/우측정렬 임의로 되지 않았던 문제 수정


여기까지 입니다. 주로 오류 수정이 대부분 내용 입니다. 나머지는 친효애드온 적용 및 본문 기본 글꼴 변경, 스타일 변경에 대한 내용 입니다. 아래에 친효스킨 다운로드 페이지를 링크해 두었으니 방문하셔서 새로운 버전으로 적용해 보시기 바랍니다.



업데이트 세부 내용

주목해야 하는 부분은 친효스킨 CSS에 새로운 변수명을 추가한 부분 입니다. borderRadius 라고 하는 변수로서, 이 변수의 역할은 친효스킨의 모서리를 둥글게 만들 수 있는 변수명 입니다. 기본값은 0으로 우리가 흔히 알고 있는 사각형의 형태를 하고 있습니다. 하지만 이 변수값에 숫자를 넣어주면 해당 값만큼 모서리 부분이 둥글게 됩니다. 여러분들께서 보고 계시는 이 친효스킨에는 10px의 값이 적용되어 있습니다. 사이드바의 모듈, 본문, 댓글, 방명록, 메인화면의 인덱스 페이지 등등의 모서리 부분이 둥글게 변해있음을 확인할 수 있을 겁니다.


:root {

    --mainColor: #555;    /* 메인 색상 */

    --subColor: #E5E5E5;    /* 서브 색생 */

    --mouseHoverColor: #FF5544;    /* 마우스 올렸을 때 변하는 색상 */

    --contentsLocation: right;    /* right: 사이드바 왼쪽, 본문 오른쪽 (기본값) || left: 사이드바 오른쪽, 본문 왼쪽 */

    --containerLocation: auto;    /* none: 블로그 왼쪽정렬 || auto: 블로그 가운데정렬 (기본값) */

    --borderRadius: 0;    /* 라운드 둥글기 값 (기본값: 0) */

}

친효스킨의 CSS 제일 윗 부분을 살펴보시면 이렇게 root 관련 내용이 있습니다. borderRadius의 기본 값은 0으로 모서리가 뾰족한 상태 입니다. 0을 지우시고 여기에 1px~10px 정도로 입력을 해보시면서 변화를 살펴보시기 바랍니다. 단위인 px은 꼭 넣어야 합니다. 최종적으로는 이런 형태가 될 것 입니다.


--borderRadius: 10px;


이렇게 입력하시면 됩니다. 참고로 이 적용 방법은 익스플로러를 제외한 크로미움 기반의 브라우저 프로그램에서만 적용 됩니다. 하지만 이번 업데이트의 최고의 업적은 이것 입니다. 예전부터 눈엣가시였는데 언젠간 스타일을 변경해야지 하고 벼르고 있었던 겁니다. 바로 댓글이나 방명록의 비밀글 버튼 스타일 변경 입니다.


See the Pen CSS3 - iPhone Toggle Swich Style (input) by rgy0409 (@rgy0409) on CodePen.


꼭 아이폰 스위치 버튼처럼 생겼습니다. 직접 눌러보세요. 버튼이 활성화 되면 비밀글 모드가 됩니다. 반대로 한번 더 누르면 해제됩니다. 현재 친효스킨 1.17버전에서는 이 스타일의 버튼이 적용되어 있습니다. 여러분들도 마음에 드시나요?


푸터영역 편집 금지!

친효스킨 다운로드 페이지에도 안내 내용이 있지만, 한번 더 명확하게 공지하겠습니다. 친효스킨은 무료로 배포되고 있는 티스토리 반응형 스킨 입니다. 무료로 배포되는만큼 티스토리 유저분들 사이에서 널리 사용되고자 하는 바램이 있습니다. 스킨을 사용하시는 것 자체가 여러분들은 홍보를 해주시는 거구요. 보편적으로 스킨 제작자에 대해서, 그리고 스킨명에 대해서 명시하는 영역은 푸터(Footer) 입니다. 즉 친효스킨을 사용하시면 다른 티스토리 블로거 분들께서 이 스킨에 대해 관심을 갖게 될 것이고 스킨의 맨 아래 부분인 푸터 영역을 확인했을 때 제작자와 스킨명에 대한 정보를 얻게 될 겁니다. 따라서 푸터 영역은 절대로 편집을 하시면 안 됩니다. 친효스킨 사용자 중 몇 분께서 푸터 영역을 수정해서 사용하시는걸 목격했습니다. 잘 모르시고 수정하셨을수도 있으니까 혹시 이 글을 보신다면 다시 원래대로 푸터 영역을 복구해 주시기 바랍니다. 푸터 영역과 헤더 안쪽의 제작자 메타태그를 제외한 나머지는 얼마든지 본인 입맛대로 편집해서 사용하실 수 있습니다. 푸터 영역은 제작자를 위한 배려 공간 입니다.


실시간 라이브

유튜브에서 친효스킨 1.17 버전 업데이트 내용에 대한 라이브를 진행했습니다. 아래에 동영상을 올려놨으니 못 보신 분들은 이 영상을 보시면 됩니다.



라이브 영상을 그대로 가지고 왔기 때문에 말투가 다소 어눌하거나 발음이 부정확할 수 있습니다. 양해를 부탁 드립니다. 아직까지 실시간으로 말을 한다는게 익숙치가 않네요. (머쓱)


마무리

친효스킨을 이용해 주셔서 감사합니다. 앞으로도 꾸준한 업데이트를 진행할 예정 입니다. 친효스킨이 티스토리 유저분들 사이에서 가장 많이 사용되는 스킨이 되는 그날까지 열심히 관리해 나가겠습니다. 감사합니다. 끝.





당신을 위한 콘텐츠

이 글을 공유합시다

facebook twitter googleplus kakaoTalk kakaostory naver band

본문과 관련 있는 내용으로 댓글을 남겨주시면 감사하겠습니다.

비밀글모드

  1. Favicon of https://goodbypoor.tistory.com 팬케잌 굽는남자 2020.05.01 10:12 신고

    에구...본방송을 놓쳐 버렸네요. 본문 글씨체도 바뀌고 포스티잇 모듈이 포함되었군요. 고생많으셨습니다. 앞전에 문의드린 최상단하단 에드센스 삽입은 잘 해결했습니다. 자세히 살펴보니 빼먹은 부분이 있더군요. 아무리 찾아도 안보이던게 댓글문의 드리고 다시 찾아보니 보이는 신기한 현상이...건강 조심하시구요.

  2. Favicon of https://fruitfulife.tistory.com 열매맺는나무 2020.05.01 10:30 신고

    기다려왔던 반가운 소식입니다.
    다운 받아보니, 전처럼 폴더에 들어있지 않고 압축 파일로 되어있네요.
    압축을 풀려고하니 이 도큐멘트를 열도록 설정된 응용 프로그램이 없다고 나옵니다.
    어떻게 해야 하나요?

  3. Favicon of https://kimsubs.com 의군 2020.05.01 10:46 신고

    앗.. 비밀글 버튼이 벌써 적용되었내요.
    그런데 이번 버전으로 업데이트 하면 또 다시 셋팅이나 이런것을 다시 해야 하는지요?
    빠른 업데이트 감사합니다.

  4. Favicon of https://chilhakgrun.tistory.com 岳岩 2020.05.01 15:32 신고

    유저들을 위해 애써주신 수고로운 노고에 진심으로 감사드립니다.
    덕분에 스킨 잘 사용하고 있습니다.
    이 기회에 다시 한번 고마움을 전합니다.
    친효님의 무궁한 발전을 기원합니다.
    다시 한번 감사드립니다.

  5. Favicon of https://nous-temperature.tistory.com 상식체온 2020.05.02 10:02 신고

    안녕하세요.
    유튜브 영상을 포함했을 때, 모바일 티스토리 앱에서 보면 영상이 화면에 가로로 많이 넘쳐 잘려 나옵니다. 효자손님 현재 글에 있는 유튜브 영상도요.
    검색해서 글에 있는 유튜브 영상을 보면 세로로 너무 길게 나오구요. 저만 이런 것인지 모르겠지만 혹시 왜인지 알 수 있을까요? 제가 못찾은 것인지 관련 글이 없는 것같은데 수정방법 글이 있다면 알려주시면 고맙겠습니다. 감사합니다.

    • Favicon of https://rgy0409.tistory.com 친절한효자손 2020.05.02 10:10 신고

      안녕하세요. 티스토리앱에서 잘리는거죠? 티스토리앱은 어차피 일반분들은 안씁니다. 모바일 브라우저 어플리케이션에서 정상적으로만 나오면 됩니다. 그래도 기왕이면 잘 나오게하면 좋은거니까 이 부분은 시간을 두고 알아봐야할듯 싶네요.

  6. Favicon of https://eastsky3483.tistory.com 2020.05.02 16:42 신고

    친효님 오늘 스킨을 적용하여 업데이트했는데요.
    CSS 진짜본문에서 글위아래 간격을 조절하기 위해 line-height: 1.8em;이부분을 이렇게 수정했는데 적용이안되는데 제가 잘못한걸까요?

    • Favicon of https://rgy0409.tistory.com 친절한효자손 2020.05.02 18:18 신고

      안녕하세요, 1.17 버전부터 본문 폰트와 줄간격에 대해 미디어쿼리가 적용 되었습니다. 따라서 PC 해상도 기준으로 변경하고자 한다면, CSS 맨 아래에 보시면 @media (min-width: 1200px) 매소드가 있습니다. 이 괄호안에 보시면 진짜본문 부분이 있습니다. 그곳을 수정해야 합니다.

      #contents .article {
      font-size: 1.1em;
      line-height: 1.6em;
      }

      이 부분 입니다.

  7. Favicon of https://archiveh.com 건강리포터 2020.05.02 23:09 신고

    친효님 늘 좋은 스킨 배포해주셔서 정말 감사합니다~!
    예쁘게 잘 쓰겠습니다~! :)

  8. Favicon of https://dreaminginfluencer.tistory.com 인플루언서 2020.05.03 13:43 신고

    친효님 덕에 재미나게 블로그 생활 하고 있습니다. 이번 업데이트 진심으로 감사드리며, 평범한듯 탁월한 스킨 정말 수고 많으셨습니다.

  9. Favicon of https://zzalmart.tistory.com 짤마트 2020.05.03 18:00 신고

    덕분에 스킨 잘 쓰고 있습니다. 감사드리구 앞으로도 예쁘게 사용하겠습니다^^

  10. 2020.05.04 13:13

    비밀댓글입니다

    • Favicon of https://rgy0409.tistory.com 친절한효자손 2020.05.04 18:34 신고

      안녕하세요, 사이드바를 삭제하는건 HTML에서 진행을 해야 합니다. 또한 CSS에서 반응형 미디어쿼리 부분도 수정해야 합니다. HTML에 보시면 사이드바 시작 이라는 부분이 있습니다. 해당 태그들을 모두 제거하거나 주석처리 해야 합니다. 그리고 CSS에서는 #sidebar 와 미디어쿼리의 #contents 부분을 몽땅 제거해야 합니다. @media (min-width: 1000px) 이상 부터 제거해야 합니다. 그 이하는 손 대면 안 됩니다. 또한 이 외의 선택자에 대한 스타일도 수정하면 안 됩니다.

  11. Favicon of https://dazemonkey.tistory.com dazemonkey 2020.05.08 08:23 신고

    안녕하세요. 효자손님
    스킨이 업데이트되었다는 소식을 듣고 적용해보니 이전에 사용한 스킨보다 훨씬 가독성이 좋네요.

    물론 포스팅을 일부 수정하고 있지만요..

    근데 포스팅 작성할 때 숫자를 연달아 적으면 모바일웹에서 본문가로길이가 넘쳐나네요..

    이것은 어떻게해결해야할까요?

    예를들면 이런식으로 숫자를 적으면 본문길이 최대치가 넘어가요. 다음 행으로 넘어가지않네요..
    34, 36, 38, 40, 44, 46, 48, 52, 56, 60, 64, 100, 104, 108, 112, 116, 120, 124, 128, 149, 151, 153, 157, 159, 161, 165

    • Favicon of https://rgy0409.tistory.com 친절한효자손 2020.05.08 23:37 신고

      안녕하세요, 방금 확인해봤는데 본문을 넘어가지 않습니다. 혹시 티스토리 앱에서 확인하신건가요? 또는 메모장에서 바로 붙여넣기를 하셨나요?

    • Favicon of https://dazemonkey.tistory.com dazemonkey 2020.05.08 23:44 신고

      메모장에서 복사해서 붙여 넣었어요. 소스코드를 보니 이상한 값이 들어가 있네요. 이 값을 제거하니 다음 행으로 넘어가네요.

      감사합니다.

  12. Favicon of https://dazemonkey.tistory.com dazemonkey 2020.05.08 21:32 신고

    효자손님
    메인 페이지에서 푸터 영역 바로 위의 숫자 부분에 링크가 생성되지 않습니다.
    효자손님 메인 페이지를 보면 1부터 101까지 표시되는데,
    101, 100, 99 한 3개정도 클릭하니 링크가 생성되지 않는데 어떻게 해결해야 될까요?

    아마도 광고가 송출되지 않을 때 발생한 것 같아 보입니다.

    • Favicon of https://rgy0409.tistory.com 친절한효자손 2020.05.08 23:40 신고

      뭔가 스킨 설정을 잘 못 하신 듯 합니다.

    • Favicon of https://dazemonkey.tistory.com dazemonkey 2020.05.08 23:51 신고

      효자손님의 사이트에서도 동일한 현상이 발생한 것 같아요.

      푸터 바로 위에 있는 101번(page=101) 누르고, 100번 누르고, 99번 누르고 번호 링크를 3~4번 누르니 다른 번호는 링크가 생성되지 않던데요...

    • Favicon of https://rgy0409.tistory.com 친절한효자손 2020.05.08 23:53 신고

      무슨 말씀인지 제가 정확히 이해를 못 했어요. 제가 확인할때는 특별히 문제가 없거든요. 페이징 번호도 다 잘 눌리구요.

    • Favicon of https://dazemonkey.tistory.com dazemonkey 2020.05.08 23:59 신고

      시크릿창에서는 제대로 눌리네요.. 괜히 신경쓰게 해서 죄송합니다..

  13. 2020.05.25 17:21

    비밀댓글입니다

    • Favicon of https://rgy0409.tistory.com 친절한효자손 2020.05.25 17:37 신고

      안녕하세요!

      1. 스킨 HTML에서 구글광고코드적용 이라는 텍스트를 삭제하시면 됩니다.
      2. 제가 확인할때도 광고가 잘 나오는것을 보면 현재 스킨에서는 이상이 없습니다.

    • 2020.05.25 18:07

      비밀댓글입니다

  14. 2020.05.25 17:35

    비밀댓글입니다

    • Favicon of https://rgy0409.tistory.com 친절한효자손 2020.05.25 17:39 신고

      안녕하세요, 폭이라는건 가로폭을 말씀하시는 건가요? 아니면 본문의 텍스트 단락의 세로폭 간격을 말씀하시는 건가요?

  15. Favicon of https://xiexie88.tistory.com 판톤 2020.05.25 17:40 신고

    아닙니다. 사용법을 살펴보니 해결되었네요 감사합니다. 혹시 다음버전은 언제쯤 나오나요 몹시기대중입니다!

  16. Favicon of https://summerkim-life.tistory.com 미:동 2020.06.02 20:57 신고

    안녕하세요! 배포해주신 스킨 너무 잘쓰고 있습니다! 감사합니다! 그런데 스킨 적용 후 크롬은 괜찮은데 익스플로러에서 게시글을 열어봤을때 사진이 너무너무 크게 보여서 한눈에 볼 수 없는 현상이 보입니다 ㅠㅠ 이 현상은 어떻게 해결할 수 있을까요?

    • Favicon of https://rgy0409.tistory.com 친절한효자손 2020.06.02 20:59 신고

      안녕하세요. 문제 URL 주소좀 알 수 있을까요?

    • Favicon of https://summerkim-life.tistory.com 미:동 2020.06.02 21:04 신고

      https://summerkim-life.tistory.com/

      요기예요! 익스플로러에서는 본문내 상단 광고도 제대로 나오지 않는것 같습니다.. ㅠㅠ

    • Favicon of https://rgy0409.tistory.com 친절한효자손 2020.06.02 23:35 신고

      일단 광고는 다 잘 나오는건 확인했습니다. 오른쪽 클릭 방지좀 풀어주세요. 코드 상태를 봐야할 것 같습니다.

    • Favicon of https://summerkim-life.tistory.com 미:동 2020.06.02 23:51 신고

      지금 오른쪽 클릭 방지 풀었습니다! ㅠㅠ 감사합니다!

    • Favicon of https://rgy0409.tistory.com 친절한효자손 2020.06.02 23:57 신고

      원인을 찾았습니다. 친효스킨 CSS에서 다음 부분을 찾습니다.

      /* ========== 새로운 글쓰기 에디터 시작 ========== */
      /* 티스토리 본문 이미지 (새로운 글쓰기 에디터) */
      .tt_article_useless_p_margin > figure.imageblock {
      display: block !important;
      margin-top: 25px !important;
      margin-bottom: 20px !important;
      outline: 1px solid #ccc !important;
      text-align: center !important;
      }

      여기 보시면 display: block !important; 가 없을 겁니다. 따라서 이 매소드만 추가하시면 됩니다. 위의 예시 처럼요. 그럼 해결 될 겁니다.

    • Favicon of https://summerkim-life.tistory.com 미:동 2020.06.03 00:16 신고

      헐 해결 되었어요!! 정말정말 감사합니다!!! ㅠㅠ 정말 죄송한데 한가지만 더 여쭤봐도 될까요... ㅠㅠ ㅎㅎ 초보라 죄송합니다! 광고가 어떤포스팅은 보이고 어떤 포스팅은 안보이고 하는데 이건 제가 설정을 잘못해서 그런걸까요..? 상단 광고와 하단에 연관 광고가 보일때도 있고 안보일때도 있네요 ㅠㅠ

    • Favicon of https://rgy0409.tistory.com 친절한효자손 2020.06.03 00:18 신고

      https://rgy0409.tistory.com/3643 이 글을 참고하시면 됩니다.

    • Favicon of https://summerkim-life.tistory.com 미:동 2020.06.03 00:30 신고

      효자손님... 제 은인이세요.. 정말 감사합니다!! 복받으실꺼예요 ㅠㅠ!!!!! 감사합니다!!

    • Favicon of https://rgy0409.tistory.com 친절한효자손 2020.06.03 00:31 신고

      https://rgy0409.tistory.com/1501
      여기에 중요 내용들이 들어 있습니다. 시간 나실때마다 한번 읽어보세요. 도움 될 겁니다.

    • Favicon of https://summerkim-life.tistory.com 미:동 2020.06.03 00:39

      관리자의 승인을 기다리고 있는 댓글입니다

  17. Favicon of https://enj52j.tistory.com enj52j 2020.06.02 22:46 신고

    찬효스킨 잘쓰고잇습니다! 정말 잘쓰고있습니다^^

    근데 문제가... 애드센스가 나왔다 안나왓다하는데 혹시 원인아시나요..??

    계속 다시 적용해보고, 광고최적화도 눌러보는데 다안되요 ㅠㅠ