⚠️ 티스토리에 타사이트 글을 복사 붙여넣기 하면 생기는 문제

 

JavaFestival 카테고리와 관련해서 공지 올립니다.

 

(현재 시간 2024.11.11 기준)

제 블로그에서 JavaFestival 카테고리 게시물 등은 다크모드로 이용하실 경우 글자 블럭마다 흰 색 배경이 나타나는 문제를 겪고 있습니다.

따라서 해당 카테고리를 이용하시는 분들은 반드시 블로그 하단의 다크모드/라이트모드 전환 버튼을 눌러 '라이트모드'상태에서 이용해주시길 바랍니다.

블럭마다 흰색 배경이 나타나는 현상

 

 

 

해당 문제가 나타나는 이유는 타 사이트에서 티스토리로 글을 복사 + 붙여넣기 한 경우 불필요한 태그들이 함께 추가 되는 현상입니다. 저는 이 블로그를 운영하기 전 네이버 블로그를 먼저 운영하고 있었는데, 네이버 블로그에 먼저 포스팅한 글을 그대로 티스토리로 옮겨 오는 과정 및, 해당 코드에 관한 설명을 발췌해 오는 과정에서 무분별하게 쓰레기 태그값들이 함께 복사가 된 것으로 확인이 되고 있습니다. 이전까지는 라이트모드를 이용하느라 잘 몰랐는데,  최근 다크모드로 커스텀을 하던 중 제 블로그에서 기존에 포스팅한 글들 중 상당부분이 해당 문제를 겪고 있는 것을 알게 되었습니다. 

---

 

⚠️이런 현상이 발생하는 원인

아래 링크를 타고 블로그에 가시면 잘 설명이 되어 있습니다.

https://puleunhaneulkr.tistory.com/99

티스토리에 타사이트 글을 복사 붙여 넣기하면 어떤 문제가 생길까?

 

---

⚠️다크모드에서 글씨가 어둡게 보이는 현상(해결)

기존에 다크 모드에서 글씨가 어둡게 보이는 현상, 배경색이 지정되는 현상은 아래 블로그를 참조하여 해결했습니다. (2024.11.11)

.dark span[style*="color: #333333; text-align: start;"],
.dark span[style*="color: #000000; text-align: start;"],
.dark span[style*="color: #333333;"],
.dark span[style*="color: #000000;"],
.dark span[style*="background-color: #ffffff;"],
.dark h1[style="background-color: #ffffff; color: #000000; text-align: start;"],
.dark h1[style*="color: #000000; text-align: start;"],
.dark h2[style*="color: #000000; text-align: left;"],
.dark h2[style*="color: #000000; text-align: start;"],
.dark h2[style="background-color: #ffffff; color: #000000; text-align: start;"],
.dark h3[style="background-color: #ffffff; color: #000000; text-align: start;"],
.dark h3[style*="color: #000000;"][style*="text-align: left;"],
.dark h3[style*="color: #000000;"][style*="text-align: start;"],
.dark h3[style*="color: #333333;"][style*="text-align: start;"],
.dark h4[style*="color: #333333;"][style*="text-align: start;"],
.dark h4[style*="color: #000000;"][style*="text-align: start;"],
.dark ol[style="list-style-type: decimal; color: #000000; text-align: start;"],
.dark ul[style="list-style-type: disc; background-color: #ffffff; color: #212529; text-align: start;"],
.dark ul[style="list-style-type: disc; background-color: #ffffff; color: #000000; text-align: start;"][data-ke-list-type="disc"],
.dark li[style="list-style-type: decimal; color: #666666;"],
.dark li[style="list-style-type: disc; color: #666666;"],
.dark p[style="color: #333333; text-align: start;"],
.dark p[style="color: #000000; text-align: start;"],
.dark p[style="background-color: #ffffff; color: #000000; text-align: start;"]{
    background-color: rgb(30, 31, 33) !important;
    color:  #fff  !important;
}

 

이건 티스토리의 예전부터 발생하던 복사 붙여넣기를 하면 자동으로 이상한 태그들이 발생하는 오류를 편법으로 수정하는 방법이다. 저 span태그들이 붙어있으면 평소에는 이상없어보이는데, 다크모드로 바꾸거나 할 때 글씨가 이상해진다.

따라서 css편집에 들어가서 아래 style을 붙여넣어준다. 저 태그들을 가진 것들은 강제적으로 글씨 색상과 배경색상을 정해주는 것이다.
이걸해도 안되는 부분들이 있다면 글 작성시 에디터에서 html모드로 들어가서 문제가 발생하는 태그를 복사하여 앞에 .dark를 붙인뒤 맨위에 붙여넣고 ,를 잊지말고 적어주면 된다. 아래 css 위에 이어서 작성해주면 된다.

 

출처: https://changsroad.tistory.com/418#4. 티스토리 span 태그 없애기 (티스토리 버그)-1 [Let's be Developers:티스토리]

 

---

 

하지만 텍스트블럭에 하얀 배경이 생기는 부분은 개별적으로 글을 수정하지 않으면 해결할 수 없는 현상으로,  제가 기존에 발행한 300개의 글을 빠른 시간 내에 모두 수정하기는 어려울 것 같아서, 여러분께서 라이트모드로 봐 주시기를 당부드립니다. 

 

아래는 에디터에서 텍스트에 드래그 해서 반전을 시킨 것으로 보시면 각종 태그값이 붙어 있어서 수동으로 제거해 주지 않으면 티스토리 html 편집창에서 일괄 편집이 어렵습니다. 

 

---

 

⚠️코드 블럭 테두리 문제

또한 다크모드에서 코드블럭 테두리에 하얀색 모서리가 나타나는 현상을 발견하였습니다. 이 문제는 코드블럭을 감싸는 컨테이너에 border-radius값이 안 먹여진걸로 보여서 바로 수정을 할 수 있을 것 같습니다. 빠른 시간 내에 해결하겠습니다.