안녕하세요, 친절한효자손입니다. 본 내용은 친효스킨 버전 2.1 이상을 사용하시는 유저분들께서 활용 할 수 있는 색상표 입니다. 친효스킨 2.1 버전부터 새롭게 추가된 댓글 색상 기능을 좀 더 다양하고 이쁘면서 개성 넘치게 만들 수 있습니다. 기본적으로 채팅 스타일의 대화 형식의 댓글 화면을 구성하고 있습니다. 어느날 갑자기 "카톡 디자인으로 꾸미고 싶다" 라는 생각이 머릿속에 강하게 스쳐지났고 백문이 불여일견이므로 바로 적용을 위해서 코딩을 진행했습니다. 그 결과 만족스러운 결과에 도달 할 수 있었습니다. 변경된 댓글 화면 미리보기 기존 댓글 스타일에서 변경된 점은 다음과 같습니다. 1. 댓글 남길때마다 점선으로 구분선이 발생하여 가독성을 높임 2. 스킨편집 페이지에서 각 영역마다 컬러 수정이 가능함 ..
안녕하세요, 친절한효자손 입니다. 방금 친효스킨 2.1 버전을 업로드 완료했습니다. 현재 다운로드 페이지에서 받으셔서 적용하실 수 있습니다. 설명도 자세히 해놓았으니 반드시 정독해 주시기 바랍니다. 이 세상 모든 제품은 설명서가 있습니다. 온라인 세상도 마찬가지입니다. 친효스킨도 아주! 매우! 무척! 엄청! 자세히 적힌 사용 설명서가 있습니다. 개인적으로 설명서를 무조건 한번 보는 습관이 있어서 그런건지는 몰라도 설명서의 소중함과 위대함을 잘 알고 있습니다. 이미 알고 있는 제품이라 할지라도 혹시 내가 모르는 어떤 기능이 추가적으로 있을까 싶어서 확인하곤 합니다. 친효스킨 설명서가 생각보다 내용이 많습니다. 그만큼 여러분들께서 알아야 하는 내용이 많다는 뜻이겠죠. 그러므로 반드시 알고 넘어가셔야 합니다...
안녕하세요, 친절한효자손 입니다. 벌써 10월의 끝자락에 도착해가고 있습니다. 날씨가 금방 쌀쌀해졌습니다. 이제 밤과 새벽은 춥기까지 합니다. 해동시켰다가 냉동시켰다가 환장하겠습니다. 그바람에 코에서 물이 마를 날이 없습니다. 노우즈 워터 (Nose Water)가 범람하는 시기가 다가왔습니다. 죽겠네요. 비염때문에... 으으!! 잠시 넋두리 글이었습니다. 그러면 오늘도 친효스킨 관련 소식을 전해드리겠습니다. 메일로 친효스킨 메인화면을 어떻게 하는건지에 대해서 문의주시는 분들이 계셨습니다. 음... 이거 2.01 공지글에 작성해뒀는데 아무래도 겸사겸사 홍보를 해서 그런지 많이들 못 보신 것 같습니다. 그래서 다시 한 번 제대로 공지를 합니다. 그리드(Grid) 스타일 커버 추가 친효스킨 메인화면의 모습입니..
안녕하세요, 친절한효자손 입니다. 이번달 1일에 친효스킨 2.0을 배포하기 시작했고 많은 분들께서 사용하시는 것 같아 저 또한 보람을 느끼고 있습니다. 감사합니다. 다름이 아니고 또 이렇게 갑자기 긴급 업데이트 버전을 내놓게 되었습니다. 버그나 기타 오류가 있어서 그런건 아닙니다. 단지 추가 기능이 두 가지가 더 있는데 그냥 빨리 배포해버리는게 낫겠다 싶어서 오늘 갑작스럽게 배포를 진행하는 것 입니다. 추가적으로 업데이트된 내용은 다음과 같습니다. 친효스킨 v2.01 업데이트 내용 -스킨편집 화면에 인피드 광고 설정 옵션 추가 -스킨편집 화면에 댓글창 On / Off 버튼 추가 -스킨편집 화면 프로필 설정 관련 항목 위치 변경 이 정도 입니다. 해당 내용은 친효스킨 다운로드 페이지에서 더욱 자세히 확인이..
아이허브(iHerb) 커미션을 사용하시는 분들을 위해서, 그리고 친효스킨을 사용하시는 분들을 위해서 아이허브 모듈을 하나 만들었습니다. 이 방법은 다른 스킨에서는 제대로 적용이 되지 않습니다. 오직 친효스킨만을 위한 아이허브 모듈 입니다. 사이드바에 설치하는 방식이며 설정 방법도 간단합니다. CSS 세팅 먼저 아래의 첨부파일을 다운로드 받습니다. /* 아이허브 모듈 */ #sidebar aside .rgy-iherb ul { padding: 0 5px; } #sidebar aside .rgy-iherb li { padding: 5px; margin: 5px 0; } #sidebar aside .rgy-iherb li:not(:last-child) { border-bottom: 1px solid #ccc;..
친효스킨 모바일(스마트폰) 해상도에서 애드센스를 노출 안 되게, 그러니까 감추는 방법에 대해서 문의를 주셨습니다. 좀 더 깔끔하게 보이게 하기 위함과 로딩 속도를 조금이라도 올리는데 도움이 될 것 같기 때문 입니다. 이 문제를 해결하기 위해서는 사이드바에 애드센스 삽입 시, 약간의 HTML 코드 수정을 해야 합니다. 또한 CSS 반응형 미디어쿼리도 추가해야 합니다. CSS 미디어쿼리 세팅 아래의 CSS 코드를 친효스킨의 CSS 항목에 빈 공간을 확보 후 추가합니다. 아래에 첨부파일도 있습니다. div.rgy-sidebar-adss { display: none; } @media (min-width: 1000px) { div.rgy-sidebar-adss { display: block; } } 첨부파일을 열..
예전에 받았던 질문 중 하나 입니다. 친효스킨의 메인 화면은 현재 인덱스 페이지로 구성되어 있습니다. 그리고 각 목록마다 특정 표식이 지정되어 있습니다. 스크린샷 이미지를 보시면서 다시 설명 드리겠습니다. 수동으로 영구 삭제 "> 이 부분을 찾으셨나요? 이 중에서 삼각형 모양의 형태를 구성하고 있는 태그 부분은 바로 이곳 입니다. 이 부분 입니다. 여기가 바로 검은색 삼각형 형태를 취하고 있는 영역 입니다. 따라서 해당 태그를 모두 삭제하거나 주석 처리를 하면 사라지게 됩니다. 끝. 추가내용 친효스킨 2.2 버전부터 이 삼각형을 켜고 끌 수 있는 버튼을 추가했습니다. 따라서 태그를 수동으로 삭제할 필요가 전혀 없습니다. 스킨편집 > 레이아웃 설정에 보시면 메인삼각형이라는 기능이 있습니다. 해당 스위치는 ..
안녕하세요, 친절한효자손 입니다. 부지러너 분들을 위해서 친효스킨 2.0을 배포는 했으나 공식 설명서가 없어서 조금 어려워하시는 분들이 계시는 것 같습니다. 그래서 아예 설명서를 글로 만들어 놓도록 하겠습니다. 이 내용을 보시고 차근 차근 적용하시면 될 것 같습니다. 목차 친효스킨 2.0 설명에 대한 유튜브 라이브 예고 안내 이번달인 8월 30일 일요일 저녁10시에 유튜브로 라이브를 합니다. 친효스킨 2.0에서 매우 많은 부분이 업데이트가 되었기 때문에 어떤식으로 사용하는지에 대해서 언급하고자 합니다. 많은 분들의 참여를 부탁드립니다. 친효스킨 2.0에서 달라진 점 친효스킨 1.7X 까지는 커버 기능이 없었습니다. 또한 인덱스 페이지의 목록 구성 부분도 빠진 상태였습니다. 그리고 몇 가지 자잘한 오류들이..
안녕하세요, 친절한효자손 입니다. 친효스킨 2.0이 개발 완료 되었습니다. 현재 열심히 테스트 블로그에서 사용 중 이고 일부 기능들은 이미 본 블로그에 적용이 완료 된 상태 입니다. 하지만 혼자만의 경험만으로는 아직까지 문제점이 파악이 되지 않고 있습니다. 완벽하게 수정했다고 볼 수 있겠으나 늘 사고는 뜻하지 않은 곳에서 발생하곤 하죠. 그래서 친효스킨 v2.0을 한시라도 빨리 만나고 싶어하시는 분들을 대상으로 먼저 선배포를 하려고 합니다. 먼저 사용해 보시고 어떤 문제점이 있는지, 어떤 부분들이 개선되었으면 하는지 피드백을 주실 분들을 모집하려 합니다. 이분들은 친효스킨 최신 버전을 먼저 사용해보는 혜택을 누릴 수 있습니다. 친효스킨 2.0의 개선 사항은 본문 아래에 사용설명서 글을 따로 링크해 두었으..
안녕하세요, 친절한효자손 입니다. 코로나 때문에 밖을 또 못나가게 생겼습니다. 진짜 잠잠해진다 싶으면 안전불감증 때문에 또 이렇게 문제가 커져버리니... 한창 교육을 신나게 해도 부족할 판에 다시 모임을 모두 중단해야하는 상황에 직면하고 말았습니다. 억울하지만 어쩔 수 없죠. 안전이 제일이니까요. 밖에도 못나가는 날에는 뭘 해야 할까요? 그렇습니다. 신나게 코딩 삼매경에 빠져야 합니다. 오늘도 열심히 친효스킨을 업그레이드 시키고 있습니다. 갑자기 버전이 껑충 뛰어올랐습니다. 그렇습니다. 정말 많은 기능들이 추가가 될 것이기 때문입니다. 이번 2.0 버전에는 엄청난 변화가 일어났습니다. 이제 사용자가 좀 더 편리하게 스킨을 편집할 수 있습니다. 그동안 자주 질문주셨던 내용을 적극 반영하여 원하는대로 커스터..
목차 매번마다 완벽한 스킨을 제작하겠노라고 외치지만 역시 사람은 실수를 합니다. 이번 친효스킨 1.17 버전도 지난 버전 대비 대폭 좋아진게 사실입니다. 하지만 그럼에도 불구하고 버그가 발생하고 있습니다. 이번 버전에서도 몇 가지 오류를 발견했고, 다행스럽게도 많은 분들이 제보와 도움을 주셨습니다. 현재 친효스킨 다운로드 페이지에는 긴급한 몇 가지 문제를 수정하여 다시 파일을 재업로드해둔 상태 입니다. 친효스킨 1.175 버전으로 파일이 올라가 있습니다. 1.175 버전은 본문에서 설명하는 모든 문제가 해결된 파일 입니다. 따라서 기존 스킨 위에 덮어쓰기를 하셔도 되고 본문의 내용을 정독하시어 수동으로 수정하셔도 됩니다. 물론 덮어쓰기 할 때는 기존에 설정해둔 개인 코드들은 반드시 백업해줘야 합니다. 친..
친효스킨 커스텀 강좌 입니다. 이번 내용은 본문의 소제목으로서 역할을 하는 머리글에 대해서 수정하는 내용 입니다. 친효스킨에는 최대한 사용자가 수정을 용이하게 할 수 있도록 주석을 꼼꼼히 입력했습니다. 따라서 해당 내용에 대해서 대략적으로 검색하면 금방 찾을 수 있을 겁니다. "본문 소제목" 이라고 CSS에서 검색하시면 아래의 부분을 찾을 수 있습니다. 친효스킨 선택자 /* 본문 소제목 */ #contents .article h1, #contents .article h2, #contents .article h3, #contents .article h4, #contents .article h5, #contents .article h6 { padding: 2px 5px 4px; margin: 20px 0; ..
안녕하세요, 친절한효자손 입니다. 오랜만에 이렇게 공식 석상에서(?) 다시 한 번 인사를 드리게 되었습니다. 다름이 아니고 제목처럼 친효스킨 1.18 버전에 대한 간단한 안내를 드리려고 글을 작성하게 되었습니다. 이번 업데이트는 정말 친효스킨 역사상 가장 비전있는 업그레이드가 될 것 같습니다. 현재까지 2.0버전 개발 내용 베일에 쌓여있던 INDEX 문서에 대해서 하나 하나 수수께끼를 풀어나가는 중 입니다. 예전부터 사용자 편의성을 위해서 이 스킨 편집 페이지에서 쉽게 조작할 수 있는 부분을 파악 중 이었는데 솔직히 뭔 소린지 몰라서 미루고 있었습니다. 하지만 드디어! 하나 하나 정체를 파악하기 시작했습니다. 현재 우선 적용된건 보시는 것 처럼 최상단 및 최하단 애드센스를 쉽게 활성화 시킬 수 있도록 개..
안녕하세요, 친절한효자손 입니다. 친효스킨을 사용하시는 분들이 아주 조금씩 늘어나고 있습니다. 뿌듯합니다. 더욱 증진하도록 하겠습니다. 현재 친효스킨 사용자 중 상단 애드센스의 오류가 보고되었습니다. 오류 내용은 일부 해상도 구간에서 상단의 애드센스 2개 광고가 세로 형태로 배치가 되는 문제 입니다. 문제의 원인을 파악했으며 현재 수정 완료 되었습니다. 불편을 드려 죄송합니다. 요약 내용은 다음과 같습니다. -본문 상단 애드센스에 대하여 1000px~1010px 해상도에서 2개의 애드센스가 세로로 배치되는 문제-친효애드온 미디어쿼리 수정으로 해결 : 문제의 해상도에서 광고가 1개만 나타나도록 수정 따라서 아래의 친효애드온 페이지에 방문하시어 첨부파일을 다운로드 받으시고 불편하겠지만 다시 재수정을 하셔서 ..
친효스킨 1.16 버전 이상부터는 본문에 "리디바탕체"가 기본 글꼴 입니다. 1.17 버전에서는 "이롭게 바탕체"로 변경될 예정 입니다. 둘 다 큰 차이는 없습니다. 모바일에서도 두 글꼴 모두 가독성이 뛰어납니다. 하지만 윈도우에서는 리디바탕체가 다소 두껍게 보이는 듯 합니다. 이 부분의 단점을 해결하기 위해서 이롭게 바탕체로 변경을 진행 합니다. 1.17 버전에서는 기본으로 적용되어 있지만 수동으로 사용해보고자 하시는 분들은 아래의 방법대로 진행하시면 됩니다. 이롭게 바탕체 다운받기 아래의 홈페이지에 방문하시어 "이롭게 바탕체"를 다운로드 받으시기 바랍니다. 이롭게바탕체 배포 공식 웹페이지 다운로드 완료 후 압축을 풀면 폰트파일이 총 4개가 있을 것 입니다. 이 네개의 파일 중, IropkeBatang..
안녕하세요, 친절한효자손 입니다. 코로나19로 다들 많이 힘드시죠? 조금만 참고 견디면 됩니다. 얼마 안 남았잖아요? 이 시기를 잘 극복하여 더 이상 주변 사람들이 아플일이 없도록 만들어 봅시다. 오늘은 친효스킨 v1.17 업데이트에 대해서 완료가 되었다는 기쁜 소식을 전해드리기 위해서 이렇게 글을 작성하게 되었습니다. 업데이트된 내용을 한번 간략히 살펴보겠습니다. 친효스킨 v1.17 업데이트 내용 -친효애드온 : 포스트잇 모듈 마크1 적용 완료 -블로그정보 모듈 URL 텍스트 주소 입력 시 사이드바의 가로 사이즈를 초과하여 넘어가는 문제 수정 -블로그정보(프로필) 모듈 아래에 SNS 관련 아이콘 추가 -새로운 글쓰기 에디터 : 코드블럭의 선택자 및 매소드 수정 -새로운 글쓰기 에디터 : 더보기 및 접기..
친효스킨 1.17 버전에서 적용되는 기능인데, 물어보시는 분들이 좀 계셔서 아예 이렇게 따로 언급하는게 더 낫겠다는 생각으로 강좌글을 하나 올립니다. 방법은 어렵지 않습니다. 현재 친효스킨 사이드바에는 프로필 (블로그정보) 모듈이 있습니다. 이 아래에 페이스북, 트위터, 인스타그램, 유튜브, 그리고 이메일로 바로갈 수 있는 아이콘을 배치했습니다. 어떻게 배치하는지 알아보도록 합니다. HTML 수정 먼저 친효스킨의 HTML에서 아래의 영역을 찾습니다. "블로그정보" 라고 검색하면 쉽게 찾을 수 있습니다. 블로그정보 이 부분 입니다. 여기를 수정해 줘야 합니다. 아래의 첨부파일에 있는 태그로 모두 교체해주시면 됩니다. 위의 첨부파일 중에서 수정해야 할 부분은 다음과 같습니다. 바로 이 부분 입니다. 먼저 a..
친효스킨의 오른쪽 상단에는 여러가지 아이콘들이 있습니다. 왼쪽부터 홈으로, 전체글보기, 방명록, 글쓰기, 관리자, 로그인/로그아웃 버튼 입니다. 이 중에서 글쓰기 버튼은 현재 구형 글쓰기 에디터로 들어가도록 설정되어 있습니다. 신형(새로운) 글쓰기 에디터를 사용하시는 분들이라면 이게 불편할수도 있습니다. 따라서 이 부분을 변경하는 방법에 대해 알아보고자 합니다. 우선 친효스킨의 HTML에서 아래의 영역을 찾습니다. "글쓰기" 라고 검색하면 쉽게 찾을 수 있을 겁니다. 이 부분 입니다. 여기에서 어디를 수정해야 좋을지 감이 오시나요? 그렇습니다. 이 부분 입니다. 여기에서 a href 부분의 URL 주소만 변경해 주면 됩니다. 즉 /admin/entry/post 를 신형 주소로 바꿔주기만 하면 됩니다. 티..
현재 친효스킨의 본문의 경우는 word-break 매소드에 의해서 어디를 끊어서 다음줄로 넘길지에 대한 설정이 적용되어 있습니다. 친효스킨에 적용된 옵션은 break-all 로서, 글자 단위로 끊어서 다음 줄로 넘어가도록 설정되어 있습니다. 이 설정의 장점은 텍스트가 전체를 놓고 보면 가지런해서 보기가 좋다는 장점이 있습니다. 한글은 읽는데 큰 불편함은 없습니다. 단 영어의 경우는 다릅니다. 예를 들어서 apple 사과를 입력하면 보편적으로 이것을 한 글자로 인식하기 때문에 apple가 전체 다음줄로 내려가야 하지만, 그 줄에 딱 맞는 글자수를 체우고나서 나머지를 다음줄로 내려보내게 됩니다. 즉 ap까지하여 그 줄이 꽉 채워진 상태라면 ple는 다음줄로 넘어가게 되어 영어를 읽는데 상당히 어려워지는 문제..
친효스킨의 메인화면은 인덱스 페이지로 구성되어 있습니다. 글 목록이 최신 순으로 정리되어 출력됩니다. 맨 위의 글이 가장 최신 글 입니다. 그리고 목록 내용은 가장 왼쪽에 썸네일 이미지가 출력됩니다. 그리고 오른쪽으로는 제목, 본문 시작 부분의 텍스트 내용, 카테고리, 글 작성날짜와 시간이 나타나게 되어 있습니다. 여기에서 우리가 수정하고자 하는 부분은 본문의 텍스트 내용에 대한 줄 개수를 수정하는 방법 입니다. 친효스킨의 기준 해상도는 모바일 (스마트폰) 입니다. 즉 스마트폰으로 봤을 때 인덱스 페이지를 살펴보시면 본문에 대한 텍스트의 미리보기가 출력되지 않고 있음을 확인 할 수 있습니다. 썸네일과 제목, 카테고리, 발행일 및 날짜는 나오지만 본문 내용의 텍스트는 나오지 않습니다. 결국 이 의미는 특정..
현재 친효스킨에는 PC 해상도를 기준으로 스크롤을 조금 내리면 오른쪽 하단에 TOP버튼 외 3개의 버튼이 나타나도록 설계가 되어 있습니다. 이 버튼은 모바일 해상도에서는 크기가 약 30% 작아집니다. 하지만 모바일에서 볼 때 다소 눈에 거슬리시는 분들도 계실 수 있습니다. 따라서 모바일 해상도에서는 아예 보이지 않도록 설정하는 방법에 대해 알아보겠습니다. 먼저 친효스킨의 CSS에서 아래의 부분을 검색합니다. "TOP버튼" 이라고 찾으면 됩니다. /* 친효애드온 : TOP버튼 시작 */ #topBtn { display: none; position: fixed; right: 0; bottom: 80px; transform: scale(0.7); -webkit-transform: scale(0.7); tran..
친효스킨의 글꼴을 변경하는 방법 입니다. 그런데 전체가 아닌 본문에 대해서만 안내해드리는 이유는 스킨이 깨질 수 있기 때문 입니다. 현재 친효스킨의 기본 폰트는 "나눔고딕" 폰트 입니다. 사이드바에도 나눔고딕폰트가 적용되어 있습니다. 하지만 이 글꼴이 바뀌면 사이드바의 형태도 변화가 생길 수 있기 때문에 비추천 합니다. 친효스킨을 아름답고 오류가 없이 사용하시려면 본문에 대해서만 변경하시는것을 추천합니다. 이 외의 개인 욕심에 의해 오류가 발생하는 부분은 도와드리지 않습니다. 폰트 변경에 대한 자세한 방법을 예전에 작성한 바 있습니다. 여기에서는 별도의 폰트 파일이 아닌 구글 웹폰트를 기준으로 설명을 드립니다. 아래의 글을 참고해 주시기 바랍니다. 구글폰트를 이용한 티스토리 글씨체(글꼴) 스타일 변경 방..
친효스킨 커스터마이징에 대한 카테고리 입니다. 보통 요청에 의해 작성됩니다. 본문의 텍스트 줄 간격이 다소 좁다고 생각되시면 아래의 방법으로 조절이 가능합니다. 친효스킨의 CSS에서 아래의 코드를 검색하시기 바랍니다. "진짜본문" 이라고 검색하면 쉽게 찾을 수 있습니다. /* 진짜본문 (article_rep_desc) */ #contents .article { word-break: break-all; -webkit-word-break: break-all; padding: 20px; border: 1px solid #E5E5E5; border: 1px solid var(--subColor); font-family: "RIDIBatang", "Nanum Gothic" serif; font-size: 17px..
친효스킨에는 이미지 테두리가 적용되어 있습니다. 본문에 이미지를 삽입하면 자동으로 테두리가 적용됩니다. 제가 강좌글을 많이 작성하는데 스크린샷 이미지를 많이 사용합니다. 화면의 일부만을 캡쳐하는 일이 많다보니 흰색 배경의 경우는 본문의 영역과 구별이 잘 안 되는 부분이 있을때가 많습니다. 그래서 이미지에 #CCC 색상의 밝은 회색계열의 테두리가 얇게 들어갑니다. 이 스타일을 해제하는 방법은 다음과 같습니다. 친효스킨의 CSS에서 아래의 영역을 검색합니다. /* 티스토리 본문 이미지 (새로운 글쓰기 에디터) */ .tt_article_useless_p_margin > figure.imageblock { margin: 25px auto 20px !important; outline: 1px solid #ccc..
안녕하세요, 친절한효자손 입니다. 오늘 확인해보니 친효스킨 1.16 버전에서 새로운 글쓰기 에디터를 사용하시는 분들에게 해당되는 문제 입니다. 첨부파일을 올리면 파일명이 짧은건 상관 없는데 긴 경우, 본문의 가로 사이즈를 초과해 버리는 문제가 발생합니다. 해당 오류는 아주 간단하게 해결 할 수 있습니다. 친효스킨의 CSS에서 아래의 부분을 검색합니다. .tt_article_useless_p_margin > figure.fileblock a div.desc div.filename span.name { display: inline-block !important; max-width: 100% !important; height: 100% !important; padding: 5px 20px 7px !import..
친효스킨 커스터마이징 관련 글 입니다. 디스플레이 해상도에 따라서 본문 크기를 다르게 변경하고 싶은 경우에는 간단하게 미디어쿼리에 의해 동작하게 만들 수 있습니다. 친효스킨의 메인 해상도는 스마트폰을 기준으로 설계가 되어 있습니다. 따라서 미디어쿼리를 통해서 특정 해상도 이상일 때를 설계하고 해당 영역에 CSS 매소드를 만들어서 반응형으로 처리할 수 있습니다. 모바일(스마트폰)에서의 친효스킨의 본문 폰트 크기는 기본적으로 아래의 CSS에 마크업 되어 있습니다. 이 부분을 검색합니다. #contents .article { word-break: break-all; -webkit-word-break: break-all; padding: 20px; border: 1px solid #E5E5E5; border: ..
안녕하세요, 친절한효자손 입니다. 댓글로 일부 문제에 대한 제보를 받았습니다. 현재 1.16버전에서 알려진 문제는 다음과 같습니다. 1. 새로운 글쓰기 에디터에서 본문보다 가로폭이 작은 이미지를 삽입하고 해당 이미지에 텍스트 자막(캡션)을 매우 긴 내용으로 입력 시, 이미지가 자동으로 좌측정렬이 되는 문제 2. 구버전 및 새로운 글쓰기 에디터에서 리스트 스타일로 목록 입력 시, 일부 리스트 스타일이 정상적으로 출력되지 않는 문제 이 두가지 문제 입니다. 해당 문제는 육안으로 확인 했으며, 두가지 모두 1.17 버전에서는 수정이 완료 된 상태 입니다. 하지만 지금 당장 친효스킨을 사용해야 하므로 CSS에서 위의 문제를 해결하는 방법에 대해 설명드리고자 합니다. 이미지 좌측 정렬 문제 해결 방법 친효스킨 C..
안녕하세요, 친절한효자손 입니다. 현재 새로운(신규) 글쓰기 에디터로 글을 작성할 때 이미지를 삽입하면 화면을 초과하여 잘리는 문제가 발생하고 있습니다. 확인해보니 이미지에 강제로 가로 사이즈가 적용되는 문제였습니다. max-width: 860px; 으로 860픽셀로 고정이 되기 때문에 모바일에서 볼 때는 화면이 잘려 보이게 되고 가로 스크롤바가 생깁니다. 따라서 해당 매소드만 제거하면 되지만, 문서를 일일히 다 수정 할 수는 없는 노릇이므로 CSS를 수정해야 합니다. 앞으로 배포될 친효스킨 1.17 버전에서는 이 문제가 해결되긴 했지만, 아직 배포는 멀었으니 다음의 방법대로 친효스킨의 CSS를 수정해 주시기 바랍니다. 먼저 아래의 영역을 찾습니다. "새로운 글쓰기" 라고 검색하면 빠르게 찾을 수 있을 ..
안녕하세요, 친절한효자손 입니다. 친효스킨 1.16 버전을 업데이트 완료 했음을 알리는 글 입니다. 문서번호는 3119 입니다. 이번에 업데이트 된 내용은 다음과 같습니다. 친효스킨 v1.16 업데이트 내용- 본문 이미지 상/하단 여백 공간 수정- AMP 자동광고 코드 위치 변경- 본문, 댓글, 방명록의 텍스트 및 이미지가 가로로 넘치지 않도록 수정- 본문 표 가로로 넘치지 않도록 수정 (구형 글쓰기 표 에디터)- 새로운 글쓰기 에디터 : 첨부파일 스타일 수정- 새로운 글쓰기 에디터 : 본문 이미지의 margin 값 및 여백 수정- 댓글 및 방명록 글에 삽입되는 이모티콘 텍스트 가운데 정렬로 수정- 친효애드온 : 본문 공유 모듈 업데이트 → 카카오톡 공유 아이콘 추가- 친효애드온 : 본문 공유 모듈 업데..
친효스킨을 만들고 배포하고, 중간에 잠시 중단하는 사태도 있었으나... 인내를 가지고 열심히 틈나는대로 수정하고 개발해 왔습니다. 벌써 1년이라는 시간이 흐르고 있어요. 그동안 제 블로그에 댓글을 달아주시는 분들 중에서 그래도 친효스킨을 사용하시는 분들이 제법 많은 듯 하여 나름 뿌듯함을 느끼고 있습니다. HTML과 CSS에 대해 아무것도 모르고 무작정 티스토리에 입문하여 이것 저것 시행착오들을 겪으며 배워왔던 것들이 조금씩 빛을 보기 시작하는 듯 합니다. 아직 갈 길이 멀지요. 하지만 열심히 제 블로그에 대한 애착심을 키워가며 점차 발전되는 모습들을 보여드리지 않았나 싶습니다. 앞으로도 그럴 거구요. 직업전문학교를 다니면서 친효스킨 계획은 더욱 구체화 되었고, 어떻게든 만들어보려고 다른 스킨들을 분석해..