<!--
이건 알고 가자!
※ 본 내용은 주석처리 되어있기 때문에 복붙 사용하실때 놔두셔도, 삭제하셔도 무방합니다.
● 태그네임 부분은 같은 색이 칠해진 부분을 통일시켜야 합니다.
● display: 부분이 block 인 경우가 표시, none 인 경우가 비표시 입니다. (핵심)
● 구역 설정 태그의 위치에 접힌 인장이 펼쳐지는 위치가 달라집니다.
(테이블 태그를 사용할 경우에는 한 군데로 몰아둡니다. 관리도 더 편해요.)
● 구역 설정 태그 부분에서 처음부터 보이도록 하고 싶은 구역은 display를 block으로 바꿔주시면
처음부터 보여집니다.
● width: 와 height: 부분의 값을 퍼센트값 또는 픽셀값으로 변경하시면 해당 픽셀만큼 표시할 수 있습니다.
● document.getElementById('태그네임2').style.display=='block)?'none':'none'; 의 해석
: 태그네임2의 디스플레이 상태가 표시라면, 비표시해주세요. 그렇지 않아도 비표시 해주세요.
● document.getElementById('태그네임1').style.display=='none')?'block':'none'; 의 해석
: 태그네임1의 디스플레이 상태가 비표시라면, 표시해주세요. 그렇지 않다면 비표시로 두세요.
● 테이블 태그를 이용하여 구역 링크 태그를 깔끔하게 정리하실 수 있답니다. (제 인장이 사용중)
테이블 태그로 정리된 접기 태그를 사용하고 싶으시다면 아래의 붉은 박스를 복붙하여 사용하세요.
-->
<!----------- 구역 링크 태그 입니다. ----------->
<div style="margin: 0px auto; width: 100%; height: 24px; cursor: pointer;" onclick="
document.getElementById('태그네임1').style.display=(document.getElementById('태그네임1')
.style.display=='none')?'block':'none'; <!-- 태그네임1이 비표시면 표시해주세요 -->
document.getElementById('태그네임2').style.display=(document.getElementById('태그네임2')
.style.display=='block')?'none':'none'; <!-- 태그네임2가 표시중이라면 안보이게 해주세요 -->
document.getElementById('태그네임3').style.display=(document.getElementById('태그네임3')
.style.display=='block')?'none':'none'; <!-- 태그네임3이 표시중이라면 안보이게 해주세요 -->
document.getElementById('태그네임4').style.display=(document.getElementById('태그네임4')
.style.display=='block')?'none':'none';"> <!-- 태그네임4가 표시중이라면 안보이게 해주세요 -->
첫 번째 구역만 표시하고, 나머지는 비표시합니다.
</div>
<!----------- 구역 본문 태그 입니다. ----------->
<div id="태그네임1" style="width: 100%; display: none;">
첫 번째 구역의 내용을 이곳에 입력하시면 됩니다.
</div>
<!----------- 구역 링크 태그 입니다. ----------->
<div style="margin: 0px auto; width: 100%; height: 24px; cursor: pointer;" onclick="
document.getElementById('태그네임1').style.display=(document.getElementById('태그네임1')
.style.display=='block')?'none':'none';
document.getElementById('태그네임2').style.display=(document.getElementById('태그네임2')
.style.display=='none')?'block':'none';
document.getElementById('태그네임3').style.display=(document.getElementById('태그네임3')
.style.display=='block')?'none':'none';
document.getElementById('태그네임4').style.display=(document.getElementById('태그네임4')
.style.display=='block')?'none':'none';">
두 번째 구역만 표시하고, 나머지는 비표시합니다.
</div>
<!----------- 구역 본문 태그 입니다. ----------->
<div id="태그네임2" style="width: 100%; display: none;">
두 번째 구역의 내용을 이곳에 입력하시면 됩니다.
</div>
<!----------- 구역 링크 태그 입니다. ----------->
<div style="margin: 0px auto; width: 100%; height: 24px; cursor: pointer;" onclick="
document.getElementById('태그네임1').style.display=(document.getElementById('태그네임1')
.style.display=='block')?'none':'none';
document.getElementById('태그네임2').style.display=(document.getElementById('태그네임2')
.style.display=='block')?'none':'none';
document.getElementById('태그네임3').style.display=(document.getElementById('태그네임3')
.style.display=='none')?'block':'none';
document.getElementById('태그네임4').style.display=(document.getElementById('태그네임4')
.style.display=='block')?'none':'none';">
세 번째 구역만 표시하고, 나머지는 비표시합니다.
</div>
<!----------- 구역 본문 태그 입니다. ----------->
<div id="태그네임3" style="width: 100%; display: none;">
세 번째 구역의 내용을 이곳에 입력하시면 됩니다.
</div>
<!----------- 구역 링크 태그 입니다. ----------->
<div style="margin: 0px auto; width: 100%; height: 24px; cursor: pointer;" onclick="
document.getElementById('태그네임1').style.display=(document.getElementById('태그네임1')
.style.display=='block')?'none':'none';
document.getElementById('태그네임2').style.display=(document.getElementById('태그네임2')
.style.display=='block')?'none':'none';
document.getElementById('태그네임3').style.display=(document.getElementById('태그네임3')
.style.display=='block')?'none':'none';
document.getElementById('태그네임4').style.display=(document.getElementById('태그네임4')
.style.display=='none')?'block':'none';">
네 번째 구역만 표시하고, 나머지는 비표시합니다.
</div>
<!----------- 구역 본문 태그 입니다. ----------->
<div id="태그네임4" style="width: 100%; display: none;">
네 번째 구역의 내용을 이곳에 입력하시면 됩니다.
</div>
타유양
아인라허를 올바르게 즐기기 위한 지침서
