상세 컨텐츠

본문 제목

블로그 사이드바 달력 모듈 태그 설명 및 달력 모듈 HTML/CSS편집에서 삭제하기

블로그 만들기/기본,수정,활용

by CHO KYUNG WON 2011. 2. 25. 21:06

본문



지난번에 이미지/설명 모듈 삭제하는 법을 설명드린것과 크게 다를바 없지만 이번에는 사이드바 달력 모듈 삭제하는 법과 태그를 삭제했을 때 적용이 어떻게 되는지 설명해 드리겠습니다.

제가 사용하는 3단형 NaVyMoD 스킨을 예를 들어 설명을 하겠습니다.

좌측의 스샷 이미지는 티스토리 블로그 3단형 NaVyMoD 스킨에 기본적으로 제공하는 달력 모듈입니다.

블로그 사이드바1(좌측)에 배치되어 있으며 관리자(admin) →  스킨 → 사이드바 설정에서도 모듈이 있지를 않아서 추가, 삭제가 불가능하기 때문에 달력 모듈이 필요가 없다면 HTML/CSS 편집에서 수정, 삭제를 해 주셔야 합니다.

3단형 NaVyMoD 스킨의 달력 모듈을 삭제를 하기 위해서 관리자(admin) → 스킨 → HTML/CSS 편집으로 이동하여 상단 skin.html 창을 스크로 해서 내려 보면 <!--달력 모듈-->이 있을 것입니다.
위 스샷 이미지는 skin.html 창에서 달력 모듈 태그 소스가 한눈에 보이도록 편집해 놓은 것이고 빨간줄을 쳐놓은 것이 삭제했을 때 나타나는 현상을 알려 드리기 위해서 체크해 놓은 것입니다.

<!-- 달력 모듈 -->
<div id="calendar">
<h3>calendar</h3>
<s_custom_calendar>
<div class="cal_month">
<a href="[##_prev_month_##]" class="calendar_prev" title="1개월 앞의 달력을 보여줍니다."> <span>&laquo</span></a>
<a href="[##_next_month_##]" class="calendar_next" title="1개월 뒤의 달력을 보여줍니다."> <span>&raquo</span></a>
<a href="[##_this_month_##]" title="현재 달의 달력을 보여줍니다."><span id="imgMonth">[##_year_##].[##_month_##]</span></a>
</div>
<table class="tt-calendar" cellpadding="0" cellspacing="7" style="table-layout: fixed">
<s_calendar_header>
<thead>
<tr>
<s_calendar_header_item>
<th class="[##_class_##]">[##_title_##]</th>
</s_calendar_header_item>
</tr>
</thead>
</s_calendar_header>
<s_calendar_days>
<tbody>
<s_calendar_week>
<tr class="[##_class_##]">
<s_calendar_days_item>
<td class="[##_class_##]">[##_day_##]</td>
</s_calendar_days_item>
</tr>
</s_calendar_week>
</tbody>
</s_calendar_days>
</table>
</s_custom_calendar>
</div>

참고) "#" 표시는 글쓰기의 특수문자에 있는 것으로 키보드에 나타나 있는 "#"과 다르니 복사해서 붙여넣기 하시면 안됩니다.
키보드의 있는 "#"을 글쓰기에 작성하면 글 작성후 본문에서 예)[##_calendar_##] 스킨 치환자용 태그가 보여지지 않기 때문에 임의로 글쓰기에서 특수문자를 사용한 것입니다.

달력 모듈 태그 속성(기능)에 대해서 간단하게 설명을 드리겠습니다.

[##_prev_month_##], [##_next_month_##], [##_this_month_##] 태그는 앞에 a href 태그가 있기 때문에 링크해주는 스킨 치환자용 태그입니다.

이 스킨 치환자용 태그를 삭제를 하면 링크 연결이 안되어 이전달, 현재달, 다음달로 이동이 불가능합니다.

class="calendar_prev", class="calendar_next"에서 calendar_prev와 calendar_next만 삭제하면 전달과 다음달로 가기위한 <  > 방향 표시가 하나에서 각각 << >>2개가 생깁니다.

그래서 calendar_prev와 &laquo, calendar_nex와 &raquo를 같이 삭제를 해주셔야지만 < > 방향표시가 삭제됩니다.

calendar_prev와 &laquo, calendar_nex와 &raquo 태그를 삭제해서 < > 방향표시를 삭제하더라도 그 위치에 마우스를 올려 놓으면 클릭이 가능한 손모양 아이콘이 형성됩니다.

&nbsp; 태그를 삭제해 주셔야 클릭이 가능한 손모양 아이콘이 안나타납니다.

지금까지의 태그의 설명은 지난달과 다음달로 이동하기 위한 태그 소스들의 기능을 설명했습니다.

그러면 현재달의 태그는 <span id="imgMonth">[##_year_##].[##_month_##]</span> 인데 [##_year_##]은 연도 스킨 치환자용 태그이고 " . " 마침표는 년과 월을 구분짓는 표시이고 [##_month_##]는 월 스킨 치환자용 태그입니다.

[##_year_##].[##_month_##]을 삭제하면 년과 월의 표시는 삭제되지만 년과 월표시가 있었던 자리에 마우스를 갖다 놓으면 링크가 가능하도록 점선과 손가락 모양아이콘이 나타납니다.

imgMonth 태그까지 삭제해 주셔야 점선과 손가락 모양 아이콘이 나타나질 않습니다.

지난달 방향표와 년.월 표시, 다음달 방향표시를 기능을 설명하며 삭제를 했고 이제 남아 있은 것은 현재달의 날일만 남아있습니다.

<s_calendar_header_item><th class="[##_class_##]">[##_title_##]</th>태그에서 [##_class_##]를 삭제하면 글이 등록되어던 날에 마우스를 올리면 클릭이 가능하도록 손모양 아이콘이 뜨는데 손모양 아이콘이 뜨지 않게 해줍니다.

<s_calendar_week><tr class="[##_class_##]"><s_calendar_days_item><td class="[##_class_##]">[##_day_##]</td>태그중에서 <td class="[##_class_##]">[##_day_##]</td> 태그란에 [##_class_##]를 삭제하면 당일표시의 영역이 사라지고 일별 폰트 크기와 간격이 변하게 됩니다.

그리고 [##_day_##] 스킨 치환자용 태그를 삭제하면 한 달의 날일 숫자가 모두 안보여지게 됩니다.

좌측의 스샷 이미지는 위의 달력 모듈 태그의 속성을 알아보면서 하나씩 삭제했을 때 나타난 모양입니다.

위의 년.월.일(요일) 표시와 NOTICE 사이에 공간이 형성되어있는데 이유는 달의 테이블 태그가 있기 때문에 공간이 형성되어 있는 것입니다.


만약 어떤 분은 "달력 모듈이 필요가 없고 쓸데없는 공간을 차지해서 삭제하고 싶은데 왜? 쓸데없는 설명을 하냐?"라고 하시면 할말은 없지만  굳이 이렇게까지 설명한 것은 태그의 속성을 이제는 아주 작은 것 하나만이라도 알고 넘어가야 하는 시점이라 생각했기 때문입니다.

처음에 달력 모듈이 있었던 스샷 이미지와 달리 제대로 달력 모듈이 삭제 되었는데 HTML/CSS 편집 skin.html 창에서 <!--달력 모듈-->의 태그 소스 모두를 삭제하면 깔끔하게 달력 모듈이 삭제됩니다.


아무튼 쓸데없는 설명이 긴것 같기는 하지만 항상 말씀드리는 것 중 (달력)모듈을 다시 사용할 경우 태그 소스를 메모장(문서)에 저장해 두시거나 블로그에 비공개로 글을 저장해 두시거나 스킨이 같은 공개하지 않는 블로그를 만들어 놓으셔서 필요할때 태그 소스를 복사하여 모듈을 재사용하시기 바랍니다.
writen by 7istory.tistory.com


         

관련글 더보기