티스토리 스킨편집 HTML 모드와 사이드바의 img src 이미지 주소 차이점
한창 친효스킨을 만들면서 새롭게 알아낸 사실 입니다. 티스토리는 오픈형 블로그이긴 하지만 완벽하게 100% 개방된건 아닙니다. 이를테면 사이드바와 본문에서의 이미지 소스를 불러오는 차이가 있습니다. 아무래도 사이드바에 사용되는 스크립트 때문인 것 같습니다. 어쨌든 결과적으로는 둘 다 정상적으로는 이미지를 불러올 수 있습니다만, 어떤 차이가 있는건지 정확하게 알면 나중에 응용할 때 편리할 것 같습니다.
본문 (스킨 HTML) 에서 이미지 주소
먼저 우리가 흔히 스킨 편집을 할 때 들어가는 HTML 편집기에서의 이미지 주소 입니다. 여기에서는 외부 이미지가 아닌, 자신의 티스토리 스킨 내부의 이미지를 불러올 때로 한정합니다. 외부 이미지는 어차피 외부 이미지 풀 주소를 사용해야 하니까요.
보통 자신의 스킨 내부의 이미지라함은 파일업로드 카테고리에 업로드해서 사용합니다. 잘 이해가 안 되신다구요? 아래의 이미지를 참고해 주세요.
그렇습니다. 바로 저곳에 업로드를 해서 이미지 파일에서 마우스 오른쪽 버튼을 눌러서 (크롬의 경우) 링크 주소 복사를 하여 이미지 주소를 사용하는게 보통입니다. 하지만 이렇게 되면 이미지 주소가 길어집니다. 친효 스킨의 경우로 예를 들어 보겠습니다. 저기 위에 표시된 이미지 중 구글플러스 아이콘의 주소는 다음과 같습니다.
https://tistory1.daumcdn.net/tistory/944811/skin/images/logo_googleplus.png
이게 제 계정안에 존재하는 구글플러스 아이콘 이미지 주소 입니다. 빨간색 주소는 아마 티스토리 사용자마다 조금씩 다를 것 입니다. 그리고 파란색 부분 이후부터는 같습니다. 이 주소를 스킨의 HTML 영역에서는 생략이 가능합니다. 이렇게 표현할 수 있습니다.
./images/logo_googleplus.png
색으로 표시한 부분을 모두 생략하고 닷(.)으로 만들 수 있습니다. 이 뜻은 내 티스토리 주소 안에 존재하는 images 라고 하는 폴더 안의 logo_googleplus.png 파일 이라는 의미를 갖습니다. 여러분들이 사용하는 스킨 편집 모드에서 HTML 안에 들어가서 한번 이미지 주소가 사용된 링크들의 모습을 살펴보세요. 십중팔구 이렇게 생략되어 있을 것 입니다. 친효스킨에서도 마찬가지의 방법으로 이미지 주소를 사용하고 있습니다.
왜냐하면 배포용 스킨인데 이미지 주소를 처음 방법대로 풀 주소를 사용해 버리면 여러분들의 계정과 저 빨간색 계정이 맞지 않게 되므로 이미지를 불러올 수 없게 되버립니다. 그러면 이미지가 사용되는 모든 소스에서 엑스박스 처리를 하게 될 것이고 결과적으로 스킨이 망가져 출력되게 됩니다. 그렇기에 티스토리 HTML 에서는 저렇게 단축된 이미지 주소를 사용해서 모든 이미지를 불러오는 것 입니다. 간단하기도 하구요.
이미지 뿐만 아니라 이 원리를 이해한다면 다른 파일들도 로딩할 수 있습니다. 친효스킨에는 제이쿼리 파일도 존재합니다. 이 파일은 위의 스크린샷에 표시된 저것 입니다. 이것을 HTML head에서 로드할 때 다음과 같이 사용되어집니다.
이런식으로 src 다음에 위에서 말씀드렸던 방법대로 축약된 주소로 사용할 수 있는 것 입니다. 모든 티스토리 스킨은 이 방법을 사용해서 로드합니다.
그렇다면 사이드바는?
같은 HTML 안에서 존재하는 사이드바 영역, 여기에서도 저렇게 간략한 이미지 주소를 써서 표현이 가능할까요? 결론은 가능하기도 하고 불가능하기도 합니다. 어떤 차이로 인해 이런 결과가 나오게 되는지 알아봅니다.
첫번째는 HTML 내부에 존재하는 사이드바에서 직접 이미지를 불러오는 경우 입니다. 이 경우는 HTML 편집모드에서 직접 이미지 주소를 링크거는 것으로 위에서 언급했던 경우와 동일한 상황 입니다. 사이드바의 그룹치환자 태그는 <s_sidebar> 를 사용하게 되며, 그 안에 존재하는 사이드바 모듈은 늘 <s_sidebar_element> 로 묶여 있습니다. 이 태그 안에 직접 img src를 사용하고 이미지 주소를 ./image... 로 사용할 수 있는 것 입니다. 이런 경우에만 생략된 이미지 주소를 사용할 수 있습니다.
두번째는 티스토리 관리자 모드의 꾸미기에 있는 사이드바 카테고리에서 추가할 때 입니다. 보통 여기에서는 HTML 배너출력 플러그인을 사용해서 사이드바에 수동으로 우리가 원하는 이미지 배너를 등록할 때 사용되곤 합니다. 여기에서 이미지 주소는 반드시 풀주소를 사용해야 정상적인 이미지를 불러올 수 있습니다. 생략된 이미지 주소는 불러올 수 없습니다. 이해를 돕고자 현재 이 스킨 사이드바에 있는 친효책 배너의 코드를 살펴보겠습니다.
<div style="text-align:center;">
<a style="display:block;" target="_blank" href="/2919"><img src="https://tistory4.daumcdn.net/tistory/944811/skin/images/mybook.png" style="text-align:center; max-width:100%;" alt="친절한효자손 티스토리 책"></a>
</div>
이렇게 이미지 풀주소를 사용하고 있습니다. 정확한 이유는 알 수 없지만 스크립트 때문에 그런것이 아닌가라는 생각을 하고 있습니다. 아시다시피 이 사이드바 모듈은 상당히 유동적으로 이루어져 있습니다. 사용자가 입맛에 따라 모듈들의 위치도 변경이 가능하고 필요한 기능을 넣고 반대로 제거할수도 있습니다. 이 기능이 가능한건 스크립트 때문인데 결국 스크립트 충돌을 피하기 위해서 이렇게 정확한 주소를 사용하게 되는게 아닌가라는 생각을 해 봅니다. 어찌되었든 사이드바에서의 이미지 주소는 이렇게 정확하게 작성해줘야 출력이 된다는 점을 알아주시기 바랍니다. 끝.
"친절한효자손 취미생활" 을 검색!
