일렉트론기초-07.일렉트론 화면 개발하기

동영상 강의

https://youtu.be/vgic4kn1Oko

Electron 화면은 web 제작 기술과 동일합니다.

따라서 html, css, js만으로 개발이 가능합니다.

 

이번 시간은 codepen 사이트에서 맘에 드는 디자인을 가져와서 화면 디자인을 바꿔봅니다.

 

우선 일렉트론 App을 만듭니다.

npx create-electron-app electron-app

VSCode로 프로젝트를 불러옵니다.

code .

codepen.io 사이트로 이동합니다.

• https://codepen.io/

CodePen

검색창에 "intro" 로 검색합니다.

• 맘에 드는 디자인을 선택해서 click하면 editor 창으로 이동합니다.
• 저는 ScrollMagic Wiki Tutorial을 선택했습니다.
• https://codepen.io/grayghostvisuals/pen/EtdwL

ScrollMagic Wiki Tutorial : Anchor Navigation

• html 내용을 복사해서 index.html에 붙여 넣습니다.
• css 내용을 복사해서 index.css에 붙여 넣습니다.
• src/function.js 파일을 만듭니다.
• js 내용을 복사해서 function.js에 붙여 넣습니다.
• index.html </body>위에 <srcript src='function.js'></script>를 추가합니다.
• yarn start 를 실행합니다.

실행화면

간단하게 일렉트론 화면을 만들어 봤습니다.

이렇게 codepen을 이용하면 디자이너 없이 약간의 수정만으로 일렉트론 개발이 가능합니다.