WebProgramming/HTML

HTML 펼침목록 태그

유기농코더 2011. 12. 1. 21:24
다른 태그들도 전부 확인해 보지는 않았지만 보이고 안보이는 것과 관련되는 것은 div 태그로 묶어야 하는 듯 합니다.ㅠ
   
제가 할 내용은 아래와 같습니다.
  1. "펼치고/닫을" 본문이 있다.
  2. "펼치고/닫을" 버튼이 있다.
   
블로그에 후딱 후딱 쓸 내용인데 버튼까지는 단순히 텍스트 클릭으로 만들거에요. 그럼 필요한 div 원소는 3개가 필요하겠죠?
  1. 펼치는 거
  2. 닫는 거
  3. 본문
   
초기에 본문을 보이게 할 것인지, 안보이게 할 것인지는 직접 정할 문제지만 일단은 그거에 맞게 다른 버튼들도 보이고 안보여야 겠죠? 그건 아래와 같습니다.
  1. 본문이 보인다 == (이미 본문이 펼쳐졌으므로)펼치는 버튼은 안보인다 / 닫는 버튼이 보인다.
  2. 본문이 안 안보인다 == 펼치는 버튼이 보인다 / (본문이 이미 닫혀있으므로) 닫는 버튼은 안보인다.
       
일단, 저는 처음에 자질구래한건 사용자가 직접 볼지 말지를 정하게 하려고 합니다. 그럼 위에서 두 번째 내용이 되겠죠? 보인다, 안 보인다를 결정하는 것은 <div> 태그의 속성 중, style="display:xxxx" 로 조절 할 수 있습니다. xxxx에 들어갈 내용은 block 과 none 입니다.
  • block을 하게 되면 보이는 거고,
  • none을 하게 되면 안 보이는 거에요
   
div 에게 유니크한 이름을 붙여줘야 누구를 지지고 볶을지 알 수 있겠죠? 그래서 각각에 id를 붙여 줍니다.
   
<div id="open_ctrl"><a href="#none">여는 버튼</a></div>
<div id="close_ctrl"><a href="#none">닫는 버튼</a></div>
<div id="body_text">
	본문이 여기 쓰이겠죠.. 이 안에 또 다른 태그나 뭐 다 들어가도 되요
</div>

   
처음에 '보여 질 것'들은 아무것도 안해도 됩니다. 하지만, 안보여질 것들은 초기에 display 세팅을 해줘야 합니다. 
<div id="open_ctrl"><a href="#none">여는 버튼</a></div>
<div id="close_ctrl" style="display:none"><a href="#none">닫는 버튼</a></div>
<div id="body_text" style="display:none">
	본문이 여기 쓰이겠죠.. 이 안에 또 다른 태그나 뭐 다 들어가도 되요
</div>

   
이제 버튼이 눌렸을 때 반응을 해야 하겠죠? 그건 자바스크립트를 html 태그 내부에 삽입해서 이뤄집니다. 우리가 클릭 할 수 있는 버튼 대상은 <a> 태그죠? 여기에 아래와 같은 속성을 추가 합니다. 
document.getElementById('반응해야 할 id').style.display='행동';

   
저 세미콜론(;) 뒤에 여러 개를 동시에 붙일 수 있습니다.
여는 버튼만 완성하면, 열기 버튼이 "클릭" 됐을 때 = 여는 버튼은 감추고, 닫는 버튼은 보이고, 본문은 보인다.
이니까, 각각의 id를 넣어서 세미콜론뒤에 연이어 붙여주는데 바로 onClick 했을 때! 해준다- 입니다. 그 코드는 아래와 같습니다. 
<div id="open_ctrl">
	<a href="#none" 
	onClick="document.getElementById('open_ctrl').style.display='none';
	document.getElementById('close_ctrl').style.display='block';
	document.getElementById('body_text').style.display='block'">
	여는 버튼
	</a>
</div>

   
그럼, 닫기 버튼이 "클릭" 됐을 때 = 여는 버튼은 보이고, 닫는 버튼은 감추고, 본문도 감춘다. 이죠? 코드를 완성하면 아래와 같습니다. 
<div id="close_ctrl" style="display:none">
	<a href="#none"
	onClick="document.getElementById('open_ctrl').style.display='block';
	document.getElementById('close_ctrl').style.display='none';
	document.getElementById('body_text').style.display='none'">
	닫는 버튼
	</a>
</div>