티스토리 스킨은 확실히 네이버나 다음 블로그보다는 처음 접하는 분들에게 어렵게 느껴지는 것은 사실이죠. 어렵게 느껴지는 이유는 아마도 직접 태그를 사용하여서 HTML 소스를 변경해야하는 부분이 많다는 점이 아닐까 합니다.
html 이미지 링크걸기 티스토리 메인이미지 홈으로 링크 거는 방법
HTML 태그에 대해서 사실 저도 거의 무지한 상태에서 출발하여 하나씩 배워가고 있는데 HTML 태그 기본적인 것 몇개만 알아도 티스토리를 하는데 많은 도움이 되는 것 같아요.
처음 티스토리 반응형 스킨을 적용하고 첫화면에 블로그 이미지도 넣으면서 조금씩 변해가는 블로그에 애착이 가기 시작하죠. 티스토리 상단의 메인 이미지를 바꾸어 넣었는데 이미지만 넣고 따로 링크를 걸지 않아서 이미지를 클릭했을때 톡톡캐스트 홈으로 이동했으면 하는 생각이 들어서 오늘은 HTML 이미지 링크 걸기에 대해서 알아보도록 하겠습니다.
HTML 하이퍼 링크 태그
이미지에 링크걸기를 하기 위해서 이해야할 태그가 하이퍼링크인데 하이퍼 링크에 대해서 알아보도록 하겠습니다.
- 하이퍼링크 기본 구조 : <a href="주소" target="_self">글자 또는 이미지</a>
- target 속성 : _blank(새창), _new(한번 새창), _parent(이전단계), -top(제일 상위창)
HTML 이미지 태그
이미지 태그는 아래와 같은데 속성에는 width, height, alt, border 등이 있습니다.
<img src="이미지 주소.jpg">
HTML 이미지 링크 걸기
위의 2가지 태그인 하이퍼링크와 이미지 링크를 결합하면 이미지에 링크를 걸수 있는데 형식은 아래와 같습니다.
<a href="이미지 클릭했을때 이동할 주소"><img src="이미지 주소"></a>
티스토리 관리화면 HTML/CSS 편집화면으로 들어가서 키보드 Ctrl + F (찾기)를 눌러 cover 입력후 이미지 소스를 아래과 같이 찾아서 변경해줍니다.
변경 전(前)
<div class="item active"><a href="#"><img class="img-responsive" src="./images/maincover.png" alt="cover-black"></a></div><!-- first image -->
변경 후(後)
<div class="item active"><a href="http://toctoccaster.tistory.com"><img class="img-responsive" src="./images/maincover.png" alt="cover-black"></a></div><!-- first image -->
톡톡캐스터 상단의 이미지가 보이죠. 이 이미지를 클릭하면 어떤 페이지에 있던 홈화면으로 이동하도록 링크를 걸어보았습니다.
지금까지 티스토리 메인이미지에 홈으로 링크 거는 방법에 대해 알아보았고 HTML 기본적인 태그인 하이퍼링크과 이미지 링크에 대해서도 간단하게 알아보았습니다.
