Web109 [Electron] Getting Started ※ v9.2.1 2020/08/31 - [Web/JavaScript] - [Electron] Getting Started 2020/08/31 - [Web/JavaScript] - [Electron] BrowserWindow 2020/09/01 - [Web/JavaScript] - [Electron] IPC (Inter Process Communication) 2020/09/01 - [Web/JavaScript] - [Electron] Menu 2020/09/01 - [Web/JavaScript] - [Electron] Global Shortcut 2020/09/01 - [Web/JavaScript] - [Electron] Tray Project Configuration Create a project fo.. 2020. 8. 31. [Node] yarn yarn is a package manager like npm. Installation Install yarn to system. $ npm i -g yarn Lock the yarn version used by the project. $ yarn set version Usage Show help $ yarn help Show current version $ yarn --version Update to the latest version $ yarn set version latest Create a new project configuration $ yarn init $ yarn init -y Add a package $ yarn add $ yarn add --dev (-D) $ yarn add --peer.. 2020. 8. 30. [Node] NPM (Node Package Manager) npm is a package manager for the JavaScript programming language. It also helps to manage the project. Project Initialization Initialize a proejct $ npm init $ npm init -y It will create the package.json file. If run the command with -y option, it creates the default settings. If not, it creates with interactive mode. Description name: Project name Should be less than 214 characters Don't start .. 2020. 8. 30. [Node] Node.js Node.js is a javascript runtime built on Chrome's V8 javascript engine. Installation I recommend the installation through nvm. 2020/08/30 - [Web/JavaScript] - [Node] NVM Usage Run javascript files $ node 2020. 8. 30. [Node] NVM (Node Version Manager) ※ 08.30.2020 - v1.1.7 nvm is a version manager for node.js, designed to be installed per-user, and invoked per-shell. Installation On Mac $ brew install nvm Next, create a folder for nvm. $ mkdir ~/.nvm After installs it, add the below code in your shell profile. export NVM_DIR="$HOME/.nvm" [ -s "/usr/local/opt/nvm/nvm.sh" ] && . "/usr/local/opt/nvm/nvm.sh" [ -s "/usr/local/opt/nvm/etc/bash_comp.. 2020. 8. 30. [CSS] Margin / Border / Padding About 22 years ago, when I first learned CSS, this concept was difficult to me. I will explain this for someone who is unfamiliar with this concept like me at that time. Overview First of all, I will show you a figure. This is a concept figure of margin, border and padding. The inner area including the border is the size of the element. However the size of element expand with border width, so yo.. 2020. 8. 30. [CSS] Flexbox Flexbox is the commonly-used name for the CSS flexible box layout model. Flexbox displays a single dimension as a row or a column. flex is a new value added to the CSS display property. Along with inline-flex it causes the elements that it applies to become a flex container, and the element's children to each become a flex item. I will explain the flexbox through the example. This is a default c.. 2020. 8. 28. [CSS] BEM (Block Element Modifier) Overview BEM is a methodology that helps you to create reusable components and code sharing in web FE development. CSS codes developed without any structure or naming conventions leads to an unmaintainable in the long term. The advantages of BEM are modularity, reusability, and structure. So if we follow the BEM method, it allows us to solve these problems. Block A standalone entity that is mean.. 2020. 8. 28. [CSS] Pseudo Classes and Pseudo Elements Not all elements have a pseudo classes and pseudo elements. Therefore, you have to carefully use it. Pseudo Classes :active This represents an element that is being activated by the user. :checked This represents any radio, checkbox, or option element that is checked or toggled to an on state. :first-child This represents the first element among a group of sibling elements. :focus This represent.. 2020. 8. 27. [CSS] Combinators Descendant Combinator The descendant combinator uses space. It selects nodes that are descendants of the first selected element. This is a usage example. div span { color: teal; } Child Combinator The child combinator uses >. It selects a node that is direct children of the first element. This is a usage example. ul > li { font-weight: 700; } Adjacent Sibling Combinator The adjacent sibling comb.. 2020. 8. 26. [CSS] Basic / Grouping Selector Basic Selectors Universal Selector The * selects all elements. We use this selector for applying some property globally. Here is the usage. * { margin: 0; } Type Selector The type selector selects all elements that have the specified HTML tag name. Here is the usage. div { width: 10px; } span { font-size: 12px; } h1 { color: teal; } ID Selector The ID selector selects an element that has the id .. 2020. 8. 24. [CSS] Syntax The basic syntax of CSS is like below. selector { property: value; } The selector selects which element of HTML tag. The CSS block is specified by { }. The property means which property is applied to the selected tag. The value means what value is applied to the specified property. The : has to be located between property and value. The ; has to be located after the value. This is the example. d.. 2020. 8. 24. 이전 1 ··· 6 7 8 9 10 다음
