페이지

jwFreeNote 사용법 2 - 템플릿의 양식 변경


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


jwFreeNote 실행 후 [노트 만들기]를 누르면 아래 그림처럼 바탕 색과 박스가 있는 페이지가 만들어진다.

[jwTemplate] 폴더의 양식을 변경해서 수정된 하얀 백지 상태로 만들었다.



[원본]이라는 폴더를 만들어, 그 곳에 [BookData]와 [jwTemplate] 폴더를 복사해서 보관한다.

[jwTemplate] 폴더에는 [기본 양식], [노트 양식], [달력 양식] 등 3가지의 HTML로 만들어진 양식이 있고,

사용자가 원하는 문서로 수정해서 사용할 수 있다.


[기본 양식]을 메모장으로 열어 보면 아래 그림과 같은 소스로 되어 있다.


위 소스에서 바탕색을 지정한 <BODY bgcolor="#f4f4ec">와 <table> 부분과 <p> </p> 부분을 지우고,

아래 그림처럼 수정해서 사용하기로 했다.


1) <BASE target=_blank>를 추가했다.
이것은 링크된 문서가 jwFreeNote의 뒤에 위치한 웹 브라우저에 열리는 것을, jwFreeNote의 앞 쪽 새 창으로 열리게 한다.

2)  <BASE href="http://">를 추가했다.
이것은 웹 페이지를 복사해서 노트에 [붙여넣기]했을 때, 일부 이미지가 보이지 않을 때, 복사한 페이지의 주소를 [http://] 부분에 [붙여넣기]하면 해결된다.

3) 위 그림의 [180%] 부분은 설명할 필요 없지만, 전체 문서의 행간을 넓히려면 숫자를 크게 하면 된다.

4) <DIV class="title"> ■ <!--title--></DIV> 이 부분을 지우면, 깨끗한 백지 상태의 문서가 만들어진다.
자동으로 제목을 만들어 주고, 수정할 수 있으므로 사용하기로 했다.

5) <DIV> </DIV>는, 엔터 키를 눌렀을 때 이 규칙에 따라 행이 바뀐다.
<p> </p>를 넣으면 이 규칙에 따라 행간이 많이 벌어진 문서가 된다.

참고로 혹시 복사한 문서에 <p> 또는 <br>이라는 태그가 들어갔을 때는,
<p> 또는 <br>의 규칙이 적용되어 동일한 행간을 유지할 수 없으므로,
[소스 보기] 모드에서 <DIV>로 모두 바꿔주면 <DIV> 규칙이 적용되는 원상태의 문서를 유지할 수 있다.

다음 jwFreeNote 사용법 3에서는 오프라인 상태로 이미지 보관하는 방법과 참고할 소스에 대해서 작성할 예정이다.

댓글 없음:

댓글 쓰기