본문 바로가기

All

 (147)
Modern Syntax | Params, Spread, De-structuring 1. Params default params default params는 사용자가 함수에 인자를 전달하지 않았을 때, 기본으로 적용할 값을 설정하기 위해 만들어진 문법이다. 이전에는 아래와 같이 함수 내부에서 조건문을 이용했다. function rollDice(numsSide) { return Math.floor(Math.random() * numsSide) + 1; } rollDice(); // numsSide===undefined => it prints out NaN // use condition checking function rollDice(numsSide) { if(!numsSide) { numsSide = 6; }; return Math.floor(Math.random() * numsSide)..
Hoisting +) scope, execution context 챕터와 함께✍️ Hoisting hoist란 "끌어올리다"의 의미를 갖는 단어이다. JS에서 hoist 역시 무언가를 끌어올리는 것과 관련이 있다. JS엔진의 interpreter는 우리가 작성한 프로그램이 실행되면, 소스 코드를 컴퓨터가 이해할 수 있는 언어로 한줄 씩 번역하는 역할을 하는데, 이 작업을 시작하기 전에 hoisting이 일어난다. hoisting이란, 함수, 변수, 클래스의 선언(declaration, not initialization)이 어디에 작성되어 있든지 간에, 해당 선언문을 이들이 작성된 scope의 최상단에 있는 것처럼 끌어올리는 것을 말한다. 이제 함수와 변수, 클래스의 경우를 나누어 hoisting에 대해 살펴보자. 1. ..
Var Var var는 JS에서 변수를 선언할 때 사용되던 오래된 버전의 키워드로 modern javascript에서는 사용하지 않는다. 왜 var를 사용하지 않는 걸까? var로 선언된 변수들은 block scope를 구분 하지 못한다. 블럭 안에 변수를 선언했더라도, 이 변수를 global 변수로 취급한다. 즉 블럭 안에서 선언된 변수를 코드 전역에서 업데이트 할 수 있다는 의미이다. 함수 scope 내부에서 선언된 var는 외부에서 접근할 수 없다. var를 이용해서 이미 선언한 변수를 또 한번 선언할 수 있다. 어떤 값을 재할당 하는 것처럼 동작하기 때문에 이미 선언된 변수라는 에러를 던지지 않는다. var를 작성하지 않고도 변수를 선언할 수 있다. 키워드 없이 변수를 선언하면, 코드를 읽는 사람의 입장..
Libraries Reset CSS a { /* inherit means having parent's color*/ color: inherit; text-decoration: none; } button:focus, button:active, input:focus, input:active, textarea:focus, textarea:active { box-shadow: none; outline:none; } ul, ol, li { list-style-type: none; padding-left: 0; margin-left: 0; } Modal .backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 20; background-col..
What is Bootstrap? Bootstrap what is Bootststrap? Bootstrap | Bootstrap은 프론트엔드 개발을 위한, 특히 css 스타일링과 responsive grid system을 쉽고 빠르게 구현할 수 있도록 도와주는 css framework이다. link와 script 태그에서 bootstrap cdn 링크를 연결하면, 해당 프로젝트에서 Bootstrap이 제공하는 편의를 이용할 수 있다. +) bootstrap과 비슷한 기능을 하는 bulma, foundation, semantic UI와 같은 css framework도 존재한다. cdn | content delivery network 서버에 데이터를 요청할 때, 서버가 딱 한곳에만 위치한다면 데이터를 받아올 때 delay가 발생할 수 있다...
Selectors CSS의 문법은 크게 두 부분으로 나누어 볼 수 있는데, Selector와 Declaration(선언)이다. selector에서는 스타일링을 할 요소를 선택하고 선언부에서는 그 요소에 적용할 스타일링을 구체적으로 작성한다. 지금까지는 선언부에서 사용되는 속성들과 그 값들에 대해 알아보았다. 이제부터는 우리가 스타일링 하고싶은 요소를 선택, 지정하는 문법에 대해 알아보자. selector { property: value; } Type, Class, Id type | html 태그를 직접 선택 p { background-color: #0066ff; } class | html 태그에 지정된 클래스를 이용해서 요소를 선택 동일한 클래스를 가지고 있는 모든 요소에 같은 스타일링을 할 때 유용하게 사용 하나의 요소..
etc | box-shadow, overflow, transform, visibility Box Shadow box-shadow | 요소에 그림자 효과를 주는 속성, 아래의 다섯가지 속성값을 적용 h-offset | 그림자의 x축 방향(+, -) 길이 v-offset | 그림자의 y축 방향(+, -) 길이 blur px단위 0에 가까워지면 선명해 짐 spread | shadow size 보통 0으로 지정 color | shadow color 주로 rgba()를 이용해서 투명도를 지정 +) 어떻게 사용하느냐에 따라 아래와 같이 다양한 디자인을 구현할 수 있다. neumorphism generator 사이트 Overflow overflow | width와 height을 갖는 요소의 컨텐츠나 자식요소가, 그 요소의 사이즈를 벗어났을 때의 처리 방법을 설정할 수 있다. 다음과 같은 값을 갖는다. v..
Background background와 관련된 속성 background-color | 요소의 배경 색 지정 기본값 | rgba(0, 0, 0, 0) hex rgb rgba 140 named color background-image | 요소의 배경 이미지 지정 무료 이미지 사이트 | unsplash html의 src처럼, url()을 반드시 사용해 주어야 한다 background-repeat | backgound-image를 반복해서 출력 repeat(기본값), no-repeat background-size | backgound-size를 지정 contain | 요소의 크기에 맞춰서, 배경에 이미지 전체가 포함되도록(contain) 한다 cover | 요소의 크기에 맞춰서, 배경에 이미지를 잘라 넣는다 자체적으로 이미지 사..

티스토리툴바