7 lines
11 KiB
JavaScript
7 lines
11 KiB
JavaScript
const p=s=>'<p>'+s+'</p>';const ul=xs=>'<ul>'+xs.map(s=>'<li>'+s+'</li>').join('')+'</ul>';
|
|
export default {
|
|
158:({a,img})=>p('파일 노트에는 이미지와 동영상 및 PDF 같은 외부 파일을 첨부할 수 있습니다.')+'<h2>파일 올리기</h2>'+p('파일 노트는 유형을 선택해 직접 만들지 않습니다. 파일을 '+a(0,'노트 트리')+'로 끌어 놓거나 노트를 마우스 오른쪽 버튼으로 눌러 노트로 가져오기를 선택하세요.')+'<h2>지원하는 파일</h2><h3>PDF</h3>'+p(img(0,'PDF 보기'))+p('Trilium 안에서 바로 읽을 수 있습니다. 왼쪽 위 메뉴에서 페이지 미리보기와 문서에 포함된 목차를 엽니다. 위쪽에서 페이지 번호와 확대 비율을 바꾸거나 문서를 회전합니다. 추가 메뉴에서는 두 페이지 보기와 주석 표시 및 문서 속성을 사용할 수 있습니다.')+'<h3>이미지</h3>'+p(img(1,'이미지 보기'))+p('참조를 클립보드에 복사하면 '+a(1,'텍스트 노트')+'에 이미지를 넣을 수 있습니다. '+a(2,'이미지 참조')+'를 참고하세요.')+'<h3>동영상</h3>'+p(img(2,'동영상 재생'))+p('파일을 스트리밍하므로 서버에서 전체 파일을 내려받기 전에도 재생할 수 있습니다. 다만 매우 큰 파일을 보관하는 용도로 설계된 기능은 아닙니다. 동영상이 크면 '+a(3,'데이터베이스')+'와 '+a(4,'백업')+'도 커지고 처음 올릴 때 지연될 수 있습니다. 데이터베이스가 크다는 이유만으로 일반적인 사용 속도가 크게 느려지는 것은 아닙니다.')+'<h3>음성</h3>'+p(img(3,'음성 재생'))+p('지원하는 음성 파일은 기본 재생기로 열립니다. 재생과 일시 정지 버튼을 사용하고 진행 막대를 누르거나 끌어 재생 위치를 바꿉니다. 음량을 조절할 수 있으며 음량 옆 메뉴에서 재생 속도도 바꿀 수 있습니다.')+'<h3>텍스트 파일</h3>'+p(img(4,'텍스트 파일 미리보기'))+p('텍스트로 인식한 파일은 내용 일부를 보여 줍니다. 외부 라이브러리나 자동 생성 자료처럼 본문 편집보다 파일 보관과 다운로드가 필요한 경우에 유용합니다.')+p('보통 텍스트 파일을 '+a(5,'가져오면')+' '+a(6,'텍스트')+' 또는 '+a(7,'코드')+' 노트가 됩니다. 파일 노트로 보관하려면 노트로 가져오기에서 HTML·Markdown·TXT를 텍스트 노트로 가져오는 옵션과 인식한 코드 파일을 코드 노트로 가져오는 옵션을 모두 해제하세요. 미리보기 길이는 제한되므로 전체 내용은 외부 앱에서 확인합니다.')+'<h3>알 수 없는 형식</h3>'+p(img(5,'미리보기를 지원하지 않는 파일'))+p('형식을 인식하지 못하면 본문 미리보기가 나오지 않습니다. 내려받기와 외부 앱으로 열기 등 기본 기능은 사용할 수 있습니다.')+'<h2>파일 관리</h2>'+p(a(8,'상단 리본')+'의 이미지 또는 파일 탭에서 내려받기와 기본 앱으로 열기 및 새 버전 올리기를 사용할 수 있습니다. 파일 노트의 유형은 바꿀 수 없습니다. '+a(9,'첨부 파일')+'로 바꾸려면 '+a(10,'노트 메뉴')+'를 사용합니다.')+'<h2>다른 노트에 표시</h2>'+p(a(11,'노트 목록')+'에서도 파일 유형에 맞춰 표시됩니다.')+p(img(6,'노트 목록에 표시된 파일'))+p('이미지를 제외한 파일은 '+a(12,'노트 포함')+'으로 텍스트 노트에 읽기 전용 위젯으로 넣습니다. 이미지는 '+a(13,'이미지 참조')+'로 일반 이미지처럼 넣습니다.'),
|
|
159:({a,pre})=>'<h2>모바일과 데스크톱 구분</h2>'+p('<code>body.mobile</code>과 <code>body.desktop</code>으로 화면 유형을 구분합니다.')+pre(0).replace('Do something on mobile','모바일 화면에 적용할 스타일').replace('Do something on desktop','데스크톱 화면에 적용할 스타일')+p('모바일의 태블릿 배치는 미디어 쿼리로 구분합니다.')+pre(1).replace('Do something on mobile layout','모바일 배치에 적용할 스타일').replace('Do something on mobile tablet + desktop layout','태블릿과 데스크톱 배치에 적용할 스타일')+'<h2>가로 배치와 세로 배치</h2>'+p('세로 배치에서는 실행 도구 모음이 왼쪽에 있습니다. 가로 배치에서는 위쪽에 있고 탭이 전체 너비를 사용합니다. <code>body</code>의 클래스로 구분합니다.')+pre(2).replace('Do something else','가로 배치에 적용할 스타일').replace('Do something','세로 배치에 적용할 스타일')+p('<code>#horizontal-main-container</code>와 <code>#vertical-main-container</code>는 선택한 배치와 관계없이 DOM에 존재합니다. 해당 컨테이너로 본문 영역의 배경을 꾸밀 수 있습니다.')+'<h2>운영체제와 데스크톱 앱 구분</h2>'+p('Windows에는 <code>body.platform-win32</code>를 사용하고 macOS에는 <code>body.platform-darwin</code>을 사용합니다. Electron 데스크톱 앱에만 적용하려면 다음과 같이 작성합니다.')+pre(3)+'<h3>시스템 제목 표시줄</h3>'+p('시스템 제목 표시줄 사용 여부도 <code>body</code>에서 구분합니다.')+pre(4).replace('Do something else','사용자 제목 표시줄에 적용할 스타일').replace('Do something','시스템 제목 표시줄에 적용할 스타일')+'<h3>시스템 창 버튼</h3>'+p('시스템 제목 표시줄을 끈 상태에서도 운영체제의 창 버튼을 사용할 수 있습니다. 구현 과정과 화면은 '+a(0,'시스템 창 버튼 구현 기록')+'을 참고하세요.')+p('Windows에서 버튼 영역의 글자색과 배경색은 RGB 16진수 값으로 지정합니다.')+pre(5)+p('RGBA 값으로 투명도를 지정할 수도 있습니다. 이 경우 마우스를 올렸을 때의 색 표현이 제한될 수 있습니다.')+pre(6)+p('값은 창을 만들 때 읽으며 이후에는 밝은 모드와 어두운 모드 설정이 바뀔 때 갱신됩니다.')+p('macOS에서는 시스템 제목 표시줄을 끄면 신호등 모양의 창 버튼이 기본으로 나타납니다. 위치는 다음과 같이 조정합니다.')+pre(7)+'<h3>Windows의 Mica 배경 효과</h3>'+p('Windows 11에서 <code>body</code>의 <code>--background-material</code>로 배경 효과를 설정합니다.')+pre(8)+p('<code>tabbed</code>는 가로 배치에 적합하고 <code>mica</code>는 세로 배치에 적합합니다. 효과가 보이려면 상위 요소부터 하위 요소까지 배경을 투명하거나 반투명하게 해야 합니다. TriliumNext 테마를 참고하세요.')+'<h2>탭 아이콘과 작업 공간 색상</h2>'+p('작업 공간 아이콘 대신 노트 아이콘을 표시하려면 다음 변수를 설정합니다.')+pre(9)+p('탭에서 작업 공간을 확대해 보고 있을 때 해당 작업 공간의 색을 가져올 수 있습니다. 다음 예제는 탭 전체 대신 위쪽의 가는 선에 색을 적용합니다.')+pre(10)+'<h2>사용자 글꼴</h2>'+p(a(1,'사용자 리소스 제공자')+'를 사용합니다. 글꼴을 가져와 <code>#customResourceProvider=fonts/myfont.ttf</code>를 지정하고 CSS에서 <code>/custom/fonts/myfont.ttf</code>로 참조합니다. 서버가 루트 경로가 아닌 곳에서 실행된다면 <code>../../../custom/fonts/myfont.ttf</code>를 사용합니다.')+'<h2>밝은 테마와 어두운 테마</h2>'+p('밝은 테마는 다음과 같이 선언합니다. 어두운 테마는 값을 <code>dark</code>로 지정합니다.')+pre(11)+p('<code>prefers-color-scheme</code>에 따라 자동 전환하는 테마는 현재 모드의 <code>--theme-style</code>과 함께 다음 변수도 지정합니다.')+pre(12)+p('Electron 앱이 운영체제에 색상 모드를 전달할 때 사용하는 정보입니다. Windows의 배경 효과 등에도 영향을 줍니다.'),
|
|
160:({a,img})=>p(a(0,'텍스트 노트')+'에서 표 버튼을 누르고 마우스로 행과 열 수를 선택하면 표를 만들 수 있습니다.')+p(img(0,'표의 행과 열 선택'))+'<h2>서식 도구 모음</h2>'+p('표를 선택하면 전용 도구 모음이 나타납니다.')+p(img(1,'표 서식 도구 모음'))+'<h2>표 안에서 이동</h2>'+p('셀을 누르면 해당 셀을 편집합니다. 표 위아래의 '+img(2,'문단 삽입 버튼')+' 버튼으로 빈 문단을 넣습니다. 왼쪽 위의 '+img(3,'표 선택 버튼')+' 버튼으로 표 전체를 선택해 복사하거나 잘라낼 수 있습니다. 버튼을 끌어 표를 옮길 수도 있습니다.')+p('방향키로 셀 사이를 이동합니다. Tab은 다음 셀로 이동하고 Shift+Tab은 이전 셀로 이동합니다. 마지막 셀에서 Tab을 누르면 새 행이 생깁니다. Shift를 누른 채 방향키를 사용하면 여러 셀을 선택합니다.')+'<h2>셀 크기</h2>'+p('열 경계를 끌면 너비를 바꿀 수 있습니다. 행 높이는 기본적으로 마우스로 조절하지 않으며 셀 속성에서 지정합니다. '+img(4,'셀 속성 버튼')+' 버튼으로 픽셀이나 백분율 단위의 정확한 크기를 입력할 수 있습니다.')+'<h2>행과 열 추가</h2>'+p('기준 셀을 선택하고 '+img(5,'열 메뉴 버튼')+' 버튼에서 왼쪽 또는 오른쪽에 열 삽입을 선택합니다. '+img(6,'행 메뉴 버튼')+' 버튼에서는 위쪽 또는 아래쪽에 행 삽입을 선택합니다. 표 끝에서는 Tab으로도 새 행을 만듭니다.')+'<h2>셀 합치기와 나누기</h2>'+p('여러 셀을 끌어서 선택하고 '+img(7,'셀 합치기 버튼')+' 버튼을 누릅니다. 옆 화살표를 누르면 인접한 위·아래·왼쪽·오른쪽 셀과 합치거나 셀을 가로 또는 세로로 나누는 메뉴가 나옵니다.')+'<h2>표 속성</h2>'+p(img(8,'표 속성 창'))+p(img(9,'표 속성 버튼')+' 버튼으로 표 전체의 바깥 테두리 모양과 색 및 두께를 바꿉니다. 배경색과 너비 및 높이도 지정할 수 있습니다. 크기는 <code>%</code> 또는 <code>px</code> 단위를 붙여 입력합니다. 왼쪽이나 오른쪽 정렬에서는 본문이 표 옆으로 흐릅니다. 가운데 정렬에서는 본문이 표 옆에 배치되지 않습니다. 변경 사항을 유지하려면 저장을 누르세요.')+'<h2>셀 속성</h2>'+p(img(10,'셀 속성 창'))+p(img(11,'셀 속성 버튼')+' 버튼은 선택한 셀에 적용됩니다. 테두리와 배경색 및 크기를 지정하고 셀 안쪽 여백을 조절합니다. 글자의 가로 정렬은 왼쪽·가운데·오른쪽·양쪽 맞춤을 지원합니다. 세로 정렬은 위·가운데·아래를 지원합니다. 변경 사항을 유지하려면 저장을 누르세요.')+'<h2>표 설명</h2>'+p(img(12,'표 설명 버튼')+' 버튼을 누르면 표 위에 설명을 넣을 수 있습니다.')+'<h2>보이지 않는 테두리</h2>'+p('글이나 '+a(1,'이미지')+'를 여러 칸으로 배치할 때 활용할 수 있습니다. 원하는 크기의 표를 만들고 전체를 선택합니다. 표 속성과 셀 속성에서 모두 테두리를 실선으로 지정하고 색을 <code>transparent</code>로 설정한 다음 두께를 <code>1px</code>로 입력합니다.')+'<h2>Markdown으로 가져오기와 내보내기</h2>'+p('단순한 표는 <code>|</code>로 칸을 구분하는 GitHub 방식의 Markdown으로 내보냅니다. HTML 요소나 이미지 또는 별도 크기 설정이 들어간 복잡한 표는 HTML로 내보내 서식 손실을 줄입니다.')
|
|
};
|