친효스킨 - 새로운 티스토리 글쓰기 모드 적용 테스트

안녕하세요, 이것은 테스트 글 입니다. 친효스킨에 적용시키기 위한 테스트 글 입니다. 현재 새로운 글쓰기 에디터로 작성 중 입니다. 본문 중간에는 이런식으로 링크가 들어갑니다. 친절한효자손 취미생활 메인 티스토리 입니다.

이미지 관련

이미지보다 다소 긴 텍스트가 들어갈 때 캡션 영역이 이미지보다 가로로 길어집니다. 이미지보다 짧게 입력해 주세요.

이미지 테스트 입니다. 이미지에 캡션(자막 텍스트)을 추가할 때, 구형과는 다르게 신형은 가로로 초과되는 현상이 발생합니다. 친효스킨 뿐만 아니라 다른 스킨에서도 마찬가지 입니다. 따라서 캡션은 이미지 가로 사이즈보다 작게 입력하는걸 추천 합니다.

잘 업로드 되는지 테스트 해 보겠습니다. 보니까 기본적으로 신규 에디터에서는 figure로 이미지를 감싸줍니다. 또한 스타일 옵션을 살펴보니 이미지 밑으로 padding 값이 들어갔습니다. 그렇기 때문에 따로 엔터로 한 줄 내려쓰기를 하지 않고 바로 이미지 밑에 텍스트를 작성해도 됩니다.

지도 첨부

기타 기능

다음은 더보기와 접기 (접은글) 기능 입니다.

안녕하세요, 이것은 접은 글 입니다.

보시는 것 처럼 더보기와 접기 모두 적절히 잘 적용되고 있습니다.

무한 감사!!!

다음은 소제목 테스트 입니다. 신규 글쓰기 에디터에서는 제목과 본문 두 가지 옵션이 있습니다. 본문이라고 작성된 옵션은 단순히 폰트 크기를 키우는 형태 입니다. 따라서 우리가 주목해야할 것은 제목 옵션 입니다.

TOC.txt

0.00MB

머릿말 테스트 (제목1)

머릿말 테스트 (제목2)

머릿말 테스트 (제목3)

머릿말로서는 제목1 혹은 제목2의 스타일이 친효스킨과 가장 잘 어울리는 것 같습니다. 이미지와 머릿말은 정상적으로 적용되고 있습니다. 특히 새로운 글쓰기 모드는 플래시 플레이어를 사용하지 않기 때문에 편리합니다. 그도안 많은 버그 수정이 있었던 것 같습니다. 하지만 아쉬운점은 이전 글쓰기 모드에서 있었던 글상자 기능이 없어졌다는 것 입니다. 이 점은 조금 아쉽습니다. 본문 스타일로도 한번 작성해 보겠습니다.

본문1

본문2

본문3

본문4

본문5

본문6

이렇게 스타일이 지정됩니다. 다음은 인용구 스타일 입니다.

인용구1

인용구2

인용구3

특이점은 에디터에서 인용2 앞쪽으로 클릭을 하니 윗줄이 하나 생성된다는 것 입니다. 편리성을 위해서 일부로 이런 기능을 넣어둔 듯 합니다. 다음은 유튜브 영상 넣기 입니다.

https://youtu.be/EzRXHXsRiz8

유튜브 플러그인으로 유튜브 영상을 삽입할 때, 반응형으로 들어가지기는 하지만 썸네일 일부가 잘리는 현상이 여전히 있습니다. 따라서 별도로 스크립트를 통해서 소스 코드 그대로 사용하여 반응형으로 만들어야 합니다. 보시는 것 처럼 자동으로 가로사이즈가 본문에 맞게 조절됩니다.

위에 적용된 예시를 통해서 더보기 및 접기 기능을 살펴보실 수 있습니다. 이전 에디터에서는 마지막 부분에도 접기 문구가 생성되었는데 신규 에디터에서는 그냥 처음에만 생성되어 있습니다. 다음은 리스트 기능 입니다. 리스트 중간 중간에 링크를 삽입하면 기본 링크 스타일이 적용됩니다.

본문 중간 애드센스 (티스토리 관리자)

한번 넣어보겠습니다.

잘 나옵니다.

본문 어절 끊기

영어 : aasdkfjasleifaijvliajkdjflkasdlkfjalsdfijalisejflaishfihaislvhalsdjfklawejglkjasldjfjasgdhuvghuaksehfklahfoiavjhlaehfhalsifehaflsdhflkdjhalksdjflk

한글 : 동해물과 백두산이 마르고 닳도록 하느님이 보우하나 우리나라만세 무궁화 삼천리 화려강산 대한사람 대한으로 길이보전하세는개뿔을 보전해! 영의정 좌의정때랑 비교해볼때 의상만 바뀌었지 여전히 탐관오리들 천지로구나!

리스트 스타일

첫번째 리스트 스타일 입니다.

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

두번째 리스트 스타일 입니다.

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

세번째 리스트 스타일 입니다.

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

네번째는 리스트 2단형 이상 적용입니다.

1단 리스트
- 2단 리스트
  1. 3단 리스트
    - 4단 리스트
  2. 3단 리스트
- 2단 리스트
- 2단 리스트
1단 리스트
1단 리스트

미리 아래에 공백란을 만들고 리스트 작업을 해야 편리합니다. 그런데 세번째 숫자 타입의 리스트 형태는 이상하게 숫자가 표시가 되지 않는 문제가 있습니다. 친효스킨 뿐만 아니라 다른 스킨에서도 마찬가지 입니다. 따라서 마지막 리스트 형태는 사용하지 않는것이 좋겠습니다. 다음은 표 삽입 입니다.

표도 상당히	잘 들어갑니다.	깔끔하게요.	확실히	신규 글쓰기
에디터 기능 중	엑셀 표 기능은	많은 수정이 이루어	진 듯 합니다.	훨씬 깔끔하군요.
셀 합치기도 쉽습니다.	나누기는 해당 열이나	행에 그만큼 셀이 확보	되어야 가능한 것	같습니다.
셀 합치기도 쉽습니다.	멋지군요! 표 테마 기능도 제공합니다.

구분	본인부담금
	만1세미만	만1세이상~만6세미만	만6세이상~만65세미만	만65세이상			단수계산
치과 의원	5%	21%	30%	진료비총액	15,000원 이하	1,500원	100만원 미만 절사 (반올림X)
					15,000원 초과~20,000원 이하	10%
					20,000원 초과~25,000원 이하	20%
					25,000원 초과	30%
치과병원	10%	28%	40%	40%

대략적으로 알아본 티스토리 새로운 글쓰기 에디터의 모습 입니다. 친효스킨에서도 이상없이 적용 됩니다. 이 글을 참고하시어 신규 에디터를 사용하시면 되시겠습니다. 감사합니다. 여기를 누르시면 친절한효자손 취미생활 블로그로 이동합니다.

코드블럭 테스트

<s_sidebar_element>
    <!--공지사항-->
    <s_rct_notice>
        <div class="notice rgy-sidebar-title rgy-sidebar-content">
            <h3 class="title">공지사항</h3>
            <ul>
                <li><a href="/3311" target="_blank">티스토리 오프라인 교육 안내<span class="rgyBadge"></span></a></li>
                <s_rct_notice_rep>
                    <li>
                        <a href="[##_notice_rep_link" target="_blank">[##_notice_rep_title</a>
                    </li>
                </s_rct_notice_rep>
            </ul>
        </div>
    </s_rct_notice>
</s_sidebar_element>

코드블럭 스타일 정의를 진행합니다. 업데이트는 계속 진행됩니다.

링크글 테스트

남성 사타구니 가려울 때 바르는 광고 요즘 많이 나오던데...?

이거 그냥 자주 씻으면 됩니다. 굳이?! 또 연고를?! 스프레이를?! 가장 기본 중 기본은 씻기 아니겠어요? 그리고 통풍 잘 되는 속옷을 사용하시고 하루 한번씩 속옷 갈이입는것도 필수입니다. 진��

rgyhm.tistory.com

잘 적용됩니다. 다음은 친효애드온입니다.

볼드 처리에 대한 부분입니다. 이 부분이 꽤나 애를 먹었습니다. 기존 버전에서는 투명도를 적용시켰는데, 이 투명도가 들어있는 영역이 부모요소여서 여기에 적용시키면 글씨까지 영향을 줍니다. 따라서 친효스킨 2.2 버전에서는 아예 가상요소와 투명도를 없애고 백그라운드 컬러와 글씨 색상을 따로 지정하도록 변경했습니다. 그리고 블록요소를 삭제함으로서 글씨 밀림 현상을 해결했습니다. 보시는 것 처럼 볼드 처리를 자유룝게 지정해도 전혀 텍스트에 문제가 없습니다. 아주 보기 좋게 해결할 수 있어서 다행입니다.