티에디션 상단에 고정형 이미지 배너 광고를 반응형처럼 만들기
가끔 나만의 배너 광고를 만들고 싶을 때가 있고, 이것을 실제로 티스토리 블로그에 적용을 시켜보고 싶기도 하다. 필자 또한 개인용도로 만들기도 하고, 가끔씩 타 업체로부터 제휴광고를 게시할때도 있다. 이럴때, 일반 고정형 이미지를 적용시킨 배너광고를 과연 반응형처럼 만들 수 있는 방법이 있을까? 알고보면 쉽다.
피가되고 살이되는 블로그, 친절한효자손 취미생활!
글, 사진 및 이미지 ▶ CopyLeft(C) 유길용
#CopyLeft(C) 는 저작권의 반대개념으로, "모든것을 공유한다" 는 뜻 입니다#
#공유라는 개념은 그대로 복붙하시라는 개념이 아니라, 내용을 응용해서 가져가시라는 말씀입니다#
#사진과 이미지의 일부는 퍼온것도 있음을 밝힙니다#
#본 블로그는 크롬(Chrome Browser) 1920×1080 해상도에서 가장 선명하게 보입니다#
고정형 이미지 배너를 반응형처럼 티스토리에 적용시키기
이 방법을 적용시키면 상당히 유동적으로 이미지가 변하기에 티스토리의 스킨에 전혀 해를 끼치지 않는다. 다행인 것은, 티에디션이 반응형을 지원한다는 사실이다. 기본적으로 반응형 스킨은 CSS 속성에 반응형이 들어 있기에 별도로 세팅할 건 거의 없다. 그저 태그에 다음의 한 가지 속성만 부여해주면 된다.
필자는 현재 기어베스트 티스토리 공식 블로그를 관리 중 이다. 관계자로부터 제휴제의를 부탁받고 열심히 키우는 중 이다. 여기 메인 상단에는 늘 기어베스트 관련 이벤트들을 공식적으로 배너를 걸도록 되어 있는데, 일반 고정형 이미지를 그냥 넣으면 반응형으로 동작하지 않게 된다. 그래서 약간 태그 수정이 필요하다.
또한 반응형이라는 것은, 데스크탑의 큰 해상도일 때, 그리고 그 이하일 때 사이즈가 알아서 변하는 것을 의미하는데, 사실 애드센스 반응형 광고는 데스크탑의 크기에 즉각 대응한다기 보다는 특정 사이즈에서는 이 정도의 사이즈 광고가, 또 다른 해상도에서는 이 정도의 애드센스가 노출되게끔 설계가 되었다. 따지고보면 100% 순수한 반응형은 아니다. 이것을 응용해서 그대로 한번 적용시켜 보겠다.
여기에서는 두 개의 배너용 이미지를 사용하게 된다. 사이즈를 보시면 아시겠지만, 300×250 사이즈는 모바일에서 노출되게 할 이미지이며, 828×315 이미지는 데스크탑 해상도에서 보여지게 할 이미지다. 모바일은 300×250 으로 그 이상 크기로하면 애드센스 정책 위반이므로 꼭 기억해두자. 이것이 최대 크기다. 데스크탑 해상도에서의 크기는 자유롭다. 너무 크지만 않으면 될 것 같다. 828×315 사이즈도 정해진 사이즈가 아니다. 기어베스트에 이런 배너 크기가 있길래 적당할 것 같아서 선택했을 뿐이다. 또한 Fastboot 본문 가로사이즈가 833px 이기 때문에 거의 가로크기가 맞아 떨어져서 선택한 것이다.
이 두개의 이미지 파일을 HTML/CSS편집의 파일업로드 카테고리로 들어온다. 여기에 두 개의 파일을 업로드 한다. 필자는 파일명을 알기 쉽게 변경 후 올렸다. 끝에 m이라고 붙은 이미지 파일명이 모바일에서 보여지게 할 배너 광고 이미지다.
각 이미지의 주소를 복사해야 한다. 해당 파일에 마우스를 올려다 놓으면 이렇게 미리보기 이미지가 생성되는데 티스토리 버그가 있어서 여기까지 잘 가야한다. 기본적인 방법은 마우스 커서를 파일명에 올리고 스크롤바까지 수평으로 커서를 이동 후, 스크롤바가 있는 위치에서 수직으로 내려가는 방법이 있다. 참 번거롭다. 아무튼 이렇게 이미지 주소를 복사해서 메모장에 임시로 붙여둔다.
그리고 아래의 첨부파일에 올려둔 메모장을 받으면 위와같은 코드가 들어 있다. 우선 검정 동그라미 부분에는 클릭했을 때 이동하는 URL주소를 넣으면 되고, 검정 네모 부분에는 아까 복사해둔 이미지 주소를 붙여넣으면 된다. 가로 해상도 768px는 고정된 수치가 아니다. 원하시는대로 변경 해주셔도 되는데, 대체로 모바일 (스마트폰, 태블릿 포함) 가로 해상도가 768이 많기에 그렇게 지정했을 뿐이다. 아무튼 모두 작업을 끝내고 전체 복사를 해서 사용해주면 된다.
첨부파일 |
고정형 이미지 배너 광고를 반응형처럼 만들기.txt중요한건 저기 빨간색으로 밑줄 친 부분이다. 이 부분이 바로 반응형으로 이미지를 변경해주게 하는 마법의 태그다. 데스크탑 광고에서만 적용 되어 있고 모바일에서 해당 태그가 없는데, 그 이유는 모바일에서는 해상도가 대체로 기기마다 거의 같아서 딱히 반응형으로 만들어 주지 않아도 300×250 사이즈가 창을 삐져나올일이 없기 때문이다.
이것을 티에디션의 상단에 적용시킬 예정이다. 우선 새 아이템을 만들고, 해당 영역을 클릭하여 디자인 > HTML로 들어가 원래 있던 오리지널 태그들을 모두 지우고, 위에서 새롭게 세팅한 태그를 몽땅 붙여넣기를 한다. 티에디션에 대해서 자세히 모르신다면 아래의 글을 참고하도록 하자.
보시는 것 처럼 이렇게 정상적으로 들어갔음을 알 수 있다.
아까 빨간색으로 밑줄 친 부분의 태그 역할이 바로 이것이다. 만약 해당 태그가 없는 경우라면 보시는 것 처럼 창 크기를 줄이면 이렇게 보기좋지 않게 삐져나오게 된다. 만약 해상도가 가로 770px 짜리 기기에서 접속하게 되면 이렇게 보기좋지 않게 노출되게 된다. 이 부분을 막기 위해서 강제로 스타일을 반응형으로 적용시킨 것이다. 그것이 빨간색 밑줄 친 부분의 태그가 하는 역할이다.
적용된 예시다. 보시는 것 처럼 돌출되는 부분 없이 깔끔하게 안쪽에 딱 자동으로 맞춰져서 이미지가 반응형처럼 만들어졌다. 창 크기를 실시간으로 늘리고 줄여보라. 배율대로 그대로 크기가 줄어들고 커지고 하는것이 보일 것 이다.
또한 데스크탑에서도 크기를 줄인 상태로 다시 리프레쉬(키보드 F5) 해서 새로고침을 하면, 이렇게 모바일 전용 이미지로 정상적으로 나오는 것을 확인할 수 있다.
스마트폰이나 태블릿에서 접속하면 말 할 것도 없이 정상적으로 모바일 전용 광고가 나오게 된다. 이제 이미지가 보기 좋지 않게 삐져나올일은 절대 없다. 이런식으로 고정형 이미지도 얼마든지 반응형 애드센스처럼 만들어서 적용시킬 수 있다. 끝.
Fastboot 머리말 (H태그) 밑줄 색상 변경하는 방법
"친절한효자손 취미생활" 을 검색!
