사용자 정의 UI 색상
3.2.2507 버전부터 지원합니다.
CSS 변수를 사용하여 에디터 UI 색상을 자유롭게 커스터마이즈할 수 있습니다. 최신 브라우저(Chrome, Edge, Safari, Firefox)에서 동작합니다. CSS 변수 지원이 없는 구형 브라우저(예: Internet Explorer)에서는 이러한 스타일이 적용되지 않습니다.
설정 방법
<style> 태그에서 .se 클래스 아래에 변수를 오버라이드합니다:
<!-- index.html -->
<style>
.se {
--se-editor-border: #39b6b8; /* editor outer border */
--se-editor-contents-bg: #fdfdfd; /* editing area background */
--se-toolbar-fg: #4f898a; /* toolbar / resize bar icon & text */
--se-toolbar-bg: #f4f4f4; /* toolbar / resize bar background */
--se-toolbar-border: #39b6b8; /* toolbar / resize bar border */
--se-dialog-border: #4f898a; /* dialog & popup border */
}
</style>
사용 가능한 CSS 변수
변수는 UI 영역별로 묶여 있습니다. 각 스크린샷은 그룹이 제어하는 UI의 부분을 강조 표시합니다. 값 열에는 예시 값이 표시됩니다.
에디터
| 항목 | 설명 | 값 |
|---|---|---|
--se-editor-border | 에디터 외곽선 색상 | #39b6b8 |
--se-editor-contents-fg | 편집 영역 텍스트 색상 | #39b6b8 |
--se-editor-contents-bg | 편집 영역 배경색 | #39b6b8 |
--se-editor-shadow | 에디터 외부 shadow | 0px 0px 1px 1px rgba(0, 0, 0, 0.8) |
--se-editor-header-shadow | 에디터 헤더(메뉴 / 툴바 영역) shadow | 0px 0px 1px 1px rgba(0, 0, 0, 0.8) |
메뉴 바
| 항목 | 설명 | 값 |
|---|---|---|
--se-menu-bar-fg | 메뉴 바 텍스트 색상 | #39b6b8 |
--se-menu-bar-bg | 메뉴 바 배경 색상 | #39b6b8 |
--se-menu-bar-hover-bg | 마우스 오버 시 메뉴 바 버튼 색상 | #39b6b8 |
--se-menu-bar-active-bg | 활성화 시 메뉴 바 버튼 색상 | #39b6b8 |
--se-menu-items-border | 메뉴가 열릴 때 표시되는 메뉴 리스트 레이어의 테두리 색상 | #39b6b8 |
--se-menu-items-fg | 메뉴가 열릴 때 표시되는 메뉴 리스트 레이어의 아이콘 & 텍스트 색상 | #39b6b8 |
--se-menu-items-bg | 메뉴가 열릴 때 표시되는 메뉴 리스트 레이어의 배경 색상 | #39b6b8 |
--se-menu-items-hover-bg | 메뉴가 열릴 때 표시되는 메뉴 리스트 레이어에서 마우스 오버 시 버튼 색상 | #39b6b8 |
--se-menu-items-active-bg | 메뉴가 열릴 때 표시되는 메뉴 리스트 레이어에서 활성화 시 버튼 색상 | #39b6b8 |
--se-menu-items-shadow | 메뉴가 열릴 때 표시되는 메뉴 리스트 레이어의 Shadow | 0px 0px 1px 1px rgba(0, 0, 0, 0.8) |
툴바 / 크기 조절 바
| 항목 | 설명 | 값 |
|---|---|---|
--se-toolbar-fg | 툴바 및 리사이즈 바 아이콘 & 텍스트 색상 | #39b6b8 |
--se-toolbar-bg | 툴바 및 리사이즈 바 배경색 | #39b6b8 |
--se-toolbar-border | 툴바 및 리사이즈 바 테두리 색상 | #39b6b8 |
--se-toolbar-active-bg | 툴바 버튼 / 드롭다운이 활성화될 때 색상 | #39b6b8 |
--se-toolbar-hover-bg | 툴바 버튼 / 드롭다운에 마우스를 올렸을 때 색상 | #39b6b8 |
--se-toolbar-dropdown-menu-fg | 툴바 드롭다운이 열렸을 때 표시되는 메뉴 리스트 레이어의 아이콘 & 텍스트 색상 | #39b6b8 |
--se-toolbar-dropdown-menu-bg | 툴바 드롭다운이 열렸을 때 표시되는 메뉴 리스트 레이어의 배경색 | #39b6b8 |
--se-toolbar-dropdown-menu-border | 툴바 드롭다운이 열렸을 때 표시되는 메뉴 리스트 레이어의 테두리 색상 | #39b6b8 |
--se-toolbar-dropdown-menu-active-bg | 툴바 드롭다운이 열렸을 때 표시되는 메뉴 리스트 레이어에서 버튼이 활성화될 때 색상 | #39b6b8 |
--se-toolbar-dropdown-menu-hover-bg | 툴바 드롭다운이 열렸을 때 표시되는 메뉴 리스트 레이어에서 버튼에 마우스를 올렸을 때 색상 | #39b6b8 |
--se-toolbar-dropdown-menu-shadow | 툴바 드롭다운이 열렸을 때 표시되는 메뉴 리스트 레이어의 Shadow | 0px 0px 1px 1px rgba(0, 0, 0, 0.8) |
툴팁
| 항목 | 설명 | 값 |
|---|---|---|
--se-tooltip-fg | 툴팁 텍스트 색상 | #39b6b8 |
--se-tooltip-bg | 툴팁 배경 색상 | #39b6b8 |
--se-tooltip-border | 툴팁 테두리 색상 | #39b6b8 |
--se-tooltip-shadow | 툴팁 shadow | 0px 0px 1px 1px rgba(0, 0, 0, 0.8) |
다이얼로그 & 팝업
| 항목 | 설명 | 값 |
|---|---|---|
--se-dialog-title-fg | 다이얼로그 제목 텍스트 색상 | #39b6b8 |
--se-dialog-tab-menu-fg | 다이얼로그 및 팝업의 탭 메뉴 아이콘 & 텍스트 색상 | #39b6b8 |
--se-dialog-tab-menu-border | 다이얼로그 및 팝업의 탭 메뉴 테두리 색상 | #39b6b8 |
--se-dialog-tab-menu-hover-bg | 다이얼로그 및 팝업에서 마우스 오버 시 탭 메뉴 색상 | #39b6b8 |
--se-dialog-tab-menu-non-active-fg | 다이얼로그 및 팝업의 비활성 탭 메뉴 아이콘 & 텍스트 색상 | #39b6b8 |
--se-dialog-tab-menu-non-active-bg | 다이얼로그 및 팝업의 비활성 탭 메뉴 배경색 | #39b6b8 |
--se-dialog-fg | 다이얼로그 및 팝업 텍스트 색상 | #39b6b8 |
--se-dialog-bg | 다이얼로그 및 팝업 배경색 | #39b6b8 |
--se-dialog-border | 다이얼로그 및 팝업 테두리 색상 | #39b6b8 |
--se-dialog-button-fg | 다이얼로그 및 팝업 하단 버튼 텍스트 색상 | #39b6b8 |
--se-dialog-button-bg | 다이얼로그 및 팝업 하단 버튼 배경색 | #39b6b8 |
--se-dialog-button-border | 다이얼로그 및 팝업 하단 포인트 버튼 테두리 색상 | #39b6b8 |
--se-dialog-button-point-fg | 다이얼로그 및 팝업 하단 포인트 버튼 텍스트 색상 | #39b6b8 |
--se-dialog-button-point-bg | 다이얼로그 및 팝업 하단 포인트 버튼 배경색 | #39b6b8 |
--se-dialog-shadow | 다이얼로그 및 팝업 shadow | 0px 0px 1px 1px rgba(0, 0, 0, 0.8) |
--se-dialog-shadow-reversed | 다이얼로그 및 팝업 shadow (반전 시) | 0px 0px 1px 1px rgba(0, 0, 0, 0.8) |
다이얼로그 UI 컴포넌트
| 항목 | 설명 | 값 |
|---|---|---|
--se-ui-component-fg | 다이얼로그 및 팝업 UI 컴포넌트의 아이콘 & 텍스트 색상 | #39b6b8 |
--se-ui-component-bg | 다이얼로그 및 팝업 UI 컴포넌트의 배경색 | #39b6b8 |
--se-ui-component-border | 다이얼로그 및 팝업 UI 컴포넌트의 테두리 색상 | #39b6b8 |
--se-ui-component-focus-border | 포커스 시 다이얼로그 및 팝업 UI 컴포넌트의 테두리 색상 | #39b6b8 |
--se-ui-component-placeholder | 다이얼로그 및 팝업 UI 컴포넌트의 Placeholder 색상 | #39b6b8 |
--se-ui-component-active-bg | 활성화 시 다이얼로그 및 팝업 UI 컴포넌트의 배경색 | #39b6b8 |
--se-ui-component-hover-bg | 마우스 오버 시 다이얼로그 및 팝업 UI 컴포넌트의 배경색 | #39b6b8 |
--se-ui-component-point-active-bg | 활성화 시 다이얼로그 및 팝업 UI 컴포넌트의 포인트 배경색 | #39b6b8 |
--se-ui-component-point-active-border | 활성화 시 다이얼로그 및 팝업 UI 컴포넌트의 포인트 테두리 색상 | #39b6b8 |
--se-ui-component-menu-fg | 다이얼로그 및 팝업 UI 컴포넌트 메뉴 리스트 레이어의 아이콘 & 텍스트 색상 | #39b6b8 |
--se-ui-component-menu-bg | 다이얼로그 및 팝업 UI 컴포넌트 메뉴 리스트 레이어의 배경색 | #39b6b8 |
--se-ui-component-menu-border | 다이얼로그 및 팝업 UI 컴포넌트 메뉴 리스트 레이어의 테두리 색상 | #39b6b8 |
--se-ui-component-menu-active-bg | 다이얼로그 및 팝업 UI 컴포넌트 메뉴 리스트 레이어에서 활성화된 버튼의 배경색 | #39b6b8 |
--se-ui-component-menu-hover-bg | 다이얼로그 및 팝업 UI 컴포넌트 메뉴 리스트 레이어에서 마우스 오버된 버튼의 배경색 | #39b6b8 |
--se-ui-component-menu-shadow | 다이얼로그 및 팝업 UI 컴포넌트 메뉴 리스트 레이어의 Shadow | 0px 0px 1px 1px rgba(0, 0, 0, 0.8) |
눈금자
| 항목 | 설명 | 값 |
|---|---|---|
--se-ruler-division | 눈금선 색상 | #39b6b8 |
--se-ruler-number | 눈금 숫자 색상 | #39b6b8 |
--se-ruler-bg | 눈금 비활성 영역 색상 | #39b6b8 |
--se-ruler-active-bg | 눈금 활성 영역 색상 | #39b6b8 |
선택 및 모바일 핸들
| 항목 | 설명 | 값 |
|---|---|---|
--se-selection | 텍스트 선택 색상 | rgba(57, 182, 184, 0.4) |
--se-formula-selection | 표 수식 범위 선택의 테두리 색상 | #39b6b8 |
--se-multi-selection-bg | AP(절대 위치) 객체의 다중 선택 배경색 | rgba(57, 182, 184, 0.2) |
--se-multi-selection-border | AP(절대 위치) 객체의 다중 선택 테두리 색상 | #39b6b8 |
--se-mobile-handle | 모바일 선택 핸들 색상 | #39b6b8 |
표 핸들
| 항목 | 설명 | 값 |
|---|---|---|
--se-table-handle-bar | 표 핸들 바 색상 | #39b6b8 |
--se-table-handle-bar-active | 활성화된 표 핸들 바 색상 | #39b6b8 |
--se-table-handle-select-all | 표 핸들의 전체 선택 버튼 색상 | #39b6b8 |
--se-table-handle-resize | 표 핸들의 크기 조절 버튼 색상 | #39b6b8 |
--se-table-handle-text | 표 핸들의 열(A, B, C, ...) / 행(1, 2, 3, ...) 헤더 텍스트 색상 | #39b6b8 |
--se-table-formula-label | 수식이 포함된 표 셀의 마커 색상 | #39b6b8 |
드로잉 객체 핸들
| 항목 | 설명 | 값 |
|---|---|---|
--se-resize-handle-border | 그리기 객체 핸들 테두리 색상 | #39b6b8 |
--se-resize-handle-dot | 그리기 객체 핸들의 크기 조절 그립 색상 | #39b6b8 |
--se-resize-handle-rotation | 그리기 객체 핸들의 회전 그립 색상 | #39b6b8 |
--se-resize-handle-adj | 그리기 객체 핸들의 shape 조정점 그립 색상 | #39b6b8 |
--se-resize-handle-connector | 그리기 객체 핸들의 선 shape 연결점 색상 | #39b6b8 |
대체 이미지 / 동영상
| 항목 | 설명 | 값 |
|---|---|---|
--se-alternative-image-fg | 대체 이미지 / 동영상 아이콘 색상 | #39b6b8 |
--se-alternative-image-bg | 대체 이미지 / 동영상 배경색 | #39b6b8 |
--se-alternative-image-border | 대체 이미지 / 동영상 테두리 색상 | #39b6b8 |
레이어 속성 버튼
| 항목 | 설명 | 값 |
|---|---|---|
--se-property-button-fg | 레이어 속성 버튼 아이콘 색상 | #39b6b8 |
--se-property-button-bg | 레이어 속성 버튼 배경색 | #39b6b8 |
--se-property-button-border | 레이어 속성 버튼 테두리 색상 | #39b6b8 |