친절한효자손 취미생활

안녕하세요, 친절한효자손 입니다. 원래는 친효스킨 다운로드 페이지에 업데이트 항목이 있었고, 해당 내용은 더보기/접기 기능으로 삽입되어 있었습니다. 그런데 업데이트 할 때마다 내용이 점점 길어집니다. 너무 길어지는 것 같아서 페이지를 따로 분리하는게 낫겠다고 판단했습니다. 앞으로 업데이트는 계속 진행될 것이고, 그러면 내용이 점차 무한대로 늘어날텐데 한 페이지에서는 도저히 감당이 안 될 것 같거든요. 양해 부탁드립니다. 업데이트 내용은 앞으로 지금의 이 페이지에서 확인하실 수 있습니다.

 

Ver 1.1

2019.2.18

- 방명록 프로필 이미지 보이도록 설정

 

2019.2.20

- 사이드바 애드센스 사이즈 최적화

- 본문 댓글쓰기 버튼 마우스 오버시 약간 어두워지게 변경

 

2019.2.24

- 콘테이너 중앙정렬을 기본값으로 변경

 

2019.2.26

- 로그인 / 로그아웃 버튼 헤더 상단바에 적용

- 모바일 해상도에서 검색창과 메뉴버튼을 한 줄 정렬에서 위 / 아래로 나눔

 

2019.2.28

- 최하단용 애드센스 공간 추가

- contents 영역의 margin-bottom 20px 삭제

- footer 세로크기 padding 값을 조금 늘림

 

2019.3.4

- 카테고리 새 글 발행 표시 변경

 

2019.3.12

- 모바일 해상도에서 인덱스 페이지에 썸네일 추가 (애드센스간의 간격을 넓혀 무효클릭을 줄이기 위함)

 

2019.3.13

- 사이드바 달력 모듈에서 날짜를 클릭하면 해당 날짜에 작성한 포스팅만 출력하도록 수정

- 페이지 넘버 외곽선 삭제 및 모바일 해상도에서 폰트 사이즈 축소 (가로 한 줄로 표시되게 수정)

 

2019.3.15

- 해상도가 600px 이상일 때, 인덱스 페이지 글 제목을 최대 2줄까지 출력되도록 변경

 

2019.3.18

- 해상도가 600px 이상일 때, 인덱스 페이지 본문 내용을 최대 2줄까지 출력되도록 변경

 

2019.3.19

- 본문 더보기/접기 기능 시각적으로 구분될 수 있도록 스타일 변경

- 본문 표 작성시, 표 안에 이미지를 넣으면 출력이 안 되던 문제 해결

 

Ver 1.12

2019.3.21

- 본문에서 고정 크기의 iframe (유튜브) 첨부 시, 모바일 해상도에서 가로 사이즈가 넘쳐서 가로 스크롤바가 생기는 문제 해결

 

2019.3.26

- 본문에서 머릿글 (h1~h6) 에 해당하는 스타일 크기 적용

 

2019.3.27

- 비로그인, 로그인 상관없이 방명록에 글을 작성할 때, 비밀글로 작성할 수 있도록 수정

 

2019.3.31

- 댓글 개수 표시가 제대로 안 되던 오류 수정

- 댓글 쓰기 및 수정/삭제 버튼 마우스 오버 시 기본 테마 색상으로 변경되도록 수정

- root 변수 중 sidebarHoverColor 변수명을 mouseHoverColor 로 변경

 

Ver 1.13

2019.4.12

- 본문 이미지 첨부 시 그림자 효과 제거 (대신 #CCC 색상의 1px solid 스타일 테두리 선이 적용됨)

 

2019.7.9

- 검색 결과 키워드 간소화

- 페이지 아래의 페이징 부분을 TOP 10px 떨어뜨림

 

2019.7.10

- 추천글 모듈 글 목록 제목 줄임 없이 전체 텍스트가 출력되도록 설정 (친효애드온 - 사이드바 배지 적용 때문에 수정함)

 

2019.7.11

- 메인화면 인덱스 페이지의 테두리도 var 변수를 적용하여 마우스를 올렸을 때 색상이 사용자 임의대로 변경되도록 수정

- 브라우저 오른쪽 하단에 스크롤을 일정 범위 아래로 내리면 나타나는 TOP 버튼 추가

 

2019.7.14

- 인덱스 페이지 마우스 오버 시 썸네일 이미지 brightness 115% 적용

 

2019.7.18

- width: 1000px 미만 해상도에서 모바일 버튼 왼쪽에 카테고리 버튼 추가 (사이드바가 본문 아래로 내려가기 때문에 카테고리로 편리하게 이동할 수 있음)

 

Ver 1.14

2019.7.20

- 본문 아래에 공유하기 모듈 추가 (페이스북, 트위터, 구글플러스, 카카오스토리, 네이버) (친효애드온으로 사용 가능)

 

2019.7.21

- footerColor 변수를 삭제하고 mainColor로 통합 (푸터 색상까지 메인 색상으로 합침)

 

2019.7.24

- 댓글 리스트를 최신 순으로 정렬되도록 수정

- 댓글 리스트 마지막에 있는 "이전 댓글 더보기" 문구 스타일 변경

- "더보기 및 접기" 기능을 더욱 직관적으로 구분 짓도록 스타일 변경 (친효애드온 모듈 제작)

 

2019.7.28

- 추천글 강조 배지 스타일 변경

- 헤더 영역에 border-bottom 속성 추가 (본문과 헤더 영역이 구별되도록 보이게 하기 위함)

 

2019.7.31

- 헤더 바로 아래쪽, 푸더 바로 위쪽에 빈 공간 DIV 추가하여 헤더와 푸터로부터 콘테이너 영역의 간격을 유동성 있게 조절할 수 있도록 변경

- CSS 스타일 영역 코딩 구별을 쉽게 하기 위해서 주석 내용을 눈에 띄도록 일부 변경

 

2019.8.1

- 여러 영역 padding 및 margin 값 변경 (본문과 본문 아래, 사이드바, 방명록 등)

- 본문 아래의 태그, 공유모듈, 관련글, 댓글 리스트 등 모두 하나의 article-bottom 으로 묶음

- 메인 색상 적용 범위 변경

- "더보기 및 접기" 기능 버그 수정

- 첨부파일 스타일 변경

- 고정형 헤더 해제 (모바일 해상도에서 상단에도 애드센스 앵커 광고가 나타나게 하기 위함이며, 동시에 TOP 버튼 활용도를 높이기 위함)

- 블로그 타이틀 폰트 크기 반응형에 맞게 변경

- 본문 h1~h6 태그 폰트 크기 변경

 

2019.8.15

- 헤더 바로 아래쪽, 푸더 바로 위쪽에 빈 공간 DIV 추가하여 헤더와 푸터로부터 콘테이너 영역의 간격을 유동성 있게 조절할 수 있도록 변경

- CSS 스타일 영역 코딩 구별을 쉽게 하기 위해서 주석 내용을 눈에 띄도록 일부 변경

 

2019.8.18

- 본문에 사용되는 b태그 스타일을 형광펜 스타일로 변경 (친효애드온)

 

2019.8.21

- 새로운 글쓰기 에디터를 지원하도록 스타일 적용

- 구형 글쓰기 에디터용 업데이트된 더보기 & 접기 스타일 적용

- 친효애드온 : TOP버튼 모듈 적용

 

2019.8.22

- TOP버튼 외 글쓰기, 관리자, 카테고리 바로가기 버튼 추가

- 반응형 유튜브 스크립트 적용 (기존 CSS 스타일 주석처리 삭제)

- 인피드 광고 기본 옵션을 비허용으로 변경

 

2019.8.23

- 댓글 및 방명록 리스트 간 간격 조절 및 스타일 일부 변경

- 메인색상 및 서브색상 적용 범위 수정

 

2019.8.28

- TOP버튼 친효애드온에 설명 말풍선 추가

- header 영역 중 모바일 메뉴 항목 관련 위치 수정

 

Ver 1.15

2019.9.2

- 애드센스 최상단 및 최하단 광고 크기 최대 세로 100px 이하로 출력되도록 수정

 

2019.9.8

- 구형 글쓰기 에디터 더보기 및 접기 버튼 스타일 수정

- 새로운 글쓰기 에디터 첨부파일 스타일 수정

 

2019.9.18

- 이미지에 테두리 적용 후 선명도가 살짝 떨어지는 문제 수정

 

2019.9.22

- 비로그인시 댓글 남기기 항목에 보이는 이름, 비밀번호, 홈페이지 입력칸 색상 변경

- 비밀글 체크박스 및 폰트 크기 변경

- 인피드광고 관련 CSS 일부 삭제 (보이기/안보이기 기능은 이제 필요 없어서 삭제 조치)

 

2019.10.9 (한글날)

- 본문 글꼴을 '리디바탕체'로 변경

 

2019.10.10

- 인덱스 페이지 전면 수정 (썸네일 크기 120px × 120px 고정)

- 본문 아래 관련글 모듈 전면 수정 (썸네일 크기 변경)

 

2019.10.13

- 사이드바 및 본문 가로 크기 수정

- 본문에 썸네일 이미지 없을 시 인덱스 페이지 썸네일에 기본 이미지가 출력되도록 수정 (위 이미지 참고)

- 반응형 크기에 따라서 인덱스 페이지 썸네일의 세로 위치가 중앙에 오도록 자동 조절

 

2019.10.19

- 보호글 CSS 스타일 마크업 (관련 HTML 일부 수정)

- 본문 가로폭을 쉽게 변경할 수 있도록 수정

 

2019.10.28

- 친효애드온 : 커스텀 DIV박스 적용

 

Ver 1.16

2019.11.9

- 본문 이미지 상/하단 여백 공간 수정

 

2019.11.26

- AMP 자동광고 <body> 코드 위치 변경

 

2019.12.1

- 본문, 댓글, 방명록 word-break: break-all; 추가 (텍스트 및 이미지가 가로로 넘치지 않도록 수정)

- 본문 표 가로로 넘치지 않도록 수정 (구형 글쓰기 표 에디터)

 

2019.12.9

- 새로운 글쓰기 에디터 : 첨부파일 스타일 변경 (CSS 수정) - 여기를 눌러서 수동 업데이트를 진행하시기 바랍니다.

- 새로운 글쓰기 에디터 : 본문 이미지의 margin 값 및 여백 수정

 

2019.12.22

- 댓글 및 방명록 글에 삽입되는 이모티콘 텍스트 가운데 정렬로 수정

 

2020.1.3

- 친효애드온 : 본문 공유 모듈 업데이트 → 카카오톡 공유 아이콘 추가

 

2020.1.6

- 친효애드온 : 본문 공유 모듈 업데이트 → 밴드 공유 아이콘 추가

- 본문 공유 모듈의 각 아이콘에 마우스를 올리면 타이틀 제목이 출력되도록 수정

 

2020.1.8

- 댓글 및 방명록 비밀글 체크박스에 V체크 시, 오른쪽에 비밀글에 대한 안내문이 출력되도록 수정

 

2020.1.19

- 본문 소제목(h1~h6) padding 값 일부 수정

- 친효애드온 : 커스텀 DIV 박스 폰트를 "D2Coding" 으로 변경

 

2020.2.1

- 로그인/로그아웃 아이콘 Title 텍스트값 서로 변경 (로그인 상태에서는 마우스를 올리면 "로그아웃"으로, 로그아웃 상태에서 마우스를 올리면 "로그인"으로 출력되도록 수정)

 

2020.2.3

- 본문 로드 시 Access-Control-Allow-Origin (CORS) 관련 스크립트 오류 때문에 <head>에서 불필요한 스크립트 삭제

 

2020.2.8

- 본문 텍스트에만 양쪽 정렬이 적용되도록 수정

 

2020.2.14

- 구형 글쓰기 에디터에서 제공되는 슬라이드쇼에 이미지 여러개 넣었을 때, 위/아래의 검정 영역 제거 및 이미지 출력 사이즈 수정 (본문에 꽉 차도록 변경)

- 표 안쪽에 이미지 넣었을 때 본문 가로 사이즈 초과되는 버그 임시 수정 (표 안에 이미지를 넣지 않는것을 추천)

 

2020.2.15

- 친효애드온 : 관련글 마크4 적용

 

2020.2.19

- <a href="#"> 사용 했을 때 마우스 클릭 시 반응이 없도록 스크립트 추가

 

Ver 1.17

2020.3.1

-친효애드온 : 포스트잇 모듈 마크1 적용 완료 (현재 이곳 본문에도 예시로 등록되어 있음)

 

2020.3.4

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

 

2020.3.5

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

 

2020.3.6

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

 

2020.3.9

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

 

2020.3.18

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

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

 

2020.3.24

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

 

2020.4.1

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

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

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

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

 

2020.4.15

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

 

2020.4.16

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

 

2020.4.18

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

 

2020.4.22

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

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

 

2020.4.24

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

 

2020.4.26

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

 

2020.4.28

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

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

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

 

2020.4.29

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

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

 

2020.4.30

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

 

Ver 1.175

2020.5.13

-해상도 1000~1010px 구간에서 친효애드온 PC 상단 2개 + 모바일 1개 애드센스 모듈 사용 시, 세로로 2개가 나란히 배치되는 문제 수정 (이미 애드온으로 수정 파일 배포 중 - 바로가기)

 

2020.5.15

-댓글 및 방명록 입력칸에 안내문구 삽입

-댓글 및 방명록 입력칸 세로 크기 수정

-스킨설정 페이지에 사이드바 표시 및 제거 버튼 추가

-스킨설정 페이지에 최상단/최하단 애드센스 표시 및 제거 버튼 추가

 

2020.5.19

-다음(카카오) 애드핏 중앙정렬이 안 되던 문제 수정

 

2020.5.30

-사이드바에 반응형 방문자 그래프 모듈 추가

 

2020.6.5

-스킨설정 페이지에 사이드바 STICKY 모드 추가

 

2020.6.11

-모바일 및 태블릿PC 해상도에서 모바일 전용 버튼을 누르면 헤더 아래로 div 영역이 슬라이드로 나타나는데, 이때 콘테이너 영역 상단 일부가 틀어지는 문제 수정 (버그 제보 너무 감사합니다!)

-새로운 글쓰기 에디터 : 익스플로러에서 본문보다 가로 크기가 큰 이미지가 본문 영역을 초과하던 문제 수정

-새로운 글쓰기 에디터 : 본문 이미지 크기 변경이 적용 안 되던 문제 수정

 

2020.6.13

-본문 목록 (TOC) 반자동 모드 적용 (CSS 대량 업데이트) - 유튜브 동영상 설명

 

Ver 2.0

2020.6.17

-스킨설정 페이지에 본문 오른쪽/왼쪽 위치 선택 버튼 추가

-스킨설정 페이지에 프로필 아래 SNS 아이콘 모음 보이기/없애기 버튼 추가

-본문 기본 링크 CSS 스타일 변경

-<h4>태그 스타일 변경 (구형 글쓰기 에디터: 머리말4 / 신형 글쓰기 에디터: 제목3)

 

2020.6.21

-스킨설정 페이지에 프로필 아래 SNS 아이콘별 ON / OFF 버튼 추가

-스킨설정 페이지에 프로필 아래 SNS 아이콘별 URL 입력창 추가

 

2020.6.22

-스킨설정 페이지에 메인/서브/마우스오버 색상 선택 옵션 추가

 

2020.6.27

-스킨설정 페이지에 본문 Bold 처리에 대하여 형광펜모드 / 두껍게 선택 옵션 추가

-스킨설정 페이지에 스킨 가로 사이즈 변경 입력창 추가

-스킨설정 페이지에 본문 리스트 기본 색상 변경 옵션 추가

 

2020.6.29

-스킨설정 페이지에 최상단/최하단 애드센스 클라이언트 및 슬롯값 입력창 추가

-푸터 영역 콘텐츠 반응형으로 변경

 

2020.6.30

-댓글 리스트 UI 스타일 변경

-TOP 버튼 꾸러미 위치 수정

 

2020.7.3

-새로운 글쓰기 에디터 : 더보기 / 접기 스타일 변경

-스킨편집 > 홈설정 > 목록구성요소의 "목록만" 스타일 추가

-본문 목차버튼 TOP버튼 꾸러미로 통합 (스킨설정 페이지에서 ON/OFF 설정 가능)

-스킨설정 페이지에 본문상단/본문하단 애드센스 활성화 버튼 및 슬롯값 입력창 추가

 

2020.7.12

-검색 결과에 대한 "목록만" CSS 스타일 일부 수정

-본문의 소제목 h4 태그에 대한 선택자 수정 (플러그인 - "카테고리 글 더 보기" 소제목과 중복 적용되는 문제 수정)

 

2020.7.31

-스킨설정 페이지에 TOP버튼 꾸러미 모바일 해상도에서 왼쪽으로 출력하는 옵션 추가

-본문 하단 SNS 공유 버튼 중 "구글플러스" 삭제 (서비스 종료)

 

2020.8.4

-스킨설정 페이지에 프로필 이미지 ON / OFF 스위치 추가

-스킨설정 페이지에 본문 공유 모듈 ON / OFF 스위치 추가

-스킨설정 페이지에 TOP버튼 세트 투명도 입력창 추가

-모바일 해상도에서 카테고리 바로가기 아이콘 변경

 

2020.8.25

-본문 단락 가장 첫 글자에 margin-left를 10px 적용

-친효애드온 : 커스텀 DIV 박스의 클래스값 rgyBG3, rgyBG4, rgyBG5 3종을 새로 추가함

 

Ver 2.01

2020.9.20

-스킨편집 페이지 인피드 광고 옵션 추가

-스킨편집 페이지 댓글창 ON / OFF 버튼 추가

-스킨편집 페이지 프로필 설정 관련 메뉴 위치 변경

 

Ver 2.1

2020.9.23

-그리드 스타일 커버 추가

 

2020.10.3

-갤러리 스타일 커버 추가

-스킨편집 페이지 본문 상/하단 관련 애드센스 설정 항목 제거 : 플러그인을 사용하는것이 훨씬 편리함

-스킨편집 페이지 그리드 및 갤러리 커버의 썸네일 세로 크기값 설정 항목 추가

-스킨편집 페이지 본문 상/하단에 대한 애드센스 항목 제거

-스킨편집 페이지 본문 첫 텍스트 들여쓰기에 대한 값 설정 항목 추가

 

2020.10.9

-새로운 글쓰기 에디터 링크 첨부 시 스타일 변경

 

2020.10.15

-본문 로딩이 완료되면 페이지가 보이도록 만드는 스크립트 추가

-스킨편집 페이지 본문 로딩 ON / OFF 스위치 추가

 

2020.10.21

-스킨편집 페이지 메인화면 인덱스 + 커버 페이지 목록에 있는 삼각형 아이콘 ON / OFF 스위치 추가

-최상단 및 최하단 애드센스 영역 일부 수정 (Calc 방식을 삭제하고 padding: 0 20px로 변경)

 

2020.10.25

-스킨편집 페이지 본문 형광펜 모드 사용 시 색상 및 투명도 설정 항목 추가

 

2020.10.28

-댓글 혹은 방명록에 Ctrl+C / Ctrl+V 복붙 금지 스크립트 적용 (불필요한 댓글 품앗이 문화 방지 차원)

-관리자 애드센스 설정 완벽 적용

 

2020.10.30

-스킨편집 페이지 본문 이미지 테두리 ON / OFF 옵션 추가

-새로 업데이트된 애드센스의 margin(여백 공간)값 새로 적용 - 본문 상/하단 및 중간 자동광고

 

2020.10.31

-스킨편집 페이지 본문 자동 링크 생성 스타일 선택 옵션 추가

 

마무리

앞으로도 무한히 발전하는 친효스킨을 운영하겠습니다. 티스토리 최고의 무료 반응형 스킨으로 자리매김 할 수 있도록 최선을 다 할 것 입니다. 많이 사용해 주시고 많은 피드백과 오류 제보를 주시면 감사하겠습니다. 끝.

이 글을 공유합시다

facebook twitter kakaoTalk kakaostory naver band
5

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

비밀글모드

  1. 친효님~ 다운 받아서 잘 적용하였습니다~~~ 감사해요!!
    2020.11.04 08:40 신고
    • 방문 감사합니다.
      2020.11.04 14:37 신고
    • 친효스킨 2.11 사용 감사합니다. 메인화면 보니까 카테고리명이 길어서 그런지 갤러리 커버가 살짝 이상하게 되어있네요. 제가 카테고리명을 짧게쓰다보니 이 부분까지는 체크를 못 했습니다. 따라서 갤러리커버 수정을 위해서 스킨 CSS에서 다음의 영역을 찾아서 모두 바꿔치기 해주시기 바랍니다.

      .rgy-cover-gallery-wrap .rgy-cover-gallery-wrap-inner .rgy-cover-gallery-wrap-inner-over {
      position: absolute;
      bottom: -120px;
      left: 0;
      width: 100%;
      padding: 10px;
      background-color: rgba(255, 255, 255, 0.8);
      transition: all 0.3s;
      -webkit-transition: all 0.3s;
      }
      이 부분과

      .rgy-cover-gallery-wrap .rgy-cover-gallery-wrap-inner .rgy-cover-gallery-wrap-inner-over .rgy-cover-gallery-wrap-inner-over-bottom {
      padding-top: 15px;
      }

      .rgy-cover-gallery-wrap .rgy-cover-gallery-wrap-inner .rgy-cover-gallery-wrap-inner-over .rgy-cover-gallery-wrap-inner-over-bottom > div {
      float: left;
      padding-top: 10px;
      font-size: 11px;
      }
      이 부분이에요. 번거롭게 해드려 죄송합니다. ㅠㅠ
      2020.11.04 14:49 신고
  2. 항상 감사드립니다 ^^ 감사한마음으로 쓰고있어요
    2020.11.06 06:29 신고
loading