jwFreeNote 행 높이 조절하는 방법

2020. 11. 20. 08:00 컴퓨터/유틸리티

jwFreeNote 사용 팁 - 행과 행 사이 높이 조절

jwFreeNote의 사용 팁으로 줄 간격을 조정하는 방법을 소개합니다. jwFreeNote는 HTML 파일로 노트를 만들어서 HTML 꾸미기 방법을 사용할 수 있습니다. F8키 소스 수정 모드를 이용하면 페이지 배경 색 바꾸기, 글자 크기, 행간 간격 등을 지정할 수 있습니다. HTML 코드에 대한 지식이 필요하지만, 그렇다고 공부하실 필요는 없습니다. 이미 HTML 디자인에 대한 수많은 정보가 웹에 올라와 있어서 필요한 것만 검색한다면 쉽게 수정할 수 있을 것으로 생각합니다.

이번 팁에서는 line-height 속성을 이용해서 줄 간격을 조정해 보겠습니다. HTML 디자인 속성은 .css 파일을 만들어서 지정할 수 있지만, 그렇게 되면 노트 파일은 .html과 별도로 만들어야 해서 관리가 어려울 수 있습니다. .html 파일만 수정해서 처리해 보겠습니다.

▲ jwFreeNote 기본 양식으로 노트를 만들었습니다. 행간 높이를 조절해 보겠습니다.

▲ F8키를 눌러서 소스 수정 모드로 바꾼 후에 파일 내용 중 --></style> 전에 .jwtext{ line-height:30px} 라고 입력하세요. 그리고 본문 내용에 있는 <DIV>를 <DIV class="jwtext">로 모두 수정합니다. 이름이 꼭 jwtext일 필요는 없습니다. 잘못하여 HTML 코드에 등록된 단어를 입력할 수 있으므로 접두어로 알파벳 두세 자 정도 넣어서 만드시면 됩니다.

▲ 소스 수정 모드에서 HTML 모드 또는 수정 모드로 바꾸면 이전보다 행 간 사이가 넓어졌죠? HTML 코드에는 화면을 화려하게 꾸밀 수 있는 디자인 지정하는 방법이 다양합니다. 이와 같은 같은 방법으로 행 간격 말고도 여러 가지 방법으로 노트를 화려하게 꾸밀 수 있습니다. 글꼴을 전체적으로 한 번에 바꾸거나 모든 이미지에 테두리를 두를 수 있습니다.

 

캐럿이 있는 행을 수정하면 계속 적용

▲ 그렇다면 노트에 새 문장을 입력할 때마다 소스 수정 모드로 들어가서 <DIV>를 수정해야 할까요? 아닙니다. 한 번 수정하면 이후로 모든 행 높이가 넓은 간격으로 글이 입력됩니다. 더 정확히는 설명드리면 캐럿이 있는 위치의 <DIV class="jwtext">가 엔터키를 누를 때마다 적용됩니다.

▲ 스타일이 지정된 모든 문장은 스타일이 변경되면 수정된 대로 반영됩니다. 소스 수정 모드로 돌아가서 행 높이 숫자를 30px를 50px로 바꾸어 보겠습니다.

▲ 문장 하나가 아니라 jwtext로 지정된 모든 문장의 행 간격이 더욱 넓어졌습니다.

▲ 노트를 만들 때마다 행 간격 지정이 귀찮다면 양식 파일을 수정하세요. 또는 양식 파일을 새로 작성해서 추가해도 좋습니다. 양식 파일은 jwFreeNote가 설치된 곳에서 jwTemplate 폴더에 있습니다. 기존 파일을 적당한 이름으로 복사하고 필요한 부분을 수정합니다. 이후로 새 노트를 생성할 때마다 새로 만든 양식 파일을 선택할 수 있습니다.

이 댓글을 비밀 댓글로

티스토리 로그인이 풀리면 여기를 클릭하세요.

  1. 잘보고갑니다 좋은하루되세요 🤩
  2. 잘 사용을 하고 있는데~~^^ 해봐야겠네요~ 잘보고 갑니다~ 즐거운 불금 되세요~
  3. 잘 보고 갑니다 휴일 즐겁게 보내세요
  4. 포스팅 잘보고갑니다
    편안한 주말 보내세요
    코로나19가 심해지네요 건강관리 잘하세요
    • 코로나가 빨리 종식되어서 마음 편히 여행할 수 있으면 좋겠습니다.
      편안한 주말 되세요. ^^
    • Favicon of https://damduck01.com BlogIcon 담덕01
    • 2020.11.21 16:45
    관리자의 승인을 기다리고 있는 댓글입니다
error: Content is protected !!