본문 바로가기
블로그 발전기

[코드 저장] 인스타그램 앨범형식 티스토리 서식 제작

by 민곰 2020. 11. 18.
728x90

티스토리 HTML 모드로 작성

<!-- 인스타형식 앨범 시작 -->
<div class="mg-instagram-copy" style="margin: 0px auto; border: 0.25px solid darkgray; width: 300px; height: 400px;">
<div>
	<img style="display: inline; margin: 5px 0px 5px 5px; width: 35px; height: 35px; border: 0.20px solid darkgray; border-radius: 25px;" src="https://t1.daumcdn.net/cfile/tistory/2103B84756A2EAF60D" /> 
	<span style="font-size: 13px; line-height: 25px; vertical-align: middle; margin: 8px 0px 0px 5px; position: absolute; font-weight: 600;">mingom</span>
    <span style="position: relative; float: right; margin: 9px 10px 0px 0px; line-height: 20px;">
        <i class="fa fa-ellipsis-v"></i>
    </span>
</div>
<!-- 구분선 -->
<div style="width: 100%; height: 0.25px; background-color: darkgray;">&nbsp;</div>
<!-- 메인 이미지 -->
<div style="width: 100%; height: 300px; background-color: lightgray;">&nbsp;</div>
<!-- 반응 -->
<div>
  <span style="margin: 1px 5px 3px 5px;"><i class="fa fa-heart"></i></span>
  <span style="margin: 1px 5px 3px 5px;"><i class="far fa-comment"></i></span>
  <span style="margin: 1px 5px 3px 5px;"><i class="far fa-paper-plane"></i></span>
  <span style="margin: 1px 3px 3px 3px; float: right;"><i class="far fa-bookmark"></i></span>
</div>
<!-- 댓글 -->
<div>
	<span style="font-size: 13px; font-weight: 600; margin: 0px 5px 0px 5px;">mingom</span> 
    <span style="font-size: 11px;">어쩌구 저쩌구 </span>
</div>
</div>
<!-- 인스타형식 앨범 끝 -->

결과물 (황소곱창 글)

 

728x90

댓글