CSS

[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...

TailwindCSS 시작하기

What is TailwindCSS? tailwindCSS는 화면 디자인을 위한 프레임워크로 사용자 맞춤 디자인을 유틸리티 우선으로 빠르게 구축하는 CSS 프레임워크이다. TailwindCSS 설치하기 TailwindCSS를 적용하는 방법은 공식문서에 자세히 설명되어 있으니 공식문서로 가서 자신이 사용하는 프레임워크에 따라 설치 가이드를 보고 설치하면 쉽게 프로젝트에 Tailwind CSS를 적용시킬 수 있다. 사용법 Tailwind CSS를 사용하는 방법은 매우 간단하다. html 태그에 class를 적고(react라면 className) 여기에 사용하고 싶은 CSS 속성을 적어주면 된다. //가운데 정렬 Awesome Tailwind!! 위 코드를 평범한 CSS로 바꾸면 Awesome Tailwind..

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로 컴파일해 웹으로 동작시..