복잡한 구조의 테이블 데이터를 활용할 일이 있어서
HTML 데이터를 계속 들여다 봐야 했는데, 마크다운과 달리 HTML은 내용을 파악하기가 힘들었다.
그래서 찾아본 HTML 쉽게보기 꿀템들!! 을 소개한다.
1. HTML 편집기 - 실시간 미리보기 사이트
무료 HTML 웹 에디터 - 실시간 미리보기 지원
무료로 사용할 수 있는 HTML 웹 에디터입니다. 실시간 미리보기, 코드 하이라이팅, 드래그 앤 드롭 이미지 업로드, 다양한 텍스트 스타일링 기능을 제공합니다.
url.kr
이런 사이트 몇개 구글링해서 찾았는데, 난 여기가 제일 편했다.
아래와 같이 왼쪽에 HTML 코드 입력하면 오른쪽에 미리보기가 제공된다. 굉장히 직관적이라 맘에 들었다.
병합된 셀도 잘 나타내준다. 굿.
2. HTML preview : VS Code extension
https://marketplace.visualstudio.com/items?itemName=tht13.html-preview-vscode
HTML Preview - Visual Studio Marketplace
Extension for Visual Studio Code - Provides ability to preview HTML documents.
marketplace.visualstudio.com
말 그대로 vscode에서 HTML 미리보기를 가능하게 해주는 extension이다.
설치하면 아래와 같이 보인다.
난 참고로 폐쇄망에 설치해야해서 vsix 파일로 다운로드도 받았음
- vsix 파일 : https://www.vsixhub.com/vsix/27397/
HTML Preview 1.4.0 VSIX (Latest Version) - VsixHub
Free Download HTML Preview 1.4.0 Vsix File for Visual Studio Code
www.vsixhub.com
3. imgkit : HTML to image
https://pypi.org/project/imgkit/
Client Challenge
JavaScript is disabled in your browser. Please enable JavaScript to proceed. A required part of this site couldn’t load. This may be due to a browser extension, network issues, or browser settings. Please check your connection, disable any ad blockers, o
pypi.org
이건 HTML을 이미지 파일로 저장할 수 있는 파이썬 라이브러리다.
아래 명령어로 설치 후 사용 가능
pip install imgkit
sudo apt-get install wkhtmltopdf # Ubuntu
참고로 이걸 쓰다보면 한글이 안보이거나 테이블 윤곽선이 안보이는 경우가 발생하는데,
그럴때는 아래 코드를 참고
style 태그 안에 넣어주면 된다.
1) 한글 안보이는 경우 :
1. HTML 내에 한글 폰트 지정
HTML에 <style> 태그를 사용해서 한글을 지원하는 폰트를 지정하면 된다.
<html>
<head>
<style>
body {
font-family: "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
}
</style>
</head>
</html>
위 코드에서 font-family 속성에 한글을 지원하는 여러 폰트를 지정하였다.
Noto Sans KR은 구글에서 제공하는 한글 지원 폰트입니다. 이 폰트를 사용할 수 있도록 시스템에 설치하거나 웹에서 불러올 수 있게 해야 한다.
이게 안될 경우 시스템에 직접 글꼴을 설치하는 방법도 있다.
2. 시스템에 한글 폰트 설치
imgkit은 기본적으로 시스템에 설치된 폰트를 사용하므로, 해당 시스템에 한글 폰트가 설치되어 있지 않다면 한글을 올바르게 표시할 수 없다. 리눅스 시스템에서는 아래 방법으로 한글 폰트를 설치할 수 있다.
Ubuntu에서 한글 폰트 설치
sudo apt update sudo apt install fonts-noto-cjk이렇게 설치한 후, 위와 같은 폰트를 HTML에서 지정하면 한글이 제대로 보임!
2) 윤곽선 안보이는 경우
테이블의 선이 안 보이는 문제는 주로 CSS 스타일링이나 렌더링 도구의 제한으로 발생한다.
imgkit을 사용할 때, 기본적으로 테이블의 선이 나타나지 않는 경우가 많다고 한다.
이는 CSS에서 테이블의 border 속성이 제대로 설정되지 않았거나, imgkit이 CSS를 제대로 적용하지 못해서 발생할 수 있음
해결 방법
- 테이블에 명시적으로 border 스타일 추가
- HTML에 직접 CSS 스타일을 추가하여 테이블의 선을 명확히 지정해준다.
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse; /* 테이블 셀 간의 경계선 병합 */
}
th, td {
border: 1px solid black; /* 선 색상과 두께 */
padding: 8px; /* 셀 내부 여백 */
text-align: left;
}
</style>
</head>
</html>
자, 이 방법으로 이제 실제 HTML을 이미지로 저장해보자.
아주 간단하다. 아래 코드를 통해 이미지로 바로 저장가능하다.
import imgkit
# 변환할 HTML 코드 (테스트용)
html_content = """
<table>
<tbody>
<tr>
<td colspan="2">구분</td>
<td>SKT</td><td>KT</td><td>LGT</td><td>계</td>
</tr><tr><td rowspan="3">이동통신</td><td>2G</td><td>11,615,064</td><td>2,908,504</td><td>6,043,681</td><td>20,567,249</td>
</tr>
<tr>
<td>3G</td><td>12,654,489</td><td>12,107,691</td><td>2,614,793</td><td>27,376,973</td>
...
</tr>
</tbody>
</table>
"""
# 이미지 파일로 저장
imgkit.from_string(html_content, "table_output.png")
print("이미지 저장 완료: table_output.png")
HTML 데이터
{
"table_title": "[표 1] 스마트폰 단말기 개통현황",
"table_html": "<table><tbody><tr><td colspan=\"2\">구분</td><td>SKT</td><td>KT</td><td>LGT</td><td>계</td></tr><tr><td rowspan=\"3\">이동통신</td><td>2G</td><td>11,615,064</td><td>2,908,504</td><td>6,043,681</td><td>20,567,249</td></tr><tr><td>3G</td><td>12,654,489</td><td>12,107,691</td><td>2,614,793</td><td>27,376,973</td></tr><tr><td>계</td><td>24,269,553</td><td>15,016,195</td><td>8,614,793</td><td>47,944,222</td></tr><tr><td rowspan=\"4\">스마트폰</td><td>2G</td><td>43,363</td><td>0</td><td>81,462</td><td>124,825</td></tr><tr><td>3G</td><td>411,940</td><td>504,264</td><td>0</td><td>916,204</td></tr><tr><td>계</td><td>455,303</td><td>504,264</td><td>81,462</td><td>1,041,029</td></tr><tr><td>종류</td><td>18종</td><td>9종</td><td>2종</td><td>29종</td></tr></tbody></table>"
변환된 이미지
후속 연구
폰트나 보더 타입 이런걸 좀 다양하게 줘서 데이터셋을 생성 하면 좋을 것 같다.
테이블 보더를 아예 안준다던가?
'Programming' 카테고리의 다른 글
| [git] Linux - access token 저장해두고 쓰기! (0) | 2024.08.08 |
|---|---|
| [Elastic Search] Linux user 추가 및 권한 설정 (0) | 2022.05.31 |
댓글