본문 바로가기

Programming/Python

[Jupyter Notebook] 주피터 노트북 폰트 설정, 원래 코드가 잘 작동이 안될 때 for Windows

항상 mac으로만 주피터 노트북을 쓰다가, 교육에서 노트북을 대여해줘서 오랜만에 윈도우로 주피터를 쓰게 되었습니다!

 

그런데 폰트가 너무 못생겨서 너무 신경쓰이더라구요..!

다들 아시겠지만 아름다운 개발환경도 생산성에 굉장히 중요한 요소랍니다...ㅠ.ㅠ

또한 윈도우 기본폰트는 대문자 I 랑 소문자 L이랑 구분이 되질 않아서 가독성이 떨어집니다! (feat. IlIlIlIlllIIl : L이랑 I 구분하기) 

 

으으으.... ㄴㅓ무 못생겼어요....

 

그래서 원래 하던 대로 폰트를 변경하려고 했습니다!

Jupyter notebook에서 폰트 변경하기? 저어어언혀 어렵지 않아요~.~

 


 

1. 먼저 명령 프롬프트(혹은 터미널)를 열고 원하는 위치에 아래의 명령어를 실행합니다.

 

jupyter notebook --generate-config

윈도우 검색창에 명령 프롬프트를 검색해서 키세요
저는 사용자 폴더 안에 만들었습니다. (잘 안보이시면 클릭하시면 확대됩니다!)


 

 

2. 그러면 아래와 같이 .jupyter 폴더가 생길 겁니다.

 

 


 

 

3. .jupyter 폴더 안에 들어가서, 'custom'이라는 폴더를 만듭니다.

 

원래는 .jupyter 폴더 안에 jupyter_notebook_config.py 라는 파일만 있는 게 맞습니다.

다른 파일은 제가 이것저것 만지다 보니 생겼어요!

 

 


 

 

4. custom 폴더 안에 'custom.css'라는 css 확장자 파일을 만들어주고,
그 안에 원하는 설정이 담긴 코드를 넣고 저장합니다!

 

custom.css 파일을 만든 화면

이것 역시 방금 만든 폴더니까 안에 파일이 아무것도 없는 게 맞아요

다른 파일도 어쩌다 보니 생겼습니다 허허...

 

 

.CodeMirror pre {font-family: Consolas; font-size: 11pt; line-height: 110%;}

↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ 위의 코드를 넣어줍니다 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

 

*코드설명

- font-family : 원하는 글꼴이름을 넣어주면 됩니다.

예를들어 나눔고딕으로 바꾸고 싶다 하면 아래와 같이 font-family 다음에 NanumGothic이라고 적으시면 됩니다.

.CodeMirror pre {font-family: NanumGothic; font-size: 11pt; line-height: 110%;}

- font-size : 글꼴사이즈 입니다.

- line-height : 각 줄높이를 설정합니다. 위아래줄의 간격을 넓게 하고 싶다 하시면, 110%보다 더 큰값을 넣으면서 조절해주세요.

 

코드를 작성한 화면

 


 

 

5. jupyter notebook을 새로고침 하면 끄으으읕!!   폰트가 변경된 것을 확인할 수 있을 겁니닷!

 

네! 아주 간단해요!

그저 .jupyter 폴더 안에 custom 폴더 만들고 그 안에 custom.css 파일을 만들어 폰트 설정 코드 한 줄만 넣어주면 됩니다...

심지어 코드도 한 줄이에요...!

 

 

 


B.U.T

안되더라고요 ㅓ리마ㅓㄹ;ㅁ너ㅏㅣㄹㄴ;ㅁㄹㅇㄴㅁㄻ너ㅣㅓㅁㄴ

왜 안되지...? 저 못생긴 폰트를 계속 마주하며 코딩을 해야 돼서 정말 힘들었어요....ㅜㅜㅜㅜ

 

제가 css 문법을 잘 모르다 보니 수정하기도 힘들더라구요...

하지만 삽질 끝에 주먹구구식 코드를 작성해서 결국 성공했습니다!!!!

 

와ㅏㅏㅏㅏㅏ이 기쁨을 저와 똑같은 고통을 겪는 분들과 공유하고 싶어서 게시글로 올립니다 ㅎㅎㅎ

 

위의 과정은 똑같이 하되, 4번의 custom.css 코드 부분만 이렇게 하시면 됩니다.

div.CodeMirror,

div.CodeMirror pre { /*코드 블록*/
 font-family: D2Coding, Consolas;
 font-size: 11pt;
 line-height: 150%;
}

.text_cell_render { /*마크다운*/
 font-family: Consolas;
 }

.input_prompt { /*줄번호*/
 font-family: D2Coding, Consolas;
}

.output_result pre { /*출력결과-맨마지막 출력*/
 font-family: D2Coding, Consolas;
}

.output_stdout pre { /*출력결과-긴출력, 중간출력*/
 font-family: D2Coding, Consolas;
}

.output_area { /*표*/
 font-family: D2Coding, Consolas;
}

jupyter notebook 켜놓고 일일이 F12로 태그 찾아가며 바꾼 겁니다 ㅜㅜ 

각 요소별로 바꾼 거라 나중에 더 발견하게 되면 수정하겠습니다..!

주석에 해당하는 태그이니까 커스텀 설정하기 더 편하겠죠?

 

*속성 정의

font-family : 폰트 이름 (앞에서부터 가장먼저 적용할 수 있는 폰트로 적용됨)

font-size : 폰트 크기

line-height : 줄 높이 (위에는 글자크기의 150%로 설정)

 

 

 

+) 결과 화면

 

흐아ㅏㅏㅏ 너무 맘에 들어요오 :D

 

 

참고로 제가 설정한 폰트는 'D2Coding' 입니다.

읽기 좋은 폰트를 설정해야 실수도 적어지고, 코드 해석하기도 편하고 여러모로 좋습니다..!

D2Coding 폰트는 nhn에서 제작한 '코딩전용폰트'인데 한글이랑 영어랑 크기가 같게 제작되어서 일관성 있게 보입니다

완전 추천해요><

 

 


위에서 코드를 올렸지만, 편하게 쓰시라고 파일도 올립니다!

custom.css
0.00MB

참조링크

- line-height 가 뭘까? 싶으면 들어가 보세요, 다른 속성들도 아주 잘 설명되어 있습니다!

[CSS/ line-height / 줄 높이 정하는 속성] www.codingfactory.net/10639

 

-D2Coding 폰트 다운받는 github 주소입니다.

[naver/d2codingfont] github.com/naver/d2codingfont

 

 


가감없는 피드백 언제나 환영합니다  '▽' /
도움이 되셨다면 댓글과 공감 부탁드려요! ❤️💜