티스토리 반응형 스킨! 친효스킨 1.17 버전 업데이트 완료 안내

안녕하세요, 친절한효자손 입니다. 코로나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) 입니다. 즉 친효스킨을 사용하시면 다른 티스토리 블로거 분들께서 이 스킨에 대해 관심을 갖게 될 것이고 스킨의 맨 아래 부분인 푸터 영역을 확인했을 때 제작자와 스킨명에 대한 정보를 얻게 될 겁니다. 따라서 푸터 영역은 절대로 편집을 하시면 안 됩니다. 친효스킨 사용자 중 몇 분께서 푸터 영역을 수정해서 사용하시는걸 목격했습니다. 잘 모르시고 수정하셨을수도 있으니까 혹시 이 글을 보신다면 다시 원래대로 푸터 영역을 복구해 주시기 바랍니다. 푸터 영역과 헤더 안쪽의 제작자 메타태그를 제외한 나머지는 얼마든지 본인 입맛대로 편집해서 사용하실 수 있습니다. 푸터 영역은 제작자를 위한 배려 공간 입니다.