ViewCSVCSV 파일을 열거나 붙여넣으면 <th scope="col"> 제목으로 된 <thead>와 행마다 <tr> 하나가 있는 <table>을 만들거나, 바로 열어 볼 수 있는 완성된 HTML 페이지를 만듭니다. 모든 값을 HTML 이스케이프하므로 데이터 안의 <script>나 &는 텍스트로 보일 뿐 마크업이 되지 않습니다. 파일은 업로드되지 않고 브라우저 안에서 변환됩니다.
CSV를 HTML로 변환하는 방법
- 파일 열기를 누르거나,
.csv,.tsv,.txt파일을 도구 위에 끌어다 놓거나, 붙여넣기를 고르세요. 열이 이상하게 보이면 가져오기 설정에서 구분 기호나 인코딩을 바꾸세요. - 출력에서 기존 페이지나 CMS에 마크업을 붙여넣으려면 표만을, 단독 파일이 필요하면 완성된 HTML 페이지를 고르세요.
- 표 제목(선택 사항)을 넣고 스타일과 줄 바꿈을 정한 다음 복사나 HTML 다운로드를 누르세요.
README나 위키라면 Markdown 표가 편집하기 더 쉽고, 인쇄용 파일이 필요하면 CSV를 PDF로를 사용하세요.
옵션별 동작
| 표만 | 기본값입니다. <table> 요소만 만들어 페이지, 이메일 템플릿, CMS의 HTML 블록에 바로 붙여넣을 수 있습니다. |
|---|---|
| 완성된 HTML 페이지 | <!doctype html>, <html lang="ko">, <meta charset="utf-8">, <title>(표 제목, 없으면 Table)을 덧붙여 어느 브라우저에서나 제대로 열리게 합니다. lang 값은 사용 중인 사이트 언어를 따릅니다. |
| 표 제목(선택 사항) | 표의 첫 번째 자식 요소로 <caption>을 씁니다. 화면 낭독기가 표 이름으로 읽어 주는 내용입니다. |
| 간단한 스타일 적용 | 기본으로 켜져 있습니다. 완성된 페이지에는 테두리, 음영이 있는 머리글 행, 오른쪽 정렬 숫자를 담은 작은 스타일시트를 넣습니다. 표만에서는 그 대신 표에 class="csv-table", 숫자 셀에 class="num"을 붙여 모양은 직접 쓴 CSS가 정하게 합니다. |
| 셀 안의 줄 바꿈 표시 | 기본으로 켜져 있습니다. 값 안의 줄 바꿈을 <br>로 바꿉니다. 끄면 줄 바꿈이 소스에 그대로 남고, 브라우저는 공백으로 표시합니다. |
까다로운 데이터의 처리 방식
- 모든 셀, 머리글, 표 제목에서
&,<,>,",'를&,<,>,",'로 씁니다. 데이터 안의 태그는 텍스트로 보이며, 이는 CSV에 들어 있던 HTML도 렌더링되지 않는다는 뜻입니다. - 셀마다
dir="auto"가 붙어 있어, 왼쪽에서 오른쪽으로 쓰는 페이지 안에서도 아랍어나 히브리어 값은 오른쪽에서 왼쪽으로 표시됩니다. - 비어 있지 않은 모든 값이 일반 숫자일 때만 숫자 열로 보므로,
0042같은 ID 열은 텍스트로 남고 오른쪽 정렬되지 않습니다. 값 자체의 형식은 바꾸지 않습니다. - 따옴표 안의 쉼표, 따옴표, 줄 바꿈은 RFC 4180에 따라 읽습니다. 빈 머리글은
Column 3, 중복된 머리글은name (2)가 됩니다. - 출력은 UTF-8입니다. 완성된 페이지는
<meta charset="utf-8">로 이를 선언합니다. 표만을 다른 페이지에 붙여넣을 때는 그 페이지도 UTF-8이어야 합니다.
문제 해결
- 원본 파일에서 한글이 깨지거나 악센트가 é처럼 보입니다. CSV가 UTF-8이 아닙니다. 가져오기 설정에서 원래 인코딩(한국어 파일은 대개 EUC-KR(CP949), 예전 서유럽 Excel 내보내기는 Windows-1252)을 고르고 다시 여세요.
- 데이터에 있던 태그가 텍스트로 보입니다. 셀 안의 HTML이 마크업으로 실행되지 않도록 일부러 이스케이프한 것입니다. 내용을 신뢰하고 렌더링하고 싶다면 결과를 직접 고치세요.
- 붙여넣은 표에 테두리가 없습니다. 표만은 (스타일을 켰을 때) CSS가 아니라 클래스 이름만 붙입니다. 사이트 스타일시트에서
.csv-table과td.num의 스타일을 정하거나, 내장 스타일이 필요하면 완성된 HTML 페이지를 고르세요. - 모든 값이 한 열에 들어 있습니다. 구분 기호를 잘못 추측했습니다. 가져오기 설정에서 지정하세요.
한도와 개인정보 보호
25 MB, 10만 행 또는 200만 셀까지의 파일은 처음 200행의 실시간 미리 보기와 함께 열립니다. 더 큰 파일은 스트리밍 방식으로 변환합니다. 파일을 조각 단위로 두 번 읽는데(한 번은 열 구성과 숫자 열 파악, 한 번은 쓰기), 다운로드에 파일 전체가 들어간다는 안내가 표시되고 복사는 제공하지 않습니다. 출력 파일 하나는 최대 4 GB입니다.
변환은 이 탭의 백그라운드 워커에서 실행되므로 페이지가 멈추지 않고, 취소로 중단할 수 있습니다. CSV는 서버로 보내지 않습니다.
예시
앰퍼샌드, 아포스트로피, 따옴표, 그리고 두 줄짜리 메모 안의 HTML이 있는 주문 목록을 기본 설정(표만, 스타일 적용, 줄 바꿈 표시)으로 변환한 결과입니다. qty는 모두 숫자이므로 셀에 class="num"이 붙습니다.
id,product,qty,comment 0042,Fish & Chips,2,"<b>Extra</b> vinegar no salt" 0043,"O'Brien's ""Stout""",12,
<table class="csv-table">
<thead>
<tr>
<th scope="col">id</th>
<th scope="col">product</th>
<th scope="col">qty</th>
<th scope="col">comment</th>
</tr>
</thead>
<tbody>
<tr>
<td dir="auto">0042</td>
<td dir="auto">Fish & Chips</td>
<td class="num" dir="auto">2</td>
<td dir="auto"><b>Extra</b> vinegar<br>no salt</td>
</tr>
<tr>
<td dir="auto">0043</td>
<td dir="auto">O'Brien's "Stout"</td>
<td class="num" dir="auto">12</td>
<td dir="auto"></td>
</tr>
</tbody>
</table>자주 묻는 질문
결과를 웹사이트에 붙여넣어도 안전한가요?
데이터가 마크업을 끼워 넣을 수는 없습니다. 모든 값, 머리글, 표 제목을 HTML 이스케이프하고, 어떤 값도 속성 안에 넣지 않습니다. 출력에 있는 태그는 변환기가 직접 쓰는 표 요소뿐입니다.
완성된 페이지에 lang="ko"가 들어가는 이유는 무엇인가요?
완성된 페이지의 언어 태그는 사용 중인 사이트의 언어를 따릅니다. 데이터가 다른 언어라면 다운로드한 뒤 lang 속성을 바꾸세요.