프로젝트/전산물리학 웹교재[전산물리 웹교재] 웹사이트를 책으로 만들기: 목차만들기
앞서 [전산물리 웹교재] 웹사이트를 책으로 만들기: 페이지 자르기에서 책의 페이지를 만들었습니다. 이제 각 장과 절이 들어있는 페이지를 표시하는 차례를 만들어서 차례 페이지에 배차하는 작업을 합니다. 페이지 구조 템플릿으로 생성하는 페이지는 아래의 구조를 가지고 있습니다. ... ... 제목 페이지(.title), 인트로 페이지(.home), 차례 페이지(.toc)가 차례대로 나오고 한 장의 전체 내용은 .warpper.chapter로 묶여있습니다. 차례 페이지 .page.toc의 UL#textbook-toc은 목차를 담는 컨테이너 역할을 합니다. 이후 스크립트를 이용해 내용을 채웁니다. .warpper.chapter 내부의 첫 페이지 .page.chapter는 장의 이름이 있는 페이지입니다. 이후 페이..
프로젝트/전산물리학 웹교재[전산물리 웹교재] 웹사이트를 책으로 만들기: 페이지 자르기
지킬(Jekyl)로 만든 깃허브 페이지(Github Pages)를 종이에 출력 가능한 책의 형태로 만듭니다. 여기서는 출판을 위한 새로운 지킬 레이아웃을 생성하고 프린트 환경을 위한 스타일시트를 작성하고 타입스크립트(자바스크립트)를 사용해 문서 내용을 페이지에 맞게 자르는 방법을 소개합니다. 인쇄는 크롬의 인쇄 기능(Ctrl+P)으로 테스트 하였습니다. 결과물: https://cnu-computer-physics.github.io/docs/textbook/ 레이아웃 생성 HTML5 템플릿 자동 생성 도구를 사용하거나 하면 이런 태그가 있는 경우가 많습니다. 이 태그를 제외해야 브라우저의 너비에 따라 자동으로 글자 크기 등을 조절하지 않습니다. 동일한 출력 결과를 원한다면 이 태그를 제거해야 합니다. {%..
프로젝트/전산물리학 웹교재[전산물리 웹교재] 리퀴드로 문서 목차 구현
리퀴드(Liquid) 언어는 깃허브 페이지의 사이트 생성기인 지킬(Jekyll)의 템플릿 생성 언어입니다. 여기서는 YAML형식의 문서 구조로부터 전체 문서 목차를 생성하는 리퀴드 템플릿을 구현합니다. 프로젝트 웹교재: https://cnu-computer-physics.github.io/docs/ 프로젝트 조직: https://github.com/CNU-Computer-Physics 리퀴드 문서: https://shopify.github.io/liquid/ 지킬 리퀴드 필터: https://jekyllrb.com/docs/liquid/filters/ _config.yml ...이런저런 설정... docsurl: "docs/" ...저런이런 설정... permalink: pretty ...이런그런 설정...
프로젝트/전산물리학 웹교재[전산물리 웹교재] 지킬 개발환경 구성하기
지킬(Jekyll)은 정적 웹사이트를 위한 웹페이지 생성 프레입워크입니다. 여기서는 로컬 테스트 환경을 구성하고 테스트를 실행하는 방법을 다룹니다. 정적 웹사이트: 미리 저장한 문서를 보여주는 방식의 웹사이트입니다. 이와 대비되는 동적 웹사이트는 페이지를 요청했을 때 요청에 따라 문서를 만들어 보여줍니다. 달리 설명하자면 만들 때 데이터베이스가 필요한 경우가 동적 웹사이트, 필요없는 경우가 정적 웹사이트입니다. 설치/실행 과정 대부분은 공식 문서가 잘 설명하고 있습니다. 여기서는 몇 가지 추가 개발도구를 사용하기 위해 따라야 할 절차를 소개합니다. 웹교재: https://cnu-computer-physics.github.io/docs/ 프로젝트 조직: https://github.com/CNU-Comput..
프로젝트/전산물리학 웹교재[전산물리 웹교재] 기획
웹교재: https://cnu-computer-physics.github.io/docs/ 프로젝트 조직: https://github.com/CNU-Computer-Physics 목적 교육대학원 교육학과 물리교육 전공 수업 중 전산물리학을 수강했습니다. 담당 교수님과 상의를 통해 강의의 성격을 전산물리 교재연구로 바꾸었고, 물리학과 학부 교육과정에 알맞은 전산물리학 교재를 제작하는 것을 강의 목표로 삼았습니다. 프로그래밍을 기초부터 착실히 쌓아가는데 시간을 쓰는 것은 "전산물리"라는 교과에 어울리지 않는다고 판단했습니다. 교재는, 문법과 기능에 대한 설명을 대폭 줄이고 예제를 기반으로 문제해결 방법을 소개하는 방식으로 구성하도록 하였습니다. Github Pages 교재는 깃허브(GitHub)에서 제공하는 ..
프로젝트/SSE 스킨[SSE스킨] 티도리 프레임워크 사용
깃허브 저장소 Simple Skin for Engineer(SSE)는 이공학을 위한 단순한 스킨을 지향합니다. 티도리 프레임워크 티도리 프레임워크는 티스토리 스킨 제작을 위한 프레임워크입니다. 개발, 테스트, 배포를 손쉽게 수행할 수 있습니다. 더이상 스킨 테스트를 위한 더미 블로그를 더이상 만들지 않아도 됩니다. 티도리는 HTML대신 pug를 사용합니다. 문법이 편리하긴 하지만 사용 전에 미리 알아둬야 할 문법들이 꽤 있습니다. 프레임워크에 대한 상세한 설명은 티도리 공식 튜토리얼을 참고하시기 바랍니다. SASS 사용 SASS는 CSS를 확장한 언어입니다. 코드 재사용과 각종 함수형 표현을 가능하게 합니다. npm i -D node-sass concurrently 티도리 프레임워크를 복제하여 스킨 개발..
프로젝트/Code2Image[Code2Image] 텍스트 편집기를 소스코드 에디터처럼 꾸미기
깃허브 저장소 데모페이지 목표 앞서 텍스트 에디터와 소스코드 강조효과 연동을 구현했는데요. 이번에는 CSS를 활용하여 소스코드 강조효과가 탑재되어 있는 텍스트 에디터처럼 보이게 만들어 보도록 하겠습니다. 컨테이너 만들기 ID가 #editor-container인 를 하나 만들어 텍스트를 편집하는 와 강조표현한 소스코드를 표시하는 를 감싸줍니다. 새로 만든 컨테이너는 다음에 사용할 편집기와 표시기의 절대좌표 기준이 될겁니다. 편집기와 표시기 배치하기 #editor-container { position: relative; } #editing-code, #highlighting-code { position: absolute; top: 0; left: 0; margin: 0; } 이렇게 편집기와 표시기를 감싸고 ..
프로젝트/Code2Image[Code2Image] 텍스트 입력기와 소스코드 강조표시 연동
깃허브 저장소 데모페이지 목표 textarea에 입력이 있을 때마다 소스코드 강조표시를 수행하도록 합니다. 사용하는 언어와 도구 JavaScript: 웹 페이지가 프로그램처럼 동작할 수 있도록 해줍니다. highlight.js: 다양한 언어를 지원하는 소스코드 하이라이팅 도구입니다. 소스코드 입력시 소스코드 강조 기능 구현 HTML 의 oninput옵션은 입력이 있을 때마다 등록한 함수를 실행합니다. 여기서는 소스코드 업데이트를 수행하는 update_code(), 텍스트 입력의 크기를 조절하는 resize()를 실행합니다. 의 hljs 클래스는 highlight.js가 제공하는 스타일셋을 위한 것입니다. 자바스크립트 function update_code() { const result_elem = docu..
프로젝트/Code2Image[Code2Image] 소스코드를 이미지로 변환하기
깃허브 저장소 데모페이지 목표 파워포인트나 워드와 같은 문서작업을 하면서 소스코드를 포함해야 하는 경우가 종종 있습니다. 이럴때마다 소스코드를 붙여넣고 일일히 강토 표시를 하는 것은 매우 귀찮은 일인데요. 깃허브에서 제공하는 깃허브 페이지(Github Pages)를 통해 웹에서 서식으로 강조한 소스코드 이미지를 복사하거나 다운로드 할 수 있는 웹서비스를 만드려고 합니다. 사용하는 언어와 도구 JavaScript: 웹 페이지가 프로그램처럼 동작할 수 있도록 해줍니다. highlight.js: 다양한 언어를 지원하는 소스코드 하이라이팅 도구입니다. highlightjs-line-numbers.js: 앞선 도구로 하이라이팅 한 소스코드에 줄번호를 붙여줍니다. html2canvas: 필요한 웹 페이지의 구성요소..