메모장, 구글 문서 복·붙하면 안된다고?  코드 뭐지??

티스토리를 이제 시작한 지 얼마 안 된 분들은 궁금한 것들도 많을 것이라고 생각됩니다. 여러 가지 중에서도 특히 HTML 코드에 대하여 모르는 것들도 많고 알고도 쓰지 못하는 것들이 많을 것 같습니다. 그래서 이번 시간에는 궁금했던 것들과 HTML 간략한 것들에 대해서 알아보도록 하겠습니다. 

 

메모장에서 복붙 하면 안 되나요?

 

많은 분들이 궁금해하는 사항으로 메모장에 미리 써놓은 글을 티스토리에 바로 넣으면 안 된다는 말들이 많습니다. 한편으로는 내가 쓴 글인데 왜 안되지 하는 생각들을 하실 거 같은데요. 결론은 말하면 상관없습니다. 티스토리를 처음 접하고 하시는 분들도 이런 거 모르고 잘하고 있으시며 에드센스 승인, 저품질에 걸리지 않으시고 잘하고 있기 때문입니다. 

 

하지만 다들 조금이라도 아시는 분들이라면 메모장에 글을 쓰고 복사해서 붙여 넣기를 할 경우 기본모드→ HTML모드로 들어가시면  이런 코드들이 많이 생기게 됩니다. 티스토리를 시작하신 지 얼마 안 된 분들이 대부분 겪는 문제입니다. 이런 것들을 지우시느라 글을 쓰는 시간에 많은 시간을 뺏기는 거 같습니다. 

 

참고로 핸드폰에 구글 문서 어플을 다운로드하여 활용해 보실 권장 합니다. 메모 습관은 블로그 하는 것에 아주 좋은 습관으로 큰 도움이 됩니다. 메모장과 구글 문서기준으로 알려 드리겠습니다. 

코트구성이 세 가지 방식이 전부 다른 것을 볼 수 있습니다. 테스토리에서 직접 글을 쓰면 없는 코드들이 생겼습니다. 이것들은 다른 곳에서 복사, 붙여 넣기를 했다는 흔적이며 심하면 페이지의 속도를 느리게 하여 크롤링 에러의 원인이 되기도 합니다. 검색 엔지 최적화에 안 좋은 영향을 줄 수 있는 건데 불필요한 코드들이 애드 센스, 저품질의 영향을 주는 것은 아닙니다. 

메모장에서 복붙을 한경우 많이 볼 수 있는  입니다. 줄 바꿈 없는 공백을 의미합니다. 한 칸 뜨어 쓰기를 의미하는 코드입니다. 

오늘은 최적화하여 사이트 속도를 빠르게 까지는 아니고 불필요하게 느려지는 걸 방지해 주는 방법에 대해 알려드리겠습니다

 

그리고 html 모드에서는 띄어쓰기를 많이 해도 기본모드에서는 한 번으로 인식하지만 기본모드에서 띄어쓰기를 한경우에는 띄어쓰기를 한 만큼 코드가 생기는 것을 알 수 있습니다.  그리고 이걸 없애는 방법은 간단합니다. HTML모드에서 복붙을 한 문서를 전체 드래그 해서 복사해서 메모장에 넣어줍니다. 그리고 편집기능에서 바꾸기 모드에서 찾는 내용에서  넣어주고 바꿀내용에 스페이스바 한 번을 넣어주면 깔끔하게 변경되는 것을 볼 수 있습니다.  

 

<p>, <br> 이것은 뭐죠?

 

p는  paragraph의 약자로 문단을 정의합니다.  br은 break(line break)의 약자로 가독성을 좋게 하기 위해서 코딩에서 문단 같은데 단순히 눈에 보이는 줄위치를 바꿔주는 기능입니다. 

문장이 끝나기 전에 너무 가로로 길게 글이 이어지는 것이 불편하여 줄을 나눠주고 싶은 분들은 엔터가 아닌 shift를 누른 상태에서 엔터를 누르면 p가 아닌 br태그로 줄 바꿈을 해 줄 수 있습니다.  메모장에서 한 줄이든 여러 줄이든 복붙을 한경우 티스토리에서 한문단으로 인식하기 때문에 p태그 사이에 전부 내용이 들어가므로 제목이나 어떤 스타일을 넣을 경우 동일하게 적용받게 됩니다. 

 

제목 1→ H1테크?

많이들 오해하는 부분들이 있는데 제목 1이라서 H1이라고들 생각하신 느 분들이 많습니다. 하지만 제목 1을 넣고 html에 들어가 보면 h2로 들어간 것을 볼 수 있습니다. 왜 그런 거냐면 글 제목이 h1으로 티스토리 스킨에서 설정되어 있어 제목 1이 h2이며, 제목 2가 h3, 제목 3이 h4가 되는 게 맞습니다.  이내용을 따로 자세하게 다른 글에서 알려드리겠습니다. 

 

 

<p><h2> 뒤에 data-size="size16"별도로 긴 코드가 붙어 있습니다.  이 내용은 모바일용 어플로 만들면서 모바일에 최적화된 글씨 크기를 보여주기 위하여 글자크기를 조정하는 것으로 실제로는 별 필요 없다보고 보시면 됩니다. 억지로 바꿔도 기본모드에서 html로 들어오면 다시 생깁니다. 그러므로 그냥 두셔도 무방합니다. 이것을 별도로 스킨편집에서 지우시는 분들이 계시는데 공지사항에 보면은 모바일 사요를 늘리기 위해 업데이트를 진행하고 있습니다. 그러므로 강제로 지우거나 하여 혹시 오류가 생길 수 있으므로 그냥 두는 것을 추천합니다. 

 

구글 문서 붙여 넣기 

보시면 메모장에서 없었던 span 이란 코드가 붙는데  이 코드는 글자 색, 배경색 등 스타일을 변경하는 코드입니다. <div>는 넓은 구간역에 스타일을 지정하는 것으로 복붙으로는 거의 붙는 경우가 없는데 요즘 ChatGPT로 글을 쓰고 복붙 하는 경우에 생기는 경우가 있습니다. 여기서 보면 #0 6개는 검은색을 의미합니다 그런데 티스토리에서 기본적으로 글씨 색상을 검은색으로 지정하고 있는데 굳이 이걸 스펜 코드로 000 해서 검은색을 지정해 줄 필요가 없습니다. 

 

HTML에서 복사해서 구글 문서로 가져와서 메모장에서 처럼 찾기/바뀌로 한 칸 띄고 하면 지울 수 있습니다. 오늘은 많이들 알고 계신 내용 아주 기초적인 사항들에 대하여 설명했습니다. 많은 분들이 기본적인 구글 권장사항을 위반하는 경우가 있을 경우가 많을 것입니다.  이런 내용은 많이 알고 있는 분들 보다는 처음 시작하는 분들이 시작하실 때 seo기준에 전부 맞춰서 최적하기 힘들지만 조금이라도 도움이 되었으면 합니다.