친효스킨 새로운 글쓰기 에디터 적용 완료 안내

안녕하세요, 친절한효자손 입니다. 스킨 관련해서 공지를 올립니다. 티스토리가 업데이트 되면서 새로운 글쓰기 에디터가 생긴것을 아마 다들 아실 것 입니다. 이 새로운 글쓰기 에디터에 대한 지원 여부를 문의주시는 분들이 몇 분 계셨습니다. 어차피 언젠가는 적용을 해야만 했고 쇠뿔도 단김에 빼랬다고 얼른 생각날 때 부랴부랴 작업해 버리자고 결심했습니다. 현재 작성한 이 문서도 신규 글쓰기 에디터로 작업한 결과물 입니다.

본문 소제목 스타일 적용

이 부분도 적용이 됩니다. 이미 기존에 친효스킨에 기본적으로 들어있는 부분이기에 따로 스타일을 지정하지 않아도 이렇게 적용이 됩니다. 위의 제목은 제목2로 설정해서 적용시킨 모습 입니다. 제목1로 하면 좀 더 글씨가 커집니다. 또한 중간 B태그의 형광펜 적용도 동일하게 작동합니다.

기타 글씨 꾸미기 적용

현재 본문에서도 확인 가능하듯, 굵게 강조하는 기능 및 기울기, 글씨 밑줄 넣기, ~~가운데 취소선 긋기~~, 글자색 변경 및 글자 백그라운드에 색상 적용 등 다양한 글씨 꾸미기 기능이 완벽하게 적용 중 입니다.

글 단락 정렬 및 구분선

다음은 단락 정렬에 대한 부분입니다. 기본적으로 왼쪽 정렬로 이루어져 있습니다. 친효스킨 및 대부분의 티스토리 스킨은 본문의 글 단락에 대해서 왼쪽 정렬이 기본입니다. 한번 이 부분도 조절해 보겠습니다.

이것은 왼쪽 정렬 입니다.

이것은 가운데 정렬 입니다.

이것은 오른쪽 정렬 입니다.

중간 중간에 구분선도 넣어봤습니다. 이상 없이 적용됨을 확인할 수 있습니다.

사진 이미지 넣기 적용

보시는 것 처럼 이미지도 정상적으로 적용 됩니다. 또한 이전과 다르게 에디터에서 이제 이미지 좌/중앙/우 정렬을 쉽게 할 수 있도록 UI가 개선되었습니다. 직접 테스트해 보시면 쉽게 사용 가능합니다. 그 밖에 이미지를 감싸서 텍스트가 올라오는 기능도 정상 동작합니다. 이미지는 기존 구형 글쓰기 에디터처럼 테두리가 들어가도록 설정했으며, 캡션 (설명란) 도 구분이 되도록 백그라운드 색상 및 기울기 스타일을 적용하였습니다.

첨부파일 스타일

다음은 첨부파일 스타일에 대한 적용 예시 입니다. 먼저 수정하지 않은 기존의 첨부파일 스타일 입니다.

이렇게 출력이 됩니다. 오리지널 첨부파일 스타일은 가운데 정렬로 진행 됩니다. 다음은 새로운 에디터 전용 친효스킨 첨부파일 스타일 입니다.

이미지 파일 예제.zip

0.12MB

캐쥬얼한 디자인으로 꾸며봤는데 나름 마음에 듭니다. 오리지널 첨부파일 스타일은 가로 폭이 고정 형태여서 첨부파일의 파일명이 길어지면 자동으로 생략되도록 설정되어 있습니다. 이 스타일은 첨부파일명의 길이에 따라 가로 사이즈가 변합니다. 또한 파일 용량 표시의 백그라운드 색상을 살짝 더 어둡게 하였고 글씨는 가운데 정렬을 하여 눈에 띄게 만들어 봤습니다. 이로 인하여 왼쪽 정렬이 기본 위치이며 가운데 정렬은 불가능 합니다.

유튜브 동영상 적용

유튜브 동영상은 기존 플러그인으로 하면 썸네일이 일부 잘리는 현상이 발생합니다. 따라서 수동으로 넣는 방법을 추천합니다.

이렇게 적용되어서 반응형 스킨에 맞게 가로 사이즈가 알아서 변합니다.

접은글 (더보기 & 접기) 기능 적용

기존 구형 에디터에서와는 다른 태그가 사용되었기에 새롭게 스타일을 만들었습니다. 이 또한 완벽하게 적용되었습니다. 아래의 더보기 버튼을 눌러보세요.

이렇게 접은글에 대한 내용을 확인하실 수 있습니다.

접은글 기능도 잘 적용되었음을 알 수 있습니다. 접은글 사용 후, 한 줄을 띄우고 난 후부터 글 작성을 하시는 것을 권장합니다. 훨씬 보기가 좋습니다.

리스트와 테이블 적용

리스트는 ul과 ol로 이루어진 태그 입니다. 이 부분도 친효스킨에 적용시켰습니다. 아래는 예제 입니다.

리스트1
리스트2
리스트3

또 다른 리스트 예제 입니다.

리스트4
리스트5
리스트6

마지막 세번째 숫자 형태의 리스트 예제 입니다.

리스트7
리스트8
리스트9

이처럼 완벽하게 적용됩니다. 테이블의 경우도 잘 적용됩니다.

테이블
합치기도 잘 됨	셀1	셀2	셀3	셀4
합치기도 잘 됨	셀5	셀6	셀7	셀8

이전 글쓰기 에디터보다 훨씬 더 깔끔한 표가 삽입되네요. 새로운 에디터에서 마음에 드는 기능 중 하나 입니다. 이제 친효애드온 표를 사용하지 않아도 될 것 같습니다.

텍스트 글씨에 직접 링크 지정 적용

글 단락 중간에 링크를 걸어야 하는 경우가 있습니다. 이 부분에 대해서도 스타일을 적용시켰습니다. 여기를 누르시면 친절한효자손 메인 페이지로 이동합니다. 이와같이 방금 문단의 "여기" 라는 글씨에 링크가 걸려있고 스타일은 보시는 것 처럼 푸른 계열 색상으로 되어 있으며 글씨가 두껍게 변하고 마우스를 올리면 밑줄이 생성되며 빨간색으로 변경됩니다.