반응형
이 글의 동영상 강의
일렉트론의 디폴트 타이틀바를 없애고 새로운 타이틀바를 만드는 방법을 배워봅니다.
fontawesome 설치
- 타이틀바에 들어갈 icon은 fontawesome을 설치하여 사용합니다.
- google에서 fontawesome 검색합니다.
- The iconic font and CSS toolkit 선택합니다.
- Get Started를 선택합니다.
- Font Awesome 4를 선택합니다.
- Download를 선택합니다.
- download 받은 파일을 src/font-awesome에 압축 해제합니다.
일렉트론 애플리케이션 화면 상단에 메뉴바를 만들기
- index.html에 fontawesome css를 추가합니다.
<link rel="stylesheet" href="./font-awesome/css/font-awesome.min.css">- 앞에 google에서 조회한 fontawesome의 Free Icons 사이트로 이동합니다.
- icon 검색 창에서 minimize를 검색합니다.
- window-minimize를 선택합니다.
- 다음과 같이 index.html에 아이콘을 추가합니다.
<button id="min">
<i class="fa fa-window-minimize"></i>
</button>- maximize, close 아이콘도 동일한 방법으로 추가합니다.
<button id="min">
<i class="fa fa-window-minimize"></i>
</button>
<button id="max">
<i class="fa fa-window-maximize"></i>
</button>
<button id="close">
<i class="fa fa-window-close"></i>
</button>- index.html 전체 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="./font-awesome/css/font-awesome.min.css">
</head>
<body>
<div class="container">
<div class="title-bar">
<div class="title prevent-select draggable">Custom Title Bar</div>
<div class="control prevent-select">
<button id="min">
<i class="fa fa-window-minimize"></i>
</button>
<button id="max">
<i class="fa fa-window-maximize"></i>
</button>
<button id="close">
<i class="fa fa-window-close"></i>
</button>
</div>
</div>
</div>
</body>
</html>- 일렉트론을 실행합니다.
npm start
- index.css를 다음과 같이 수정합니다.
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
margin: 0px;
}
body *{
box-sizing: border-box;
}
.container{
height: 100%;
padding: 0;
display: grid;
grid-template-rows: auto 1fr;
}
.title{
height: auto;
padding: 10px;
display: inline-block;
}
.control{
float: right;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
margin-top: 5px;
margin-right: 5px;
width: 100px;
}
.control button{
padding: 5px;
background: #000000;
color: #ffffff;
outline: 0;
border: 0;
}
.control button:hover{
background: #444444
}
.title-bar{
background: #000000;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
color: #ffffff;
font-size: 15px;
}
.prevent-select{
user-select: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
}
.draggable{
-webkit-app-region: drag;
}- 일렉트론을 실행합니다.
npm start
Custom Title Bar의 디자인이 완성되었습니다.
반응형
'일렉트론' 카테고리의 다른 글
| 일렉트론기초-12.React + Electron 한방에 띄우기 (7) | 2021.11.04 |
|---|---|
| 일렉트론기초-11.일렉트론 MySQL 연동 (0) | 2021.10.30 |
| 일렉트론기초-10.일렉트론 사이드 메뉴 만들기 (0) | 2021.10.09 |
| 일렉트론기초-09.일렉트론 커스텀 타이틀바 만들기-프로그램개발(IPC) (0) | 2021.10.04 |
| 일렉트론기초-07.일렉트론 화면 개발하기 (0) | 2021.10.03 |
| 일렉트론기초-06.일렉트론 메뉴 추가하기 (0) | 2021.10.01 |
| 일렉트론기초-05.React 프로젝트에 일렉트론을 추가하는 법 (0) | 2021.09.29 |
| 일렉트론기초-04.일렉트론 프로젝트 쉽게 만들고 쉽게 실행하기 (0) | 2021.09.28 |