jwFreeNote 사용법 3 - 이미지 저장하기와 참고할 소스

jwFreeNote ( http://jwfreenote.tistory.com/ ) 사용법 3


아래 그림은 jwFreeNote에 내 블로그의 상단 부분을 드래그해서 [붙여넣기]한 것이다.

구 버전에서는 이미지까지 컴퓨터로 저장이 되었으나, 최근의 버전에서는 이미지는 웹사이트의 것을 보여주기만 한다.

오프라인일 경우 jwFreeNote를 실행하면, 두 번째 이미지처럼 이미지가 [X]자로 나오거나 인터넷 연결을 시도한다.

다 아는 것이지만, 위와 같은 문서를 인터넷 연결이 끊긴 상태에서도 볼 수 있게 이미지까지 보관하려면

웹브라우저로 열어서 파일 형식을 [모든 웹 페이지]로 선택한 후 [BookData] 폴더에 저장하면 된다.

아래 그림은 컴퓨터의 프로그램을 관리하기 위해 만든 페이지이다.

각 제목을 누르면 펼쳐지고 접히는 소스를 사용했으며, 많은 내용을 한 페이지에 작성할 수 있다.

이 블로그 또는 태터툴즈 기능에 있는 펼치두기, 접어두기 스크립트라고 한다.

jwFreeNote에 맞게 사용할 수 있도록 몇 줄 수정했는데, 아래 소스를 복사해서 [소스 보기] 모드에서 붙이면 된다.

다음 jwFreeNote 사용법 4에서는 레이어와 표 작성 프로그램에 대해서 작성할 예정이다.

<SCRIPT language=JavaScript type=text/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> <STYLE> .more {border:1px dotted #F9F9F9;margin:5px;background:#F9F9F9;} .more p {margin:5px;} </STYLE> <DIV> <HR SIZE=1> </DIV> <DIV style="DISPLAY: block" id=more05a><A onclick="layer_toggle(document.getElementById('more05a')); layer_toggle(document.getElementById('more05b'));return false;" href="#"> <DIV>열기..</DIV></A></DIV> <DIV style="DISPLAY: none" id=more05b><A onclick="layer_toggle(document.getElementById('more05a')); layer_toggle(document.getElementById('more05b'));return false;" href="#"> <DIV>닫기..</DIV></A> <DIV class=more> <DIV>내용</DIV> <DIV> </DIV></DIV></DIV> <DIV> <HR SIZE=1> </DIV> <DIV style="DISPLAY: block" id=more04a><A onclick="layer_toggle(document.getElementById('more04a')); layer_toggle(document.getElementById('more04b'));return false;" href="#"> <DIV>열기..</DIV></A></DIV> <DIV style="DISPLAY: none" id=more04b><A onclick="layer_toggle(document.getElementById('more04a')); layer_toggle(document.getElementById('more04b'));return false;" href="#"> <DIV>닫기..</DIV></A> <DIV class=more> <DIV>내용</DIV> <DIV> </DIV></DIV></DIV> <DIV> <HR SIZE=1> </DIV> <DIV style="DISPLAY: block" id=more03a><A onclick="layer_toggle(document.getElementById('more03a')); layer_toggle(document.getElementById('more03b'));return false;" href="#"> <DIV>열기..</DIV></A></DIV> <DIV style="DISPLAY: none" id=more03b><A onclick="layer_toggle(document.getElementById('more03a')); layer_toggle(document.getElementById('more03b'));return false;" href="#"> <DIV>닫기..</DIV></A> <DIV class=more> <DIV>내용</DIV> <DIV> </DIV></DIV></DIV> <DIV> <HR SIZE=1> </DIV> <DIV style="DISPLAY: block" id=more01a><A onclick="layer_toggle(document.getElementById('more01a')); layer_toggle(document.getElementById('more01b'));return false;" href="#"> <DIV>열기..</DIV></A></DIV> <DIV style="DISPLAY: none" id=more01b><A onclick="layer_toggle(document.getElementById('more01a')); layer_toggle(document.getElementById('more01b'));return false;" href="#"> <DIV>닫기..</DIV></A> <DIV class=more> <DIV>내용</DIV> <DIV> </DIV></DIV></DIV> <DIV> <HR SIZE=1> </DIV> <DIV style="DISPLAY: block" id=more02a><A onclick="layer_toggle(document.getElementById('more02a')); layer_toggle(document.getElementById('more02b'));return false;" href="#"> <DIV>열기..</DIV></A></DIV> <DIV style="DISPLAY: none" id=more02b><A onclick="layer_toggle(document.getElementById('more02a')); layer_toggle(document.getElementById('more02b'));return false;" href="#"> <DIV>닫기..</DIV></A> <DIV class=more> <DIV>내용</DIV> <DIV> </DIV></DIV></DIV> <DIV> <HR SIZE=1> </DIV>