티스토리, My Style 인용문 만들기

[Demo] 티스토리, My Style 인용문 만들기

Default CSS, word-break: keep-all Style 1. 생명체의 몸은 지금까지 생존해 온 유전자가 프로그램한 기계다. 지금까지 생존해 온 유전자는 과거에 그 종이 살아왔던 환경의 평균적 특징이 되는 조건들 속

dd-stuff.tistory.com

<!-- 서식 1 -->

<blockquote class="myQuote st1" cite="URL">
  <p>내용</p>
  <p class="cite">출처</p>
</blockquote>
<p>&nbsp;</p>

<!-- 서식 2 -->

<blockquote class="myQuote st2" cite="URL">
  <p>내용</p>
  <p class="cite">출처</p>
</blockquote>
<p>&nbsp;</p>

<!-- 서식 3 -->

<blockquote class="myQuote st3" cite="URL">
  <p>내용</p>
  <p class="cite">출처</p>
</blockquote>
<p>&nbsp;</p>

<!-- 서식 4 -->

<blockquote class="myQuote st4" cite="URL">
  <p>내용</p>
  <p class="cite">출처</p>
</blockquote>
<p>&nbsp;</p>

<!-- 서식 5 -->

<blockquote class="myQuote st5" cite="URL">
  <div>
    <p>내용</p>
    <p class="cite">출처</p>
  </div>
</blockquote>
<p>&nbsp;</p>

<!-- 서식 6 -->

<blockquote class="myQuote st6" cite="URL">
  <div class="qt"></div>
  <p>내용</p>
  <cite>출처</cite>
  <p class="cite">출처</p>
</blockquote>
<p>&nbsp;</p>

<!-- 서식 7 -->
<!-- 내용은 <P> 태그 한 줄에 작성되어야 함. -->
<!-- 줄 띄우기 하려면 Shift + Enter -->

<blockquote class="myQuote st7" cite="URL">
  <p>내용</p>
  <p class="cite">출처</p>
</blockquote>
<p>&nbsp;</p>

<!-- 서식 8 -->
<!-- 내용은 <P> 태그 한 줄에 작성되어야 함. -->
<!-- 줄 띄우기 하려면 Shift + Enter -->

<blockquote class="myQuote st8" cite="URL">
  <p>내용</p>
  <p class="cite">출처</p>
</blockquote>
<p>&nbsp;</p>

<!-- 서식 8-1 -->
<!-- 내용은 <P> 태그 한 줄에 작성되어야 함. -->
<!-- 줄 띄우기 하려면 Shift + Enter -->

<blockquote class="myQuote st8_1" cite="URL">
  <p>내용</p>
  <p class="cite"><cite>출처</cite></p>
</blockquote>
<p>&nbsp;</p>

<!-- 서식 8-2 -->
<!-- 내용은 <P> 태그 한 줄에 작성되어야 함. -->
<!-- 줄 띄우기 하려면 Shift + Enter -->

<blockquote class="myQuote st8_2" cite="URL">
  <p>내용</p>
  <p class="cite"><cite>출처</cite></p>
</blockquote>
<p>&nbsp;</p>

<!-- 서식 9 -->

<blockquote class="myQuote st9" cite="URL">
  <p class="qt">&ldquo;</p>
  <p>내용</p>
  <p>&nbsp;</p>
  <p class="qb">&rdquo;</p>
  <p class="cite">출처</p>
</blockquote>
<p>&nbsp;</p>

<!-- 서식 10 -->

<blockquote class="myQuote st10" cite="URL">
  <p class="qt">&ldquo;</p>
  <p>내용</p>
  <p>&nbsp;</p>
  <p class="qb">&rdquo;</p>
  <p class="cite">출처</p>
</blockquote>
<p>&nbsp;</p>

<!-- 서식 10-1 -->

<blockquote class="myQuote st10_1" cite="URL">
  <p class="qt">&ldquo;</p>
  <p>내용</p>
  <p>&nbsp;</p>
  <p class="qb">&rdquo;</p>
  <p class="cite"><cite>출처</cite></p>
</blockquote>
<p>&nbsp;</p>

<!-- 서식 10-2 -->

<blockquote class="myQuote st10_2" cite="URL">
  <p class="qt">&ldquo;</p>
  <p>내용</p>
  <p>&nbsp;</p>
  <p class="qb">&rdquo;</p>
  <p class="cite"><cite>출처</cite></p>
</blockquote>
<p>&nbsp;</p>

<!-- 서식 11 -->

<blockquote class="myQuote st11" cite="URL">
  <p><span>내용</span></p>
  <p class="cite"><cite>출처</cite></p>
</blockquote>
<p>&nbsp;</p>

blockquote.myQuote p { line-height:34px; margin:0 !important }
blockquote.myQuote p.cite { padding-top:16px !important; opacity:0.6 }

blockquote.myQuote.st1 { border-left:14px solid rgba(0, 0, 0, 0.2); padding: 4px 14px !important; word-break:keep-all }
blockquote.myQuote.st1 p.cite { text-align:right !important }

blockquote.myQuote.st2 { border:1px solid rgba(0, 0, 0, 0.5); padding:12px !important; border-radius:2px; word-break:keep-all }
blockquote.myQuote.st2 p.cite { text-align:right !important }

blockquote.myQuote.st3 { background-color:rgba(0, 0, 0, 0.1); padding:12px !important; border-radius:2px; word-break:break-all }
blockquote.myQuote.st3 p.cite { text-align:right !important }

blockquote.myQuote.st4 { border-left:8px solid rgba(0, 0, 0, 0.2); border-top-left-radius:16px; border-bottom-left-radius:16px; border-right:8px solid rgba(0, 0, 0, 0.2); border-top-right-radius:16px; border-bottom-right-radius:16px; padding:12px 18px !important; word-break:keep-all }
blockquote.myQuote.st4 p.cite { text-align:center !important }

blockquote.myQuote.st5 { border:10px solid rgba(0, 0, 0, 0.2); word-break:break-all }
blockquote.myQuote.st5 > div { width:calc(100% - 18px); height:fit-content; padding:20px 0px; position:relative; margin:-30px auto -30px auto; border-top:14px solid #fff; border-bottom:14px solid #fff }
blockquote.myQuote.st5 > div p.cite { text-align:center !important }

blockquote.myQuote.st6 { border:0px !important; padding:0px 48px !important; word-break:keep-all }
blockquote.myQuote.st6 div { width:30px; height:30px }
blockquote.myQuote.st6 div.qt { border-left:10px solid rgba(0, 0, 0, 0.2); border-top:10px solid rgba(0, 0, 0, 0.2); margin-left:-48px }
blockquote.myQuote.st6 div.qb { border-right:10px solid rgba(0, 0, 0, 0.2); border-bottom:10px solid rgba(0, 0, 0, 0.2); float:right; margin-right:-48px }
blockquote.myQuote.st6 p.cite { text-align:center !important }

blockquote.myQuote.st7 { border:1px solid rgba(0, 0, 0, 0.5); border-radius:2px; word-break:keep-all }
blockquote.myQuote.st7 > p:not(.cite)::before { font-family:'Arial'; content:'\201C'; font-size:60px; padding-right:10px; vertical-align:text-top }
blockquote.myQuote.st7 > p:not(.cite)::after { font-family:'Arial'; content:'\201D'; font-size:60px; padding-left:10px; vertical-align:text-top }
blockquote.myQuote.st7 > p { text-align:center; line-height:40px }
blockquote.myQuote.st7 p.cite { text-align:right !important }

blockquote.myQuote.st8 { border-left:0px !important; word-break:break-all }
blockquote.myQuote.st8 > p:not(.cite)::before { font-family:'Arial'; content:'\201C'; font-size:60px; padding-right:10px; vertical-align:text-top }
blockquote.myQuote.st8 > p:not(.cite)::after { font-family:'Arial'; content:'\201D'; font-size:60px; padding-left:10px; vertical-align:text-top }
blockquote.myQuote.st8 > p { text-align:center; line-height:40px }
blockquote.myQuote.st8 p.cite { text-align:center !important }

blockquote.myQuote.st8_1 { border-left:0px !important; word-break:break-all }
blockquote.myQuote.st8_1 > p:not(.cite)::before { font-family:'Arial'; content:'\201C'; font-size:60px; padding-right:10px; vertical-align:text-top }
blockquote.myQuote.st8_1 > p:not(.cite)::after { font-family:'Arial'; content:'\201D'; font-size:60px; padding-left:10px; vertical-align:text-top }
blockquote.myQuote.st8_1 p.cite { text-align:center !important; opacity:1 }
blockquote.myQuote.st8_1 p.cite cite { border-bottom:10px solid rgba(0, 0, 0, 0.2) }

blockquote.myQuote.st8_2 { border-left:0px !important; word-break:break-all }
blockquote.myQuote.st8_2 > p:not(.cite)::before { font-family:'Arial'; content:'\201C'; font-size:60px; padding-right:10px; vertical-align:text-top }
blockquote.myQuote.st8_2 > p:not(.cite)::after { font-family:'Arial'; content:'\201D'; font-size:60px; padding-left:10px; vertical-align:text-top }
blockquote.myQuote.st8_2 p.cite { text-align:center !important; opacity:1 }
blockquote.myQuote.st8_2 p.cite cite { --color: #ddff92; text-decoration:none; padding:0 .5em; background-repeat:no-repeat; background-image:linear-gradient(to left, rgba(255, 255, 255, .5), transparent), linear-gradient(2deg, var(--color) 50%, transparent 50%), linear-gradient(-.9deg, var(--color) 50%, transparent 50%), linear-gradient(-60deg, var(--color) 50%, transparent 50%), linear-gradient(120deg, var(--color) 50%, transparent 50%); background-size:30% 1.5px, calc(100% - 20px) 8px, calc(100% - 20px) 12px, 10px 10px, 8px 8px; background-position:100% calc(50% + 2px), center center, center center, 2px 50%, calc(100% - 3px) calc(50% + 1px) }

blockquote.myQuote.st9 { border:1px solid rgba(0, 0, 0, 0.5); border-radius:2px; padding-top:22px; word-break:keep-all }
blockquote.myQuote.st9 > p.qt, blockquote.myQuote.st9 > p.qb { font-family:'Arial'; font-size:60px }
blockquote.myQuote.st9 > p { text-align:center; line-height:40px }
blockquote.myQuote.st9 p.cite { text-align:right !important }

blockquote.myQuote.st10 { border-left:0px !important; word-break:break-all }
blockquote.myQuote.st10 > p.qt, blockquote.myQuote.st10 > p.qb { font-family:'Arial'; font-size:60px }
blockquote.myQuote.st10 > p { text-align:center; line-height:40px }
blockquote.myQuote.st10 p.cite { text-align:center !important }

blockquote.myQuote.st10_1 { border-left:0px !important; word-break:break-all }
blockquote.myQuote.st10_1 > p.qt, blockquote.myQuote.st10_1 > p.qb { font-family:'Arial'; font-size:60px }
blockquote.myQuote.st10_1 > p { text-align:center; line-height:40px }
blockquote.myQuote.st10_1 p.cite { text-align:center !important; opacity:1 }
blockquote.myQuote.st10_1 p.cite cite { border-bottom:10px solid rgba(0, 0, 0, 0.2) }

blockquote.myQuote.st10_2 { border-left:0px !important; word-break:break-all }
blockquote.myQuote.st10_2 > p.qt, blockquote.myQuote.st10_2 > p.qb { font-family:'Arial'; font-size:60px }
blockquote.myQuote.st10_2 > p { text-align:center; line-height:40px }
blockquote.myQuote.st10_2 p.cite { text-align:center !important; opacity:1 }
blockquote.myQuote.st10_2 p.cite cite { --color: #ddff92; text-decoration:none; padding:0 .5em; background-repeat:no-repeat; background-image:linear-gradient(to left, rgba(255, 255, 255, .5), transparent), linear-gradient(2deg, var(--color) 50%, transparent 50%), linear-gradient(-.9deg, var(--color) 50%, transparent 50%), linear-gradient(-60deg, var(--color) 50%, transparent 50%), linear-gradient(120deg, var(--color) 50%, transparent 50%); background-size:30% 1.5px, calc(100% - 20px) 8px, calc(100% - 20px) 12px, 10px 10px, 8px 8px; background-position:100% calc(50% + 2px), center center, center center, 2px 50%, calc(100% - 3px) calc(50% + 1px) }

blockquote.myQuote.st11 { border-left:0px !important; word-break:break-all }
blockquote.myQuote.st11 p span, blockquote.myQuote.st11 p.cite cite { --color: #ddff92; text-decoration:none; padding:0 .5em; background-repeat:no-repeat; background-image:linear-gradient(to left, rgba(255, 255, 255, .5), transparent), linear-gradient(2deg, var(--color) 50%, transparent 50%), linear-gradient(-.9deg, var(--color) 50%, transparent 50%), linear-gradient(-60deg, var(--color) 50%, transparent 50%), linear-gradient(120deg, var(--color) 50%, transparent 50%); background-size:30% 1.5px, calc(100% - 20px) 8px, calc(100% - 20px) 12px, 10px 10px, 8px 8px; background-position:100% calc(50% + 2px), center center, center center, 2px 50%, calc(100% - 3px) calc(50% + 1px) }
blockquote.myQuote.st11 p.cite { text-align:right !important; opacity:1 }
blockquote.myQuote.st11 p.cite cite { --color: #ff92bf !important }

// 티스토리에서 강제 삽입되는 속성 제거 및 에디터를 거치면서 수정되는 태그를 복구하기 위한 스크립트

if ( document.querySelector('body').id == 'tt-body-page' && document.querySelector('.myQuote') ) {
    document.querySelectorAll('blockquote.myQuote').forEach(function(e){
        e.removeAttribute('data-ke-style');
        let cite = e.querySelector('p.cite').innerText;
        e.querySelector('p.cite').remove();
        if ( e.classList.contains('st5') == true ) {
        	e.querySelector('div').insertAdjacentHTML('beforeend', '<p class="cite"><cite>' + cite + '</cite></p>')
        }
        else if ( e.classList.contains('st6') == true ) {
        	e.querySelector('.qb').remove();
        	e.insertAdjacentHTML('beforeend', '<p class="cite"><cite>' + cite + '</cite></p><div class="qb">&nbsp;</div>')
        }
        else if ( e.classList.contains('st6') == true || e.classList.contains('st8_1') == true || e.classList.contains('st8_2') == true || e.classList.contains('st10_1') == true || e.classList.contains('st10_2') == true || e.classList.contains('st11') == true ) {
        	e.insertAdjacentHTML('beforeend', '<p class="cite"><cite>' + cite + '</cite></p>')
        }
        else {
        	e.insertAdjacentHTML('beforeend', '<p class="cite">' + cite + '</p>')
        }
    })
}

저작자표시

티스토리, My Style 인용문 만들기

CAT. 「 Information/For Tistory 」

티스토리, 각주 만들기

eXif + Photo Viewer for Tistory

티스토리, Photo-Edge 효과 만들기

티스토리, 사진에 필름 효과 만들기

티스토리툴바

« 2025/01 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31