주피터 노트북 스타일(CSS) 개인 저장용

주피터 노트북 화면 스타일을 설정한다.

파일 경로: C:\Users\사용자이름\.jupyter\custom\custom.css

/*※ 주피터노트북 기본 스타일보다 덮어쓰려고 단계가 장황하다. (예: #header를 굳이 body>#header로 씀)*/
/*레이아웃*/
html body.notebook_app > #header {
    position: fixed;
    top: 0;
    box-sizing: border-box;
    width: 100vw;
    height: 20px;
    background-color: white;
    overflow: hidden;
}
html body.notebook_app > #header:hover {
    overflow: visible;
}
html body.notebook_app > #header > * {
    background-color: white;
}
html body.notebook_app > #header > #header-container {
    background-color: white;
}




#notebook {
    font-size: 16px !important;
}
@media not print{
    .notebook_app{
        background-color: #222;
    }
}
.container {
    width: 95% !important;
    min-width: 600px;
}

/*커서*/
div.CodeMirror-cursors {
}
div.CodeMirror-cursor {
    border-left: 2px solid black;
    width: 8px;
    background-color: #0f04;
}

/*코드 셀*/
div.code_cell {
    background-color: #f2f2f2;
}

/*입력*/
div.input_area {
    background-color: #f7f7f7;
    border: 1px solid #ccc;
}
.CodeMirror {
    font-family: D2Coding, Consolas !important;
    font-size: 16px;
    color: #444;
}
.cm-s-ipython span.CodeMirror-matchingbracket {/*괄호짝*/
    animation-duration: 5s;
    animation-name: matchingbracket;
    animation-iteration-count: infinite;
    padding: 5px 0px;
    border: 1px solid;
    background-color: yellow !important;
    color: black !important;
}
@keyframes matchingbracket {
  0%  { border-color: #fff; }
  4%  { border-color: #e00; }
  10%  { border-color: black; }
  90% { border-color: black; }
  100%  { border-color: #fff; }
}
.cm-s-ipython span.cm-keyword {/*키워드*/
    color: #80c;
}
.cm-s-ipython span.cm-variable{/*이름*/
    color: #300;
    font-weight: bold;
}
.cm-s-ipython span.cm-property{/*속성*/
    color: #026;
}
.cm-s-ipython span.cm-builtin {/*내장이름*/
    color: #640;
}
.cm-s-ipython span.cm-operator {/*연산자*/
    color: #a0c;
}
.cm-s-ipython span.cm-number{/*수*/
    color: #690;
}
.cm-s-ipython span.cm-string {/*문자열*/
    color: #880;
}
.cm-s-ipython span.cm-comment {/*주석*/
    color: #888;
    font-style: normal;
    font-family: '나눔명조', serif;
}


/*출력*/
div.output_subarea {
}
div.output_subarea pre{
    color: #333;
    font-family: D2Coding, Consolas !important;
}



/*마크다운*/
div.text_cell_render {
    font-family: '나눔명조', serif;
    color: #444;
}
div.text_cell_render h1 {
    padding: 10px 5px;
    text-align: center;
    font-size: 210%;
    font-family: '휴먼모음T', sans-serif;
    color: #014;
}
div.text_cell_render h2, 
div.text_cell_render h3, 
div.text_cell_render h4, 
div.text_cell_render h5, 
div.text_cell_render h6 {
    font-family: '나눔고딕', sans-serif;
    color: #000;
}


/*줄번호*/
div.input_prompt {
    color: #980;
    font-family: '나눔스퀘어라운드', sans-serif;
}
div.input_prompt > bdi {
    font-size: 60%;
}

내가 이쁘게 꾸며놨는데 이 정보를 잃으면 슬플 거야. 그래서 블로그에 써놓기.