<div id="readability-page-1" class="page">






<nav id="global-navigation">


</nav>
<main id="wrap" aria-hidden="false">

<div>






<article>
<header id="global-header">



<div>
<h2>[confluence to tistory-2]html 다듬기</h2>
<ul>
<li role="text" aria-label="2021년 10월 10일 21시 38분에 작성된 글."><time datetime="2021-10-10T21:38">2021.10.10 21:38</time></li>
<li><a href="/category/%EA%B0%9C%EB%B0%9C%20%EC%9D%B4%EA%B2%83%EC%A0%80%EA%B2%83" aria-label="개발 이것저것">개발 이것저것</a></li>
</ul>
</div>


</header>
<div id="article"><content><h3 id="id-[confluencetotistory-2]html다듬기-신규단위목표">신규 단위목표</h3><ul><li><p>이미지 추출 및 공개서버에 업로드 →  html내 링크 정보 치환</p></li><li><p>테이블 테그 tistory 형식에 맞게 변경</p></li><li><p>codeBox tistory 형식에 맞게 변경 필요</p></li></ul><h3 id="id-[confluencetotistory-2]html다듬기-추출된페이지테스트등록">추출된 페이지 테스트 등록</h3><p>추출된 html이 tistory 게시물로 등록되었을 때 바람직한 모양으로 출력되는지 테스트하기 위해서 테스트 게시물을 게시해 보았다. 눈에 띄는 문제점 두가지가 보였다.</p><ul><li><p>표 디자인이 구림</p></li></ul><span><img data-base-url="" data-height="423" data-image-src="" data-linked-resource-container-id="14778479" data-linked-resource-container-version="2" data-linked-resource-content-type="image/png" data-linked-resource-default-alias="제목 없음.png" data-linked-resource-id="14712941" data-linked-resource-type="attachment" data-linked-resource-version="1" data-media-id="4f382912-ea41-4588-923c-5c058439e560" data-media-type="file" data-unresolved-comment-count="0" data-width="799" loading="lazy" src="https://i.ibb.co/T8H8KZv/df6418ff7582.png"></span><ul><li><p>코드박스 syntax highlight가 동작하지 않음</p></li></ul><span><img data-base-url="" data-height="644" data-image-src="" data-linked-resource-container-id="14778479" data-linked-resource-container-version="2" data-linked-resource-content-type="image/png" data-linked-resource-default-alias="image-20210317-174604.png" data-linked-resource-id="14712947" data-linked-resource-type="attachment" data-linked-resource-version="1" data-media-id="27c411b7-7164-4119-bc2f-03697ca4c419" data-media-type="file" data-unresolved-comment-count="0" data-width="980" loading="lazy" src="https://i.ibb.co/SXrbhV4/0ed76903fff8.png"></span><p>보이는 문제점 말고도 가장 치명적인 문제점이 하나 있는데, html내부에 삽입된 이미지가 confluence Cloud 서버내에 저장되어 링크가 걸려있었다. 당연히 로그인 통해 인가된 사용자만 접근하여 이미지를 로딩해 올 수 있었기 때문에, 블로그에 정상적으로 게시하기 위해서는 이미지를 별도 퍼블릭 서버에 업로드 한 뒤, 이미지 url 변경 사항을 반영하여 html을 다시 작성해 줘야 했다.</p><h3 id="id-[confluencetotistory-2]html다듬기-코드블럭하이라이팅활성화">코드블럭 하이라이팅 활성화</h3><p><code>&lt;code&gt;</code> 블럭 추가로 해결</p><h3 id="id-[confluencetotistory-2]html다듬기-표예쁘게">표 예쁘게</h3><p><code>th</code> 테그 모두 <code>td</code> 로 변경 및 표 테마 관련 class 테그 추가</p><h3 id="id-[confluencetotistory-2]html다듬기-이미지호스팅서버">이미지 호스팅 서버</h3><p>무료이면서 가장 api 활용이 편리한 사이트를 찾다보니 <a href="https://imgbb.com/" rel="nofollow">imgbb</a> 라는 사이트를 찾게 되었다. API가 매우 간결하고 필요한 정보만 있어서 선택하였다.</p><ul><li><p>이미지 업로드 API</p></li></ul><div><table data-ke-style="style12" data-layout="default"><colgroup><col><col><col></colgroup><tbody><tr><td><strong>구분</strong></td><td><strong>정보</strong></td><td><strong>비고</strong></td></tr><tr><td>API 경로</td><td><code>https://api.imgbb.com/1/upload</code></td><td></td></tr><tr><td>매서드</td><td>POST</td><td></td></tr><tr><td>Query 파라미터1</td><td>key</td><td>값: api token</td></tr><tr><td>Form 데이터</td><td>image</td><td>값: 이미지 바이너리</td></tr><tr><td>호출 목적</td><td>페이지 html로 export</td><td></td></tr></tbody></table></div></content>            </div>




<nav>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</nav>



















</article>


</div>
</main>

<nav id="pagination">

</nav>












	            
            
            
                        
                        
                                       
                                               
        
</div>

모두의 근삼이

염근철

신규 단위목표 이미지 추출 및 공개서버에 업로드 → html내 링크 정보 치환 테이블 테그 tistory 형식에 맞게 변경 codeBox tistory 형식에 맞게 변경 필요 추출된 페이지 테스트 등록 추출된 html이 tistory 게시물로 등록되었을 때 바람직한 모양으로 출력되는지 테스트하기 위해서 테스트 게시물을 게시해 보았다. 눈에 띄는 문제점 두가지가 보였다. 표 디자인이 구림 코드박스 syntax highlight가 동작하지 않음 보이는 ..

[confluence to tistory-2]html 다듬기

댓글