1

주제: 알지도 못하면서 스킨에 손을 대다!

알지도 못하면서 스킨을 손을! 댔습니다.
오늘 하루 종일 머리가 쪼개지는 것 같았습니다.
하루 하고 머리가 쪼개질 것 같은데, 멋진 스킨 맹그러내시는 분들은 존경 스럽습니다.

처음부터 작성을 해볼까 했는데, 어디서부터 손을 대야 될지 몰라서 (첨부터 할려니 손대기도 힘듭니다. ㅜ.ㅜ)
만들어진 완성작을 손대보았습니다.

이래저래 손을 대보았는데, 모든 건 단순하면서 깔끔해야 된다는 제 지론과는 상관없이 복잡해지고 마구 지저분해졌습니다.
뭐 어떻게 해야 단순해지고 깔끔한 건지도 잘 모르겠더군요....;;;;

보통, 교과서라고 할 수 있는 태터 기본 스킨에 없는 기능이 있어서;;;
그건 도저히 어떻게 해야 될지도 모르겠더군요..

왜 사이드바에 각 항목을 온클릭으로 펼쳐졌다 접혔다 하는 건.. 태터 기본 스킨에 없는걸까요?;;;;;;

대충 손을 대서 수정은 해봤지만, 상당히 지저븐해지고 스크립트 에러도 마구마구 생기고;;;
그렇지만, 나름대로 스킨 매뉴얼을 봤지만.. 뭐가 틀린건지 확인이 안되더군요....

정말 어렵습니다;;;;;


도와주실 분! big_smile

2

답글: 알지도 못하면서 스킨에 손을 대다!

사이드바에서 펼쳐졌다 접혔다 하는 건 기본 스킨에는 없는 기능이 맞습니다.
사이드바의 항목들은 관리자 화면에서 스킨 -> 사이드바 메뉴에서 넣었다 뺐다 할 수 있도록 되어 있고, 펼쳤다 접었다 하는 것은 해당 스킨에서 구현한 별도 기능입니다. (아마도 javascript를 사용하였겠지요.)

문제의 답은 우리 안에 있다.
내면에 귀를 기울여 보자.

3

답글: 알지도 못하면서 스킨에 손을 대다!

왜냐면... 사이드바에서 빼버리자니 뭔가 허전하고 그렇다고 확~ 펼쳐놓자니, 사이드바가 너무 길어지는 것 같아서
적당히 펼쳐놓을 만한 건 펼쳐놓고 아닌 건, 접어놓으면 좋지 않을까 싶어서;;;; 접어볼라는데, (허리를 확 접어버리듯;;;)
교과서인 태터 기본 스킨에 그 기능이 없더군요.............. --;;; 알아볼 때가 있어야죠;;;;

나름 다른 스킨에서 구현된 걸 컨닝 해봤지만, 에러만 뿜어내더라고요 ;;;;;;

4

답글: 알지도 못하면서 스킨에 손을 대다!

저도 태터툴즈 0.9 용 스킨을 1.0 으로 컨버전 하면서 그 부분 때문에 골머리를 썩혔던 기억이 납니다.

<SCRIPT LANGUAGE="JavaScript">
<!--
function layer_toggle(obj) {
        if (obj.style.display == 'none') obj.style.display = 'block';
        else if (obj.style.display == 'block') obj.style.display = 'none';
}
//-->
</SCRIPT>

추가해주니 간단히 해결되는 문제더군요 허허;

5

답글: 알지도 못하면서 스킨에 손을 대다!

lunamoth님 감사합니다. ^^ 일단, 기억해놨다가 필요할 때 써먹어야죠!

태터 스킨을 만들 때.......... 역시나 교과서적으로 참고해야 될 스킨은..... 태터 기본 스킨인가요?
아니면, 뭐 교과서적으로 참고할 만한 스킨이 있을까요? smile

6

답글: 알지도 못하면서 스킨에 손을 대다!

제 스킨에 ep04대 이후의 스킨들은 모두 쿠키로 기억되는 show/hide 레이어를 이용하여 열고닫기를 기억하도록 되어있다죠.
음.. 미공개된 ep13에서 ep18까지의 최근 스킨을 보면 되겠지만, 컨테스트에 공개된 ep15의 NF.js를 참고하셔도 될듯합니다. 그 전의 ep12이전건 좀 코드가 조잡하여 참조하지 않으시길..
다 좋은데 이 js 의 최단점이 onload 구문이라.. 페이지 로딩이 느린 제 호스팅같은경우 열고 닫기가 상당히 지연된다는 거~
지금 제 블로그의 ep13을 참고하셔도 될듯하네요.

LonnieNa (2007-01-02 23:59:57)에 의해 마지막으로 수정

텍스트큐브를 이용하시다 불편하신 점 있으시면 아래로 연락주세요.
Needlworks/TNF - LonnieNa
nateon : y12x2 (a.t) nate.com / mail : lonniena (a.t) needlworks.org
http://twitter.com/@textcube

7

답글: 알지도 못하면서 스킨에 손을 대다!

최근 정보를 참조하시려면 태터 기본스킨이 교과서입니다. 최근 반영된 것들이 그대로 표출되거든요.
그리고, 기타 다른 스킨을 참조하시면, 토글기능이나 기타 기능을 구현하시는데 도움이 되실듯 합니다.

당신의 삶속에 매화꽃 향기처럼 늘 아름다운 향기로 가득하길...
# J.Parker

8

답글: 알지도 못하면서 스킨에 손을 대다!

도움 말씀이 정말 많네요.. 모두 감사드리고요~

저 스크립트 코드를... 보통 head 안에 넣던데.... 그건 알겠던데...
그 다음 토글 할려는 곳은 어떻게 해야 되는지 예문 하나만 날려주세요~

9

답글: 알지도 못하면서 스킨에 손을 대다!

티즈 작성:
lunamoth 작성:

저도 태터툴즈 0.9 용 스킨을 1.0 으로 컨버전 하면서 그 부분 때문에 골머리를 썩혔던 기억이 납니다.

<SCRIPT LANGUAGE="JavaScript">
<!--
function layer_toggle(obj) {
        if (obj.style.display == 'none') obj.style.display = 'block';
        else if (obj.style.display == 'block') obj.style.display = 'none';
}
//-->
</SCRIPT>

추가해주니 간단히 해결되는 문제더군요 허허;

XHTML 표준과 DOM에 맞추려면 다음이 더 올바른 표현볍이지요 smile

<script type="text/javascript">
//<[CDATA[
function layer_toggle(id) {
    obj = document.getElementById(id);
    if (obj.style.display == 'none') {
        obj.style.display = 'block';
    } elseif (obj.style.display == 'block') {
        obj.style.display = 'none';
    }
}
//]]>

저렇게 한 뒤 <div id="abcd">aa</div>를 toggle하려면 onclick 이벤트 등에 layer_toggle("abcd")를 넣어주면 될겁니다 smile
lunamoth님처럼 getElementById를 사용하지 않으면 파폭에서 문제가 생기는 것으로 알고 있습니다. (정확한 표현법도 아니구요)

lunamoth님께서 사용하시는 방법은 아마도 <div id="abcd" onclick="layer_toggle(this)">aa</div> 와 같은 식으로 사용되었을거라 생각됩니다. smile

그리고 여담이지만 위와 같은 if문은 별로 좋은 방법이 아닙니다. 브라우저에 따라(혹은 css의 적용 방법에 따라) display의 값이 ''(공백)이 default로 설정되는 경우가 생길 수 있으므로 아래와 같은 방법이 더 좋을거라 생각됩니다.

<script type="text/javascript">
//<[CDATA[
function layer_toggle(id) {
    var obj = document.getElementById(id);
    if (obj.style.display == 'none') {
        obj.style.display = 'block';
    } else {
        obj.style.display = 'none';
    }
}
//]]>

10

답글: 알지도 못하면서 스킨에 손을 대다!

많은 글이 올라왔는데, 도통 뭔 소린지;;;; ㅜ.ㅜ

11

답글: 알지도 못하면서 스킨에 손을 대다!

<script type="text/javascript">
//<[CDATA[
function layer_toggle(id) {
    var obj = document.getElementById(id);
    if (obj.style.display == 'none') {
        obj.style.display = 'block';
    } else {
        obj.style.display = 'none';
    }
}
//]]>
</script>

1. 위 스크립트를 사용하는 스킨 skin.html 파일의 <head></head> 사이에 넣고
2. 사이드바에 각 설정을 합니다.

<s_sidebar_element>
<!-- recent comment -->
<div class="listbox">
  <h3 onclick="layer_toggle('t_recentComments);">최근에 써주신 고마운 댓글</h3>
  <ul id="t_recentComments" style="display:none;">
        ....생략...
  </ul>
</div>
</s_sidebar_element>

<s_sidebar_element>

<!-- recent trackback -->
<div class="listbox">
  <h3 onclick="layer_toggle('t_recentTrackback);">최근에 받은 소중한 걸린글</h3>
  <ul id="t_recentTrackback" style="display:none;">
        ....생략...
  </ul>
</div>
</s_sidebar_element>

위와 같은 형식으로 설정해주시면 됩니다.

당신의 삶속에 매화꽃 향기처럼 늘 아름다운 향기로 가득하길...
# J.Parker

12

답글: 알지도 못하면서 스킨에 손을 대다!

J. Parker 작성:
<script type="text/javascript">
//<[CDATA[
function layer_toggle(id) {
    var obj = document.getElementById(id);
    if (obj.style.display == 'none') {
        obj.style.display = 'block';
    } else {
        obj.style.display = 'none';
    }
}
//]]>

1. 위 스크립트를 사용하는 스킨 skin.html 파일의 <head></head> 사이에 넣고
2. 사이드바에 각 설정을 합니다.

<s_sidebar_element>
<!-- recent comment -->
<div class="listbox">
  <h3 onclick="layer_toggle('t_recentComments);">최근에 써주신 고마운 댓글</h3>
  <ul id="t_recentComments" style="display:none;">
        ....생략...
  </ul>
</div>
</s_sidebar_element>

<s_sidebar_element>

<!-- recent trackback -->
<div class="listbox">
  <h3 onclick="layer_toggle('t_recentTrackback);">최근에 받은 소중한 걸린글</h3>
  <ul id="t_recentTrackback" style="display:none;">
        ....생략...
  </ul>
</div>
</s_sidebar_element>

위와 같은 형식으로 설정해주시면 됩니다.

위의 방법대로 해봤는데요. 안되는군요.
위의 방법대로 아래 처럼 해봤습니다.

<s_sidebar_element>
     <!-- recent comment -->
        <div class="listbox">
          <h3 onclick="layer_toggle('t_recentComments);">최근에 써주신 고마운 댓글</h3>
          <ul id="t_recentComments" style="display:none;">
            <s_rctrp_rep>
            <li> <a href="[##_rctrp_rep_link_##]">[##_rctrp_rep_desc_##].</a><br />
                <span class="name">[##_rctrp_rep_name_##]</span> <span class="date">[##_rctrp_rep_time_##]</span> </li>
            </s_rctrp_rep>
          </ul>
     </div>
</s_sidebar_element>

이거 말고 다른 방법도 해봤지만.......... 안되더군요 ㅜ.ㅜ

종결되지 않은 문자열 상수 라는 메세지가!

유마 (2007-01-04 00:59:37)에 의해 마지막으로 수정

13

답글: 알지도 못하면서 스킨에 손을 대다!

<script type="text/javascript">
//<[CDATA[
function layer_toggle(id) {
    var obj = document.getElementById(id);
    if (obj.style.display == 'none') {
        obj.style.display = 'block';
    } else {
        obj.style.display = 'none';
    }
}
//]]>
</script>  <- 요것 잊으신건 아니신지요?

당신의 삶속에 매화꽃 향기처럼 늘 아름다운 향기로 가득하길...
# J.Parker

14

답글: 알지도 못하면서 스킨에 손을 대다!

J. Parker 작성:

<script type="text/javascript">
//<[CDATA[
function layer_toggle(id) {
    var obj = document.getElementById(id);
    if (obj.style.display == 'none') {
        obj.style.display = 'block';
    } else {
        obj.style.display = 'none';
    }
}
//]]>
</script>  <- 요것 잊으신건 아니신지요?

위에 티즈님이 말씀하셔서 꼭! 넣었습니다!

15

답글: 알지도 못하면서 스킨에 손을 대다!

<s_sidebar_element>
     <!-- recent comment -->
        <div class="listbox">
          <h3 onclick="layer_toggle('t_recentComments);">최근에 써주신 고마운 댓글</h3>
          <ul id="t_recentComments" style="display:none;">
            <s_rctrp_rep>
            <li> <a href="[##_rctrp_rep_link_##]">[##_rctrp_rep_desc_##].</a><br />
                <span class="name">[##_rctrp_rep_name_##]</span> <span class="date">[##_rctrp_rep_time_##]</span> </li>
            </s_rctrp_rep>
          </ul>
     </div>
</s_sidebar_element>

위 코드중 layer_toggle('t_recentComments); -> layer_toggle('t_recentComments');
빠져서인듯...

당신의 삶속에 매화꽃 향기처럼 늘 아름다운 향기로 가득하길...
# J.Parker

16

답글: 알지도 못하면서 스킨에 손을 대다!

J. Parker 작성:

<s_sidebar_element>
     <!-- recent comment -->
        <div class="listbox">
          <h3 onclick="layer_toggle('t_recentComments);">최근에 써주신 고마운 댓글</h3>
          <ul id="t_recentComments" style="display:none;">
            <s_rctrp_rep>
            <li> <a href="[##_rctrp_rep_link_##]">[##_rctrp_rep_desc_##].</a><br />
                <span class="name">[##_rctrp_rep_name_##]</span> <span class="date">[##_rctrp_rep_time_##]</span> </li>
            </s_rctrp_rep>
          </ul>
     </div>
</s_sidebar_element>

위 코드중 layer_toggle('t_recentComments); -> layer_toggle('t_recentComments');
빠져서인듯...

하하. 감사합니다. lol
모두 완료 되었습니다!