7. 동적인 변화(Dynamic Style)


  지금까지 배운 내용들은 준비단계에 불과 하다. 지금까지는 거의 글자의 색상이나 Layer기능을 통한 카드방식의 내용변화가 거의 주된 내용이었다. 물론 지금까지 배운 내용만으로도 기존의 웹페이지를 보다 근사하게 구성할 수 있을지도 모른다.

  그러나, 이제부터 배울내용은 좀더 막강한 기능 예를 들면, 문서의 내용자체를 바꾼다거나, 위치를 조정하는 일을 할 것이다. 뭐 대충 이딴걸 통털어 동적변화라고 불러도 좋을 것이다. 다만, 익스플로러 4.0이상에서만 작동된다는게 아쉽지만...!

7.1 텍스트/이미지 변환

  원리는 간단하다. 특정한 ID를 가지는 HTML문장을 실제로 바꾸면 된다. 예를 들면,

  <P ID=PG> I am a BOY</P>

라는 문장의 P Tag안에 들어있는 문장을 바꾸고 싶다면, Script문내에서

  PG.innerHTML = "Changed....";

라고 바꿔주면 된다. 즉. innerHTML, outHTML, innertText, outerText라는 속성이 추가된 것이고, 이 속성을 이용해서 바꿔치기 할 수 있는 것이다.

  • innerHTML : 위의 예에서 P Tag사이에 끼인 문장 전체를 나타낸다.
  • outHTML : P Tag까지 포함한 문장 전체를 나타낸다.
<script language="JavaScript">
function chg(no){
   switch(no){
   case 1:
     p1.innerHTML = "<span style='color:blue; font-size:50pt'>....Changed....";
     break;
   case 2:
     p1.innerHTML = "<img src='../image/idea.gif'>이렇게 이미지로도 바뀐다.";
     break;
   case 3:
     p1.innerHTML = "처음 문장으로 아주 단순하게 작성되어있습니다.";
     break;
   }
}
</script>
<p id="p1">처음 문장으로 아주 단순하게 작성되어있습니다.</P>
<form>
<input type="button" value="Change Text" onclick="chg(1)">
<input type="button" value="Change Image" onclick="chg(2)">
<input type="button" value="Reset" onclick="chg(3)">
</form>

처음 문장으로 아주 단순하게 작성되어있습니다.



* 위의 예에서는 단순히 innerHTML만을 이용한 것일뿐이지만, 사용자는 사이트가 엄청난 속도를 내면서 작동한다고 믿게 될 것이다.

  위와 같이 동적으로 바뀌는게 얼마나 강력한 것인가? 사실 위와 같은 일을 하려고 했었다면, 기존에는 서버에 가서 CGI를 실행시키거나, 새로운 문서를 가져와야 했었다. 그말은, 서버와 네트웍에 부하를 준다는 말이고, 또 사용자는 일정시간을 기다려야 한다는 말이다. 그러나, 위와 같은 기능을 이용하게 되면 확실히 부하를 줄일 수는 있을 것이다.

- Last Update : 2001.7.2 by Deadfire(http://www.deadfire.net)

DHTML 강좌
DHTML이란?
CSS
     - CSS정의방법
     - 적용우선순위
     - 텍스트관련속성
     - 텍스트간의설정
     - 여백 지정하기
     - 테두리지정하기
     - 색상 지정하기
     - 기 타
CSS그룹핑
     - 스타일시트그룹
     - 클래스
     - 사용자지정스타일
JSSS
     - 새로추가된JSSS객체
     - JSSS와CSS간의비교
Layer
     - Layer Tag의사용
     - Layer 세부사항
     - Explorer용Layer
Javascript와연동
동적인 변화
     - 텍스트/이미지변환
     - 위치 이동
동적 테이블
     - 동적테이블생성
     - 동적테이블정렬
기 타
     - Font Download
     - Filter
마치며

Copyright ⓒ 1997 ~, Deadfire Program Master