🧐 🤔 그거 어떻게 쓰더라 🙄 😙

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

2023. 11. 5. Evergood Kim이가 씀

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

파일 경로: 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%;
}

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

728x90