-
아톰에디터(Atom.io) 기본 인터페이스 폰트사이즈 조정웹프로그래밍 2018. 3. 22. 15:49반응형
아톰 에디터를 사용하다가
에디터 내부의 폰트나 폰트사이즈는 설정에서 쉽게 수정이 됩니다.그러나 툴바나, 메뉴바, 사이드바 같은곳의 폰트는 직접 스타일시트를 수정해 주어야 합니다.
에디터 기본 스타일시트 편집창 열기
(저는 리눅스를 사용합니다. 윈도우나 맥용은 메뉴의 위치가 다를수도 있습니다.)
구글링으로 찾아본
일반적인 인터페이스 폰트 수정항목은 다음과 같습니다.@ui-font-size: 16px;
.tree-view {
// background-color: whitesmoke;
font-size: @ui-font-size;
}.overlay .select-list ol.list-group li,
.overlay.select-list ol.list-group li {
font-size: @ui-font-size;
}.status-bar {
font-size: @ui-font-size;
height: @ui-font-size * 2;
line-height: @ui-font-size * 2 - 4;
}.tab-bar .tab, .tab-bar .tab.active {
font-size: @ui-font-size;
height: @ui-font-size * 2;
}li.file.entry.list-item, .list-tree li.list-nested-item > .list-item {
font-size: @ui-font-size * 1.2;
line-height: 25px;
}특히 저같은 경우에는 사이드바의 폰트를 수정하고 싶었는데
위의 맨 마지막 항목(li.file.entry.list-item ... )을 수정하여 해결 하였습니다.좀더 정확한 설명으로는...
아톰에디터는 크롬 및 자바스크립트 기반으로 제작되어진 것으로
에디터 화면에서 ctrl+shift+i 키로 크롬브라우저 처럼 관리자모드 창을 열수 있으며
에디터의 각 요소부위의 클래스명을 확인하여 세밀한 부분까지 수정할 수 있습니다.반응형'웹프로그래밍' 카테고리의 다른 글
윈도우10 아톰(Atom.io)설치후 실행시 아무런 반응이 없는 경우 (0) 2019.01.08 아톰에디터(Atom.io) 공식저장소 등록 (0) 2018.10.08 모바일웹 제작시 기본사항 (0) 2011.06.07 낭만호랑이의 인터넷 시작페이지(링크모음 사이트) - 낭만호랑이의 6번째 홈페이지...... 헛짓거리..... (0) 2011.01.03 div 태그 style 속성 요약 (0) 2010.12.31