Programming Guide

Css Flex / Grid 개념 알아보기

https://studiomeal.com/archives/197 https://studiomeal.com/archives/533 해당 글을 참고해 작성한 포스트입니다. What is Flex & Grid? 웹에는 "웹 레이아웃"이라는 개념이 있다. 우리는 아래 보이는 그림처럼 필요에 따라서 우리만의 레이아웃을 만들어 내용을 배치할 수 있다. 현재 레이 아웃하면 가장 많이 사용되는 것이 Flex와 Grid로 Flex는 1차원의 수평, 수직 영역 중 하나의 방향으로 레이아웃을 나누고 Grid는 2차원의 수평 수직을 동시에 레이아웃을 나눈다. Flex Flex 레이아웃을 만들기 위한 기본적인 HTML 구조는 다음과 같다. helloflex abc helloflex 부모 요소인 div.container를 Fle..

Sass ( SCSS ) 시작하기

What is Sass(SCSS)? CSS는 복잡한 언어는 아니지만 작업이 커지고 코드가 많아질수록 불편함이 생긴다. Selector의 과용과 연산 기능의 한계, 구문의 부재 등 프로젝트가 커질수록 코드 중복이 많아지고 유지보수가 어려워지게 된다. 조건문이나 반복문조차 지원하지 않기 때문에 불편함이 한둘이 아니다. 반면 Sass(SCSS)는 Syntactically Awesome StyleSheet의 약어로 코드의 재활용성을 올리고, 가독성을 올리는 등 CSS의 단점을 보완하고 개발의 효율을 높이기 위해 등장한 CSS Preprocessor(전처리기) 언어이다. Sass, Less, Stylus 같은 전처리기 언어는 직접 동작시키는 게 아닌 전처리기 언어 문법으로 작성 후 CSS로 컴파일해 웹으로 동작시..

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앱을 만드는 과정을 안내합니다. 이 튜토리얼이 끝나면 실..