에브리유틸사용 방법
- md 파일을 보려면 파일을 끌어다 놓거나 파일 열기를 누릅니다. 열면 문서만 넓게 보이는 보기로 바뀝니다.
- 문서에 그림이 있으면 문서가 든 폴더째 끌어다 놓거나 폴더 열기로 고릅니다. 폴더 안의 그림을 경로대로 찾아 보여 주고, 문서가 여럿이면 위의 문서 칸에서 골라 오갑니다.
- 쓰려면 보기 방식을 나란히(쓰는 칸과 미리보기를 함께 — 넓은 화면은 좌우, 휴대폰은 위아래. 한쪽을 굴리면 다른 쪽이 같은 줄로 따라옵니다)나 편집(글 칸만)으로 바꿉니다. 붙여 넣으면 버튼을 누르지 않아도 바로 미리보기와 HTML 코드가 만들어집니다.
- 글 칸 위의 서식 단추(굵게 · 기울임 · 제목 · 목록 · 표 · 링크 · 코드)로 문법을 외우지 않고 넣을 수 있습니다. 글을 골라 누르면 그 글에 서식이 붙고, 굵게 · 기울임 · 목록 · 코드는 한 번 더 누르면 벗겨집니다. 제목은 누를 때마다 큰 제목 → 중간 → 작은 제목 → 없음으로 바뀝니다. 굵게는 Ctrl+B, 기울임은 Ctrl+I, 링크는 Ctrl+K로도 됩니다. 스프레드시트에서 복사한 칸을 붙여 넣고 골라 표를 누르면 그대로 표가 됩니다.
- 미리보기는 실제로 브라우저가 그리는 모습이고, 나란히 보기에서는 그 아래 HTML 코드 칸에 붙여 쓸 수 있는 결과가 들어갑니다.
- 저장에서 md 파일(쓴 글 그대로)이나 html 파일(미리보기 모양 그대로 · 브라우저에서 바로 열림)을 고릅니다. html 파일에는 스크립트를 넣지 않습니다.
- 인쇄 · PDF를 누르면 문서만 인쇄합니다. 인쇄 창에서 "PDF로 저장"을 고르면 PDF 파일이 됩니다.
- 제목을 하나라도 쓰면 목차가 자동으로 생기고, 각 제목에는 앵커 주소가 붙습니다.
- 글자 수, 공백을 뺀 글자 수, 낱말 수, 줄 수, 예상 읽는 시간이 결과 맨 위에 함께 나옵니다.
- 변환할 수 없는 부분이나 막은 주소가 있으면 결과 아래에 알림으로 알려 줍니다.
입력한 글은 서버로 전송되지 않습니다. 변환, 미리보기, 글자 수 계산은 모두 이 페이지에서 내려받은 자바스크립트가 브라우저 안에서 처리하며, 어디에도 저장하거나 올려보내지 않습니다. 회사 문서나 공개 전 원고도 안심하고 붙여 넣을 수 있습니다.
지원하는 문법
아래 표는 이 페이지를 만들 때 실제 변환기를 돌려 얻은 결과입니다. 왼쪽처럼 쓰면 오른쪽 HTML이 나옵니다.
| 문법 | 쓰는 법 | 만들어지는 HTML |
|---|---|---|
| 제목 (1~6단계) | ## 소제목 | <h2 id="md-소제목">소제목</h2> |
| 굵게 | **굵게** | <p><strong>굵게</strong></p> |
| 기울임 | *기울임* | <p><em>기울임</em></p> |
| 굵게+기울임 | ***둘 다*** | <p><strong><em>둘 다</em></strong></p> |
| 취소선 | ~~취소선~~ | <p><del>취소선</del></p> |
| 인라인 코드 | `코드` | <p><code>코드</code></p> |
| 링크 | [이름](https://example.com) | <p><a href="https://example.com" rel="nofollow noopener noreferrer" target="_blank">이름</a></p> |
| 이미지 |  | <p><img src="/cat.png" alt="대체글" loading="lazy" /></p> |
| 인용 | > 인용문 | <blockquote>
<p>인용문</p>
</blockquote> |
| 순서 없는 목록 | - 항목 | <ul>
<li>항목</li>
</ul> |
| 순서 있는 목록 | 1. 항목 | <ol>
<li>항목</li>
</ol> |
| 수평선 | --- | <hr /> |
| 줄바꿈 (공백 두 칸) | 첫 줄
둘째 줄 | <p>첫 줄<br />
둘째 줄</p> |
| 체크 목록 | - [x] 끝난 일 | <ul>
<li class="task"><input type="checkbox" disabled checked /> 끝난 일</li>
</ul> |
| 주소 자동 링크 | https://example.com | <p><a href="https://example.com" rel="nofollow noopener noreferrer" target="_blank">https://example.com</a></p> |
제목은 # 한 개부터 여섯 개까지이고, 기호 뒤에 공백이 있어야 제목이 됩니다. 그래서 해시태그처럼 붙여 쓴 #할인은 제목이 되지 않고 그대로 글자로 남습니다. 목록은 두 칸 이상 들여쓰면 중첩되고, 목록 안에 코드 블록이나 인용을 넣을 수도 있습니다. 목록 표시가 점에서 번호로 바뀌면 새 목록이 시작됩니다.
표와 코드 블록
표는 머리글 줄과 하이픈 구분줄로 만듭니다. 구분줄에 콜론을 넣어 칸마다 정렬을 정할 수 있습니다. 왼쪽 정렬은 :---, 가운데는 :---:, 오른쪽은 ---:입니다.
| 입력 | 결과 HTML |
|---|---|
| 이름 | 수량 | 금액 | | :--- | :---: | ---: | | 연필 | 2 | 1,200 | | <div class="table-wrap"> <table> <thead> <tr><th style="text-align: left">이름</th><th style="text-align: center">수량</th><th style="text-align: right">금액</th></tr> </thead> <tbody> <tr><td style="text-align: left">연필</td><td style="text-align: center">2</td><td style="text-align: right">1,200</td></tr> </tbody> </table> </div> |
```python
print("안녕")
``` | <pre data-lang="python"><code class="language-python">print("안녕")</code></pre> |
코드 블록은 백틱 세 개로 여닫습니다. 여는 줄에 언어 이름을 적으면 결과에 language-로 시작하는 클래스가 붙어, 색을 칠해 주는 도구와 그대로 이어 쓸 수 있습니다. 코드 블록과 인라인 코드 안에서는 별표나 밑줄, 대괄호가 문법으로 해석되지 않고 적은 그대로 남습니다. 닫는 줄을 빠뜨리면 문서 끝까지 코드로 보고 그 사실을 알려 줍니다.
원시 HTML을 왜 막는가
미리보기는 남이 쓴 글을 화면에 그리는 자리입니다. 마크다운 안의 HTML 태그를 그대로 그리면 스크립트가 이 페이지에서 실행될 수 있고, 그 스크립트는 화면을 바꾸거나 다른 입력칸의 내용을 읽어 밖으로 보낼 수도 있습니다. 그래서 이 도구는 기본값으로 꺾쇠, 따옴표, 앰퍼샌드를 모두 이스케이프해 태그를 글자로 바꿉니다. 링크와 이미지 주소도 따로 검사해서, 스크립트를 실행하는 스킴과 SVG data URL은 아예 주소로 쓰지 않습니다. 아래는 그런 입력이 실제로 어떻게 바뀌는지 빌드할 때 변환기를 돌려 얻은 결과입니다.
| 입력 | 이 도구의 결과 |
|---|---|
<script>alert(1)</script> | <p><script>alert(1)</script></p> |
<img src=x onerror=alert(1)> | <p><img src=x onerror=alert(1)></p> |
[클릭](javascript:alert(1)) | <p>클릭</p> |
[클릭](javascript:alert(1)) | <p>클릭</p> |
 | <p>그림</p> |
막는 방법을 하나 더 적어 두면, 주소는 겉모양만 보지 않습니다. 대소문자를 섞은 것, 앞뒤에 공백이나 보이지 않는 글자를 끼운 것, 숫자 엔티티로 감춘 것을 모두 같은 주소로 보고 판단합니다. 허용하는 스킴은 http, https, mailto, tel, sms, ftp, ftps와 스킴이 없는 상대 주소뿐입니다.
목차와 글자 수
제목마다 앵커 id를 만들고 그것으로 목차를 엮습니다. 한글 제목은 그대로 id가 되고, 같은 제목이 여러 번 나오면 뒤에 번호를 붙여 서로 겹치지 않게 합니다. 예상 읽는 시간은 한글과 한자는 분당 500자, 그 밖의 낱말은 분당 220개로 잡아 더합니다. 예시 넣기로 들어가는 문서는 문법 기호를 뺀 453자, 14덩어리여서 읽는 시간이 1분 미만으로 나옵니다.
알아 둘 점
- 한 번에 변환할 수 있는 크기는 1MB까지입니다. 그보다 크면 변환하지 않고 크기만 알려 줍니다.
- 체크 목록(
- [ ]), 각주([^1]), 꺾쇠 없이 쓴https://주소의 자동 링크를 지원합니다. 체크 칸은 문서를 보여 주는 표시라 눌러서 바꿀 수 없습니다. - 정의 목록, 수식, 문서 앞머리 설정(front matter), 참조 링크는 아직 지원하지 않습니다.
- 문서 옆의 그림(
img/a.png같은 상대 경로)은 폴더째 열었을 때만 보입니다. 문서 하나만 열면 그림 자리에 이름만 표시하고, 그 이름으로 어디에도 요청을 보내지 않습니다. - 문서에
https://로 시작하는 바깥 그림 주소가 있으면 브라우저가 그 주소에서 그림을 직접 받아 옵니다. 그쪽 서버에는 보통의 웹 접속과 같은 기록이 남을 수 있습니다. - 폴더 하나에서 읽는 파일은 문서와 그림을 합쳐 5,000개까지이고, 점으로 시작하는 폴더와
node_modules는 건너뜁니다. - 공백 네 칸으로 만드는 코드 블록은 목록 들여쓰기와 헷갈리기 쉬워 지원하지 않습니다. 백틱 세 개를 써 주세요.
- 결과 HTML에는 꾸미는 스타일이 들어 있지 않습니다. 붙여 쓰는 곳의 스타일을 그대로 따릅니다.
- 바깥으로 나가는 링크에는 새 창으로 열리도록 하는 속성과 추천을 막는 속성이 함께 붙습니다.
이 도구는 CommonMark와 GitHub 표 문법을 기준으로 삼되, 미리보기에서 안전한 쪽으로 다르게 처리하는 부분이 있습니다. 깃허브나 다른 편집기와 결과가 조금 다를 수 있으니, 최종 결과는 실제로 붙여 쓸 곳에서 한 번 더 확인해 주세요.