지식의, 지식에 의한, 지식을 위한 블로그

[티스토리] 블로그 내 페이지 새창 띄우기

DOCTYPE/기술공유 2016.08.17 14:06


안녕하세요, 배종진 입니다.


우연히 티스토리 포럼에서 질문을 구경하던 중 한가지 특이한 점을 발견하여 이렇게 기술공유 드리고자 포스팅 해봅니다.


일반적으로 여러분께서 포스팅을 하다가 독자들의 이해를 돕기 위하거나, 자신의 이전 포스팅을 참고하라는 의미로 다른 페이지를 링크를 걸게 되는 경우가 있습니다.


그런 경우에 당연하지만 포스팅의 경우에는 참고하라고 준 링크를 보여주기 위해 기존에 독자가 읽고있던 포스팅을 닫아버릴 수도 없고, 일반 기업들의 웹페이지 같은 경우엔 본인들 사이트의 고객들이  사이트에 유지시간을 단 1초라도 더 늘려야 수익과 관련이 되기에 자신의 사이트를 닫고 다른 페이지로 굳이 넘겨버릴 필요는 없죠.

 

그래서 나온 개념이 바로 [새창띄우기] 혹은 [새창열림] 기능인데요.


새창열림 이란?

브라우저(=익스, 크롬 등)에서 페이지 하나를 하나의 창(=유리창, 창문의 창)으로 생각하여, 기존 페이지를 놔두고 새로운 탭(=창)을 열어 페이지를 열리게 한다.


일반적으로 티스토리 블로그 유저분들은 크게 두가지 방법으로 새창을 띄우실거라 생각됩니다.


티스토리 자체 에디터 사용


- 상기 이미지에 표시된 붉은영역을 누르고 URL을 입력하시면 새창으로 뜨게 됩니다.




target="_blank" 직접 입력


<a href="http://metaphor.kr" target="_blank">메타포</a>


- 코드를 조금 다룰 줄 아신다면 a태그가 하이퍼링크 기능이라는걸 바로 아실테고, 코드가 아직 서투시다면 글쓰기 에디터 내 우측 상단의 HTML 을 체크하시고 여러분이 작성한 포스팅이 HTML로 변환되어 나오면 위 코드를 넣거나 확인하실 수 있습니다. 저 코드 중 target="_blank"가 바로 새창열림을 뜻합니다. 



이처럼 target="_blank"는 새창을 띄운다는 의미의 코드인데요, 제가 앞서 말씀드렸던 포럼에서 발견한 티스토리 블로그 링크의 특이점은 다음과 같습니다. 



질문과 문제점


- 정리를 하자면, 포스팅을 하던 중 자신의 이전 포스팅 글을 참고용으로 링크를 걸고자 넣었는데 새창열림 기능을 넣어도 먹히지 않아 기존 포스팅 페이지 그대로 링크가 넘어가게 되어 불편하시다는 내용 입니다. 


저 또한 해당 질문자님의 블로그를 찾아가 문제가 되는 페이지의 코드를 확인해봤지만 위에 설명드린 target="_blank" 가 사용되어 있고 아무 문제가 없는 지극히 정상적인 코드였습니다. 그래서 기존의 html 코드가 아닌 javascript를 사용하여 테스트 해보았고 제가 내린 결론은 다음과 같습니다.


"티스토리 블로그 내 페이지에선 새창띄우기가 먹히지 않는다."


그냥 막연히 이렇게 결론만 내리고 끝낼꺼면 시간내어 이 포스팅을 보신 이유가 없으시겠죠?


그래서 저는 여러분께 다음과 같은 해결책을 제시해봅니다. 


제안하는 해결책


<a href="javascript:void(0)" onclick="window.open('티스토리주소', '_blank');">메타포</a>


01) 기존의 href 엔 javascript:void(0) 을 적어준다.

02) onlick 코드를 넣어 자신의 블로그 내 링크를 걸어줄 페이지 주소를 적어준다.



물론 자신의 블로그 내의 페이지가 아닌 다른 사이트라면 기존의 방법을 사용하여도 무방합니다. 


위와 같은 이슈가 발생하는 이유에 대해선 정확히 답변드리기 어려우나, 아마도 dotdotdot.tistoty.com 이라는 도메인을 사용하는 블로그 내에서만 발생되는 이슈인걸로 봐선 아마도 도메인쪽의 문제로 발생되는걸로 추정만 될 뿐입니다. 

(제 블로그와 같이 따로 사설도메인을 사용하는 블로그에선 새창열림이 문제없이 작동하는걸 확인하였습니다.)


혹시라도 위와같은 문제로 고민이 많으신 분들이 계시다면 작은 도움이 되셨길 바랍니다.


다음에 더 유용하고 쓸모 많은 정보로 찾아뵙겠습니다. 감사합니다 :)



게 시 글 공 유 하 기

페이스북

트위터

네이버

카카오스토리

구글플러스

댓글달기
  1. 알기 쉽게 잘 정리해주셨네요!
    자주 방문하겠습니다!
    자바스크립트를 공부해봐야겠어요 :)
  2. 이런 방법도 있군요. 잘 읽고 갑니다.