각주
1. 글 작성시 기본모드에서 각주를 넣고 싶은 곳에 아래처럼 타이핑 하시면 됩니다.
[sfn]내용[/sfn]
2. 내용에는 HTML 태그를 넣어도 됩니다.
3. 내용에 <P> 태그는 사용할 수 없으며 줄 바꿈 하려면 Shift + Enter 키를 눌러 줄바꿈 하면 됩니다.
편집기가 HTML 모드라면 <br> 태그를 적어주면 됩니다.
4. 다른 HTML 태그도 마찬가지로 HTML 모드에서 작성하시면 됩니다.
구분선
이미지를 사용하지 않는 구분선입니다.
필요한 서식만 티스토리의 서식에 저장해서 사용하시면 됩니다.
인용문
인용문 역시도 위의 구분선처럼 필요한 서식만 가져와서 사용하시면 됩니다.
적용하실 때 두번째 줄의 출처가 필요없다면, 출처 라인을 지우고 사용하시면 됩니다.
<p class="cite">출처</p>
서식 견본 - 촬영정보 #1
<!--
항상 마지막에 날씨를 선택해야 촬영일자와 날씨 두 값이 제대로 전달됩니다.
예) 날씨 선택 후 날짜를 선택했다면, 다시 날씨를 선택해줘야 합니다.
-->
<div class="shootData">
<p class="camera">Nikon D40</p>
<p class="lens">Nikkor AF-S Micro 60mm F2.8G</p>
<p class="camera">Canon PowerShot G5 X</p>
<p class="flash">Nikon SB-800</p>
<p class="film">Kodak Gold 100</p>
<p class="lab">토픽현상소</p>
<div class="dataOuter">
<p class="sdDesc">촬영일자 및 날씨</p>
<input id="sDate" type="date" /> <select id="sWth" onchange="document.querySelector('p.copyData1').innerText = document.querySelector('#sDate').value; document.querySelector('p.copyData2').innerText = this.value;">
<option value="blank">날씨선택</option>
<option value="sunny1">맑음</option>
<option value="sunny2">맑고 구름</option>
<option value="cloudy1">살짝 흐림</option>
<option value="cloudy2">가득 흐림</option>
<option value="windy1">맑고 바람</option>
<option value="windy2">흐리고 바람</option>
<option value="windy3">비바람</option>
<option value="foggy1">맑고 안개(미세먼지) 조금</option>
<option value="foggy2">흐리고 안개(미세먼지) 조금</option>
<option value="foggy3">안개(미세먼지) 가득</option>
<option value="rainy">비</option>
<option value="snowy">눈</option>
<option value="thunder">천둥번개</option>
</select>
<div class="copyData">
<p class="copyData1" style="display: none;"></p>
<p class="copyData2" style="display: none;"></p>
</div>
</div>
</div>
서식 견본 - 촬영정보 #2
<div id="equip">
<!-- Camera -->
<p class="camera">Nikon D850</p>
<p class="camera">SONY A7 III</p>
<!-- Smart Phone -->
<p class="sPhone">SAMSUNG Galaxy S22</p>
<!-- Lens -->
<p class="lens">AF-S Nikkor 105mm F1.4E</p>
<p class="lens">AF-S Nikkor 70-200mm F2.8G VR</p>
<!-- Flash -->
<p class="flash">Nikon SB-800</p>
<!-- Film -->
<p class="film">Kodak ColorPlus 200</p>
<!-- Dev. Lab. -->
<p class="lab">현상소</p>
<!-- Date -->
<p class="sDate">2023. 2. 26.</p>
<!-- Location -->
<p class="location">쉼표로 구분, 5개 까지</p>
</div>
서식 견본 - 구분선
<!-- 구분선 1 -->
<hr id="hst1" class="mySeparator">
<!-- 구분선 2-1 -->
<hr id="hst2-1" class="mySeparator">
<!-- 구분선 2-2 -->
<hr id="hst2-2" class="mySeparator">
<!-- 구분선 3 -->
<hr id="hst3" class="mySeparator">
<!-- 구분선 3-1 -->
<hr id="hst3-1" class="mySeparator">
<!-- 구분선 4-1 -->
<p id="hst4-1" class="mySeparator"> </p>
<!-- 구분선 4-2 -->
<p id="hst4-2" class="mySeparator">↭↭↭↭↭</p>
<!-- 구분선 5 -->
<p id="hst5" class="mySeparator"><span class="icon-stop2"></span></p>
<!-- 구분선 6 -->
<hr id="hst6" class="mySeparator">
<!-- 구분선 7 -->
<div id="hst7" class="mySeparator">
<p><span class="icon-stop2"></span></p>
<p><span class="icon-stop2"></span></p>
<p><span class="icon-stop2"></span></p>
</div>
<!-- 구분선 8 -->
<div id="hst8" class="mySeparator">
<p>❙</p>
<p>❙</p>
<p>❙</p>
</div>
서식 견본 - 인용문
<!-- 인용 1 -->
<blockquote class="myQuote st1" cite="URL">
<p>인용 1</p>
<p class="cite">출처</p>
</blockquote>
<p> </p>
<!-- 인용 2 -->
<blockquote class="myQuote st2" cite="URL">
<p>인용 2</p>
<p class="cite">출처</p>
</blockquote>
<p> </p>
<!-- 인용 3 -->
<blockquote class="myQuote st3" cite="URL">
<p>인용 3</p>
<p class="cite">출처</p>
</blockquote>
<p> </p>
<!-- 인용 4 -->
<blockquote class="myQuote st4" cite="URL">
<p>인용 4</p>
<p class="cite">출처</p>
</blockquote>
<p> </p>
<!-- 인용 5 -->
<blockquote class="myQuote st5" cite="URL">
<div>
<p>인용 5</p>
<p class="cite">출처</p>
</div>
</blockquote>
<p> </p>
<!-- 인용 6 -->
<blockquote class="myQuote st6" cite="URL">
<div class="qt"></div>
<p>인용 6</p>
<p class="cite">출처</p>
<div class="qb"></div>
</blockquote>
<p> </p>
<!-- 인용 7 -->
<blockquote class="myQuote st7" cite="URL">
<p>인용 7</p>
<p class="cite">출처</p>
</blockquote>
<p> </p>
<!-- 인용 8 -->
<blockquote class="myQuote st8" cite="URL">
<p>인용 8</p>
<p class="cite">출처</p>
</blockquote>
<p> </p>
<!-- 인용 8-1 -->
<blockquote class="myQuote st8_1" cite="URL">
<p>인용 8-1</p>
<p class="cite"><cite>출처</cite></p>
</blockquote>
<p> </p>
<!-- 인용 8-2 -->
<blockquote class="myQuote st8_2" cite="URL">
<p>인용 8-2</p>
<p class="cite"><cite>출처</cite></p>
</blockquote>
<p> </p>
<!-- 인용 9 -->
<blockquote class="myQuote st9" cite="URL">
<p class="qt">“</p>
<p>인용 9</p>
<p> </p>
<p class="qb">”</p>
<p class="cite">출처</p>
</blockquote>
<p> </p>
<!-- 인용 10 -->
<blockquote class="myQuote st10" cite="URL">
<p class="qt">“</p>
<p>인용 10</p>
<p> </p>
<p class="qb">”</p>
<p class="cite">출처</p>
</blockquote>
<p> </p>
<!-- 인용 10-1 -->
<blockquote class="myQuote st10_1" cite="URL">
<p class="qt">“</p>
<p>인용 10-1</p>
<p> </p>
<p class="qb">”</p>
<p class="cite"><cite>출처</cite></p>
</blockquote>
<p> </p>
<!-- 인용 10-2 -->
<blockquote class="myQuote st10_2" cite="URL">
<p class="qt">“</p>
<p>인용 10-2</p>
<p> </p>
<p class="qb">”</p>
<p class="cite"><cite>출처</cite></p>
</blockquote>
<p> </p>
<!-- 인용 11 -->
<blockquote class="myQuote st11" cite="URL">
<p><span>인용 11</span></p>
<p class="cite"><cite>출처</cite></p>
</blockquote>
<p> </p>
서식 견본 - 더보기 | 접기
<p> </p>
<div class="myML">
<p class="hl">펼치기|접기</p>
<div>
<p>내용</p>
<p>내용</p>
<p>내용</p>
</div>
</div>
<p> </p>
'ddPack' 카테고리의 다른 글
| 서식 - 촬영정보 (0) | 2023.02.26 |
|---|---|
| 아이콘 폰트에 대해서.. (0) | 2022.06.01 |
| ddPack 서식 및 특징 보기.. (3) | 2022.06.01 |
| 서식 활용하기, 그리고 티스토리에서 새로 추가된 기능.. (0) | 2022.06.01 |
| 스킨 설치 및 설정 (13) | 2022.06.01 |
| ddPack은.. (2) | 2022.06.01 |
Comment