반응형 이미지 슬라이드 위에 글씨 넣는 방법
이 방법은 예전에 한번 말씀드렸던 제이쿼리를 활용하여 티스토리의 티에디션에 나만의 멋진 슬라이드는 넣는 방법과 관련이 깊습니다. 예전 강좌를 한번 살펴보신다음 이 글을 보셔야 이해가 잘 되실겁니다. 또한 단독적으로 선행되는 방법이 아니고, 같이 진행되어야 하니까 전 시간에 말씀드린 이미지 슬라이드 강좌까지 한번에 같이 살펴보시기 바랍니다.
티스토리 반응형 이미지 슬라이드 만들기+링크 거는 방법 (제이쿼리 활용)
이번 시간에는 슬라이드 이미지 위에 글씨를 넣는 방법을 알아보겠습니다. 일종의 자막을 넣는다고 생각하시면 됩니다. 보통 이런 경우는 해당 이미지에 대한 정보를 텍스트로 알리고자 할 때 많이 사용합니다. 주로 온라인 쇼핑몰에서 많이 사용되는 방법이죠.
현재 제가 관리하는 기어베스트코리아 티스토리 공식블로그의 모습입니다. 들어가 보시면 이렇게 메인화면이 티에디션으로 구성되어 있고, 맨 위에는 매주마다 새롭게 런칭하는 신제품 혹은 할인 소식에 대한 배너가 한장한장 약 5초 간격으로 슬라이드 되고 있습니다. 반응형 이미지이며 어떠한 디바이스 에서도 알아서 크기가 최적화되어 변합니다.
예전에는 이미지만 있었지만 지금 위의 빨간색 화살표가 가리키는 부분처럼 자막을 넣었습니다. 이 이미지가 어떤 내용에 대한 것인지 알리기 위해서죠. 이렇게 넣는 방법을 알아보려고 합니다.
먼저 관리자 화면에서 꾸미기 > 스킨 편집 으로 들어갑니다.
스킨편집 부분입니다. 여기에서는 HTML로 들어갑니다.
먼저 선행될 작업은 CSS를 수정하는 것입니다. 위의 내용을 추가해 주세요. 태그는 아래의 첨부파일에 있습니다.
슬라이드에 이미지 위에 글씨 넣기.txt글씨 크기를 변경하고 싶다면, font-size : 뒤에 오는 숫자를 변경하시면 됩니다.
그리고 현재 슬라이드가 되고 있는 부분에 대한 태그를 수정해야 합니다. 서두에서 소개시켜드렸다시피 전에 작업한 제이쿼리에 대한 연장선 입니다. 태그가 다소 복잡해 보이시겠지만, 분해해서 살펴보면 의외로 간단합니다.
먼저 data-cycle-overlay-template="<span class=left> {{slideNum}} / {{slideCount}}</span> ▶ {{title}}"> 이 태그를 div 안쪽에 넣습니다. 위치는 위와 동일하게 하시면 됩니다. 이 태그가 바로 원하는 문구를 보여지게 하는 태그입니다. slideNum 은 현재 슬라이드 번호를 출력하게 될 위치고, slideCount 는 총 이미지 갯수를 뜻합니다. 그리고 title에는 여러분들께서 임의로 지정한 문장이 출력됩니다.
이제 <div class="cycle-overlay"></div> 태그도 추가해 줍니다. 여기는 글씨의 백그라운드를 담당하는 태그입니다.
마지막으로 img 관련 태그의 끝자락에 data-cycle-title="자막" 이 태그를 넣습니다. 자막이라고 하는 글씨를 지우고, 여러분들께서 원하시는 문장으로 만드시면 됩니다. 이렇게만 꾸미신다면 이제 여러분들께서 원하는 내용은 다 되신겁니다. 직접 한번 시도하셔서 멋진 결과로 만들어 보시길 빕니다. 끝.
"친절한효자손 취미생활" 을 검색!
