평소 웹 서핑을 하다 보면 버튼을 눌렀을 때 글 내용이 펼쳐지며 보이는 것을 본 적이 있을 것이다.
일단 다음 예제를 보자.
글 내용 펼치기 글 내용 접기
글 내용을 펼쳐야 이 부분이 보이게 됩니다.
위와 같은 효과를 주기 위해서는 Span태그의 스타일인 Display를 조절하면 된다. 위 예제의 소스코드는 다음과 같다.
원리는 간단하다. '글 내용 펼치기' 링크와 실제 보여줄 내용을 각각 다른 span 안에 넣어둔 후 두 레이어가 서로 번갈아가며 보이면 되는 것이다. 이를 자바스크립트를 이용하여 구현하기 위해서는 getElementById라는 함수를 쓰게 되는데, 이는 span 태그에서 설정한 id를 이용하여 해당 객체를 얻어내는 기능을 한다. 객체를 얻어 낸 후에는 스타일의 디스플레이 속성을 조절하게 된다. 디스플레이 속성에 아무 값도 주지 않았을 경우에는 레이어가 보이며, none 속성을 주면 레이어가 보이지 않게 된다.
일단 다음 예제를 보자.
글 내용 펼치기 글 내용 접기
글 내용을 펼쳐야 이 부분이 보이게 됩니다.
위와 같은 효과를 주기 위해서는 Span태그의 스타일인 Display를 조절하면 된다. 위 예제의 소스코드는 다음과 같다.
원리는 간단하다. '글 내용 펼치기' 링크와 실제 보여줄 내용을 각각 다른 span 안에 넣어둔 후 두 레이어가 서로 번갈아가며 보이면 되는 것이다. 이를 자바스크립트를 이용하여 구현하기 위해서는 getElementById라는 함수를 쓰게 되는데, 이는 span 태그에서 설정한 id를 이용하여 해당 객체를 얻어내는 기능을 한다. 객체를 얻어 낸 후에는 스타일의 디스플레이 속성을 조절하게 된다. 디스플레이 속성에 아무 값도 주지 않았을 경우에는 레이어가 보이며, none 속성을 주면 레이어가 보이지 않게 된다.
2008년 1월 19일 이후 작성된 모든 글에 대해서 퍼가는 것을 금지합니다.
퍼가고자 하시는 분은 링크를 달아 주시기 바랍니다.
퍼가고자 하시는 분은 링크를 달아 주시기 바랍니다.
댓글을 달아 주세요
그런데 센스없는 사람은 저걸 달고선 맨 밑에는 안 달아서;;
특히 긴 글일 땐 밑에도 접는게 있었으면 좋겠다는 생각이....ㅎ
흠.. 듣고보니 그렇군요. 지금까지 그런 생각은 못 해봤습니다만,, 저도 센스가 없는 건가요..
에.. 그런 뜻은 아니구..
긴글말예요.
다만 앞으로 접고펴기 추가 좀 해주셨으면 합니다만..
허나 보시다시피 소스가 상당히 귀찮기 때문에,,
나중에 플러그인으로 만들 수 있으면 만들어볼까 생각중입니다만,
역시 통이 크시군요.
그 통만큼 아이스크림좀..