본문 바로가기

티스토리 꾸미기 | 인용구 따옴표 닫기 만들기

by Galam. 2024. 3. 15.
728x90

타이틀

목차

    인용구 따옴표 닫기 만들기

    스토리의 인용구 따옴표의 경우 열림 따옴표만 존재하고 닫힘 따옴표가 존재하지 않는 것이 기본값입니다. 이 경우는 CSS 값을 추가해 줌으로써 아래처럼 따옴표 닫기를 만들어 줄 수 있습니다.

     

    티스토리 꾸미기

    따옴표 닫기 미리보기

    인용구 따옴표 닫기 만들기
    티스토리 기본 인용구
    인용구 따옴표 닫기 만들기
    CSS 적용전 ▶ CSS 적용 후

    728x90

     

    티스토리 꾸미기

    따옴표 CSS 추가하기

    따옴표의 CSS를 추가하려면 먼저 CSS 탭으로 이동합니다.

    1. '관리자 홈'에서 '꾸미기 > 스킨 편집 > html 편집 > CSS'로 들어갑니다.

    인용구 따옴표 닫기 만들기


     

    2. 아래처럼 코드를 복사 후 CSS탭 맨 아래 넣어주고 '적용'을 눌러 마무리합니다.

    인용구 따옴표 닫기 만들기


     

    3. CSS코드 복사하기.

    css
    닫기
    /* 인용구 닫기 따옴표 추가 코드 */
    #tt-body-page blockquote[data-ke-style='style1']::after {
      content: '';
      display: block;
      background: url(https://t1.daumcdn.net/keditor/dist/0.4.9/image/blockquote-style1.svg) no-repeat 50% 0;
      padding-top: 34px;
      transform: rotate(180deg);
    }
    /* 인용구 닫기 따옴표 추가 코드 끝 */

     

    4. 미리보기를 통해서 CSS 적용 확인하기.

    - CSS 적용 시 글쓰기에서는 '닫기 따옴표'가 보이지 않으나 미리보기로 보면 적용된 모습을 확인할 수 있습니다.

    인용구 따옴표 닫기 만들기
    본문 작성 후 '미리보기'를 통해서 확인 합니다.

    728x90

     

    마무리

    이렇게 간단하게 CSS코드 추가만으로 '따옴표 닫기'를 만들어 봤습니다.

    검색을 해보니 오래전 부터 공유 되던 코드였는데, 저만 모르고 있었네요..^^

     

    원문은 아래 블로그를 참조하였습니다.

    출처 : 티스토리 인용구 따옴표 닫기 

     

     인용구 관련글 

    [▸ 티스토리 꾸미기] - 티스토리 소제목 꾸미기 | 인용구 서식(HTML) 스타일 모음

     

    티스토리 소제목 꾸미기 | 인용구 서식(HTML) 스타일 모음

    티스토리 인용구 서식(HTML) 스타일 모음 티스토리나 다른 블로그 플랫폼에서 '인용구'를 사용하는 이유는 주로 시각적 효과와 구조적 명확성 때문입니다. 시각적 구분: '인용구' 요소를 사용하면

    galam.tistory.com

    마감로고

    "쿠팡 파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있습니다"

    반응형

    ▸Googie 광고


    home