HTML

[Electron] Electron을 사용하여 Destktop Todo App 만들기( 2 ) - Preferences, Todo CRUD

Preferences const { app, BrowserWindow, ipcMain } = require('electron') const path = require('path') const createWindow = () => { // Create the browser window. const mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { preload: path.join(__dirname, 'preload.js') }, }) mainWindow.removeMenu(); // remove Menu // and load the index.html of the app. mainWindow.loadFile('index...

Electron 시작하기

Electron 공식문서를 번역한 내용을 참고하여 작성된 내용입니다. What is Electron? Electron은 자바스크립트, HTML, CSS를 사용하여 데스크톱 애플리케이션을 만드는 프레임워크이며 네이티브 애플리케이션입니다. Node.js와 OS의 이벤트 루프를 합쳐 네이티브 UI를 제어하며, Chromium을 사용해서 HTML, CSS, 자바스크립트를 이용해 애플리케이션을 만들 수 있도록 해줍니다. 그리고 Electron을 이용해 작성한 앱은 Mac, Windows, 리눅스용으로 패키지 할 수 있습니다. Quick Start 이 가이드에서는 electron/electron-quick-start처럼 Electron에서 Hello world앱을 만드는 과정을 안내합니다. 이 튜토리얼이 끝나면 실..

[클론 코딩] YouTube 클론 코딩 - html & scss

1. 웹 페이지 분석 2. 구현 YouTube 로그인 playlist playlist #여름밤 달콤쌉싸름하게 농익은 여름밤|playlist 조회수 123456789회 2022.08.17 6.7천회 싫어요 공유 저장 $flex: flex; @mixin mp { margin: 0; padding: 0; } body { background-color: whitesmoke; } header { background-color: white; display: $flex; justify-content: space-between; & .logo { font-size: large; font-weight: bold; } & .logo i { color: red; font-size: 25px; } & .info button ..

[ JavaScript ] 간단한 Todo List 구현

간단한 ToDO List를 구현해보자 My ToDos Create To Do html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; } ul, li { list-style: none; } body { background-color: beige; } #main_menu { display: block; } #create_menu { display: none; } .background { width: 50vw; height: 80vh; background-color: white; margin: 0 auto; margin-top: 30px; border-radius: 5px; } .title { text-align: center; } .creat..