티스토리에서 글을 작성하다 보면, Ctrl + V로 붙여넣기를 할 때 (non-breaking space)가 공백 대신 삽입되는 경우가 종종 있습니다. 이로 인해 글을 읽을 때 불편함을 겪을 수 있는데요, 특히 Ctrl + Shift + V로 붙여 넣으면 가 자동으로 삽입되곤 합니다.
이 문제를 해결하기 위해 북마클릿을 만들어 불필요한 공백을 제거하는 방법을 소개합니다.
1. 글에 들어간 불필요한
ChatGPT에서 "윤동주 - 서시"를 복사한 후, 티스토리 편집기 기본모드에서 붙여넣기를 했습니다.
이때 두 가지 방법을 사용했습니다.
붙여 넣고 나서 기본모드에서 HTML모드로 전환해 소스를 확인해 보니, 글에 수많은 (공백 대신 들어가는 특수문자)가 삽입된 것을 볼 수 있었습니다.
이 때문에 글을 읽는 데 불편함이 생겼습니다.
아래에서 확인할 수 있습니다.
| Ctrl + V 붙여넣기 | Ctrl + Shift + V 붙여넣기 |
| 하늘을 우러러 한 점 부끄럼이 없기를, 잎새에 이는 바람에도 나는 괴로워했다. 별을 노래하는 마음으로 모든 죽어가는 것을 사랑해야지. 그리고 나한테 주어진 길을 걸어가야겠다. 오늘 밤에도 별이 바람에 스치운다. |
하늘을 우러러 한 점 부끄럼이 없기를, 잎새에 이는 바람에도 나는 괴로워했다. 별을 노래하는 마음으로 모든 죽어가는 것을 사랑해야지. 그리고 나한테 주어진 길을 걸어가야겠다. 오늘 밤에도 별이 바람에 스치운다. |
|
|
저는 윈도 크롬에서 작업을 했습니다.
(공백 대신 들어가는 특수문자)가 보이지 않을 수도 있습니다.
이 문제는 티스토리 편집기의 동작 방식 때문인 것으로 보입니다.
구글에서 검색해보면 가 들어가지 않도록 하는 방법으로, 먼저 다른 편집기에 글을 붙여넣고 다시 복사해서 티스토리 편집기에 붙여넣는 방법을 비롯해 여러 가지 유용한 방법들을 찾을 수 있었습니다. 이 방법들 역시 충분히 좋은 해결책이지만, 모두 조금 번거롭고 손이 많이 가는 방식이었습니다.
그래서 저는 조금 더 간편하게 문제를 해결할 수 있도록 북마클릿을 만들어 보았습니다.
해결 방법: 북마클릿 만들기
불필요한 를 제거하는 북마클릿을 만들어서 이 문제를 해결할 수 있습니다. 북마클릿은 북마크 바에 저장하여, 티스토리 편집기 기본 모드에서 클릭만 하면 자동으로 를 공백으로 바꿔줍니다.
방법 1: 링크를 이용하여 북마크 만들기
다음 링크를 마우스로 끌어다가 북마크 바에 추가하세요. 티스토리 편집기 기본모드에서 추가된 북마크를 클릭하면 북마클릿이 실행됩니다.
방법 2: 소스 붙여 넣기로 북마크 만들기
아래 코드를 복사하여 브라우저 북마크에 저장합니다. 저장한 후, 티스토리 편집기 기본모드에서 북마크를 클릭하면 실행됩니다.
BODY 태그 바로 아래에 있는 H1-H6, P, UL, OL, TABLE 태그의 모든 자식 노드에서 (기본모드에서는 유니코드 문자 \u00A0가 됩니다)를 공백으로 바꾸어 줍니다. 단, FIGURE와 PRE 태그는 제외됩니다.
결론
티스토리에서 불필요한 공백을 제거하는 북마클릿을 만들어 사용하면, 글 작성 시 불편함을 크게 줄일 수 있습니다. 코드와 북마클릿을 활용하여 보다 효율적인 티스토리 운영을 해보세요!
더 살펴보기
다음은 본문과 테이블에 붙여넣기한 결과를 다시 한번 더 비교해 볼 수 있도록 했습니다.
Ctrl + Shift + V로 붙여넣기한 경우에는 공백 대신 가 들어가 있습니다.
<!-- 본문에 넣기 -->
<!-- Ctrl + V, 컨텍스트 메뉴의 붙여 넣기 -->
<p data-ke-size="size16">하늘을 우러러<br />한 점 부끄럼이 없기를,<br />잎새에 이는 바람에도<br />나는 괴로워했다.</p>
<p data-ke-size="size16">별을 노래하는 마음으로<br />모든 죽어가는 것을 사랑해야지.<br />그리고 나한테 주어진 길을<br />걸어가야겠다.</p>
<p data-ke-size="size16">오늘 밤에도 별이 바람에 스치운다.</p>
<!-- Ctrl + Shift + V -->
<p data-ke-size="size16">하늘을 우러러<br />한 점 부끄럼이 없기를,<br />잎새에 이는 바람에도<br />나는 괴로워했다.<br /><br />별을 노래하는 마음으로<br />모든 죽어가는 것을 사랑해야지.<br />그리고 나한테 주어진 길을<br />걸어가야겠다.<br /><br />오늘 밤에도 별이 바람에 스치운다.</p>
<!-- 테이블에 넣기 -->
<table style="border-collapse: collapse; width: 100%;" border="1" data-ke-align="alignLeft">
<tbody>
<tr>
<td style="width: 50%;">Ctrl + V</td>
<td style="width: 50%;">Ctrl + Shift + V</td>
</tr>
<tr>
<td style="width: 50%;"><span>하늘을 우러러<br />한 점 부끄럼이 없기를,<br />잎새에 이는 바람에도<br />나는 괴로워했다.</span><br /><span>별을 노래하는 마음으로<br />모든 죽어가는 것을 사랑해야지.<br />그리고 나한테 주어진 길을<br />걸어가야겠다.</span><br /><span>오늘 밤에도 별이 바람에 스치운다.</span></td>
<td style="width: 50%;">하늘을 우러러<br />한 점 부끄럼이 없기를,<br />잎새에 이는 바람에도<br />나는 괴로워했다.<br /><br />별을 노래하는 마음으로<br />모든 죽어가는 것을 사랑해야지.<br />그리고 나한테 주어진 길을<br />걸어가야겠다.<br /><br />오늘 밤에도 별이 바람에 스치운다.</td>
</tr>
<tr>
<td style="width: 50%;"> </td>
<td style="width: 50%;"> </td>
</tr>
</tbody>
</table>
궁금한 점이나 개선 사항이 있다면 언제든지 의견을 남겨주세요. 😊
'티스토리' 카테고리의 다른 글
| 티스토리: 제목 (Hn 태그) 접기/펼치기로 글 읽기 편하게 만들기 (1) | 2024.12.30 |
|---|---|
| 티스토리: 글 안에 CSS 스타일 태그 넣기 (1) | 2024.12.15 |
| 티스토리 Odyssey 스킨: 반응형 글 너비 조절하기 (CSS) (1) | 2024.12.06 |