2013. 8. 4. 09:57ㆍIT/Tistory Tips
티스토리 블로그에 이웃 링크를 삽입하면 아래로 길게 나열된다. 평소엔 괜찮지만, 이웃이 많아지면 본문보다 사이드바가 길어져서 보기가 좋지 않을 수 있다. 그럴 땐 스킨을 조금만 수정하면 링크를 깔끔하게 정리할 수 있다.
1. 링크 영역에 스크롤 바 추가하기
첫 번째 방법은 간단한 CSS 수정으로 이웃 링크 부분에 스크롤 바를 추가하는 것이다. 이 방법의 장점은 CSS만 수정하면 바로 적용할 수 있다는 점.
일단 [티스토리 관리] - [꾸미기] - [HTML/CSS 편집]으로 이동한 다음 skin.html에서 <s_link_rep>를 찾는다.
<s_sidebar_element>
<!-- 링크 -->
<div class="link">
<h3>링크</h3>
<ul>
<s_link_rep>
<li>
<a href="[##_link_url_##]" onclick="window.open(this.href); return false"> [##_link_site_##].</a>
</li>
</s_link_rep>
</ul>
</div>
</s_sidebar_element>
대략 위와 같은 형태로 구성되어 있을 텐데 [##_link_site_##] 부분을 찾는다. 그리고 그 부분을 포함한 상위 태그에서 class 또는 id라느 부분을 찾는다. 위의 예에선 class="link" 부분이다. 이 class나 id를 이용해서 스타일을 지정하면 끝이다.
이제 스타일을 지정해보자. [티스토리 관리] - [꾸미기] - [HTML/CSS 편집] - style.css에 아래의 내용을 추가한다.
.link ul{
height: 80px;
overflow-y: auto
}
.link는 위에서 확인한 class="link"를 의미하는 선택자이고 overflow-y: auto는 내용이 정해진 높이 이상 될 때 자동으로 스크롤 바를 추가하라는 의미다. 높이는 height 속성으로 조정할 수 있다. 선택자에 대한 상세한 내용은 CSS 선택자(Selector)와 우선순위를 참고한다.
2. 링크 영역을 드롭다운 목록으로 나타내기
두 번째 방법은 HTML을 수정해서 링크 영역 자체를 드롭다운 목록으로 바꾸는 방법이다. 링크를 깔끔하게 정리할 수 있을 뿐 아니라, 사용자가 원하는 방법으로 그룹화할 수도 있다.
역시 첫 번째 방법과 같이 [티스토리 관리] - [꾸미기] - [HTML/CSS 편집]으로 이동한 다음 skin.html에서 <s_link_rep>를 찾는다.
<s_sidebar_element>
<!-- 링크 -->
<div class="link">
<h3>링크</h3>
<ul>
<s_link_rep>
<li>
<a href="[##_link_url_##]" onclick="window.open(this.href); return false"> [##_link_site_##].</a>
</li>
</s_link_rep>
</ul>
</div>
</s_sidebar_element>
이제 위 링크 코드를 아래와 같이 바꾼다.
<s_sidebar_element>
<!-- 링크 -->
<div class="link">
<h3>링크</h3>
<select onchange="window.open(this.value);" style="font-size: 0.9em; font-family: 'malgun gothic', '맑은 고딕', sans-serif; width: 150px; text-align: center">
<option value="">---- 이웃 목록 ----</option>
<s_link_rep>
<option value="[##_link_url_##]">[##_link_site_##]</option>
</s_link_rep>
</select>
</div>
</s_sidebar_element>
'---- 이웃 목록 ----' 부분은 드롭다운 목록의 제목 부분이다. 원하는 제목으로 바꾼다. <s_link_rep>는 그 사이에 있는 부분을 전체 이웃 목록으로 반복해서 표현하는 부분이다. 즉, 이웃 수만큼 option 태그가 생긴다.
<select onchange="window.open(this.value);" style="font-size: 0.9em; font-family: 'malgun gothic', '맑은 고딕', sans-serif; width: 150px; text-align: center">
<option value="/#">---- 티스토리 이웃 ----</option>
<option value="http://이웃1.tistory.com/">너는 내 이웃 1</option>
<option value="http://이웃2.tistory.com/">너는 내 이웃 2</option>
<option value="http://이웃5.tistory.com/">너는 내 이웃 5</option>
<option value="http://이웃6.tistory.com/">너는 내 이웃 6</option>
</select>
<select onchange="window.open(this.value);" style="font-size: 0.9em; font-family: 'malgun gothic', '맑은 고딕', sans-serif; width: 150px; text-align: center">
<option value="/#">---- 네이버 이웃 ----</option>
<option value="http://blog.naver.com/이웃3">너는 내이버 이웃 3</option>
<option value="http://이웃4.blog.me/">너는 내이버 이웃 4</option>
</select>
이웃을 그룹화하고 싶다면 select 태그를 여러 개 사용하면 된다. 단, 이럴 땐 각 select 태그에 표시할 하위 option 태그를 사용자가 직접 입력해야 한다. 이웃이 많다면 작성하는 데 시간이 오래 걸려 불편하지만, 대신 블로그 이웃 외에도 즐겨가는 사이트 등의 링크를 추가할 수 있다는 장점도 있다.
예제에서 드롭다운 목록의 너비와 스타일을 인라인으로 지정했는데, 너비를 지정하는 width 속성은 해당 링크가 위치할 사이드바의 전체 너비보다 작게 설정한다. 또 style.css에 따로 select 태그에 대한 스타일을 정의해도 상관없다.