[티스토리꾸미기] Tip 작성 칸

 

매번 필요해서 고민하던 Tip 작성칸을 그냥 직접 만들었다.

 

티스토리에서 제공해주는 인용,,

 

티스토리에서 제공해주는 인용이 가장 비슷한 모양이지만 내가 원하는 모양과 다르기에..

글 쓸 때 여러모로 활용할 수 있을 것 같다.

 

문제는 css를 인라인으로 넣어서 나중에 분리해야 할 것 같다.

그리고 설명칸 안에서 엔터를 누르면 <p> 태그가 복제되어 줄간격이 맞지않다.

HTML모드로 직접 들어가 <br />로 줄바꿈을 해줘야하는 상태라 개선이 필요하다.

쓰다가 줄간격 조정이 많이 불편하면 <input type="textarea">로 변경해서 적용해봐야겠다.

 

 

---

 

 

💡 Tip

여기가 바로 설명란

 

<div style="position: relative;">
	<div style="position: absolute; top: -16px; left: 12px; background-color: white; padding: 0 9px; font-size: 18px;">
		<span style="font-family: 'Noto Sans Demilight', 'Noto Sans KR';">
			💡 <b>Tip</b>
		</span>
	</div>
	<div class="tip_wrap" style="border: 1px solid #cacaca; border-radius: 7px; padding: 20px;">
		<p data-ke-size="size16">
			설명설명<br />
			설명설명
		</p>
	</div>
</div>

 

 

PC에서 봤을 때는 이렇고,

PC에서 봤을 때의 결과물 이미지

 

모바일에서 봤을 때는 이렇다.

모바일에서 봤을 때의 결과물 이미지