목록Front-End (19)
IT CUBE

Color Space 색상 팔레트 최적의 색상 조합을 알려준다. ColorSpace - Color Palettes Generator and Color Gradient Tool Just Enter a Color! And Generate nice Color Palettes mycolor.space CSS Gradient 이쁜 그래디언트를 만들 수 있다. CSS Gradient — Generator, Maker, and Background As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile. cssgr..

PWA Progressive Web Application 새롭고 강력한 소프트웨어 앱을 만드는 방식 HTML, CSS, JavaScript를 이용하여 만든 웹앱을 모던한 웹 브라우저 API와 결합해서 크로스 플랫폼에서 동작하는 어플리케이션을 손쉽게 만들 수 있다. 접근성이 높은 웹앱의 장점과 플랫폼 API를 사용할 수 있는 네이티브 앱의 장점의 결합 PWA Tools 1. PWA builder 웹사이트를 pwa로 전환할 때 어떤지 확인해주는 사이트 2. Workbox 다양한 pwa를 위한 서비스를 위해 제공 3. Maskable.app 더 나은 pwa의 사용성을 위한 adaptive 디자인할 수 있는 툴 PWA를 위한 Step 1. 이미 만들어진 웹사이트나 웹 어플리케이션이 존재 2. https를 이용해..

Command Palette 다양한 기능을 사용할 수 있다. Ctrl + Shift + P 또는 F1 Quick Open 해당하는 파일을 빠르게 검색 및 이동 Ctrl + P User Settings Ctrl+ Toggle sidebar 왼쪽의 익스플로러 창을 열고 닫을 수 있다 Ctrl + B Keyboard Shortcut 단축키들을 확인할 수 있다. Ctrl + K + S Beginning / end of file 빠르게 네이게이션할 수 있다. * 파일의 제일 윗부분과 아랫부분으로 이동 가능 Ctrl + Home / Ctrl + End * 문장에서 제일 처음부분과 끝 부분으로 이동 Home / End 단어별로 커서 이동 Ctrl + ← / → 단어별로 커서 이동하면서 선택까지 Ctrl + Shift..

em 타이포그래피에서 현재의 지정된 포인트 사이즈를 나타내는 단위 즉, 현재 폰트 사이즈를 나타내는 단위 폰트 패밀리에 따라서 사용자에게 보이는 텍스트의 크기가 달라질 수 있는데 em은 선택된 폰트에 전혀 상관없이 항상 고정된 폰트 사이즈를 가짐 폰트 사이즈를 따로 지정하지 않으면 16px로 지정되는데 여기서 폰트 사이즈를 8em으로 지정하면 16 * 8 = 128px로 브라우저에 표기된다. 즉, 800%와 같다. * 부모의 값에 상대적으로 곱해진다. 예를 들어, root가 16px이고 parent가 8em, parent 안에 있는 child가 0.5 em이면 child는 16 * 8 * 0.5 = 64px이 된다. rem em과 비슷하지만 부모가 아닌 루트에 지정된 폰트 사이즈에 따라서 크기가 결정된다..

Shorthand Property names const soo1={ name: 'soo', age: '20' }; const name= 'soo' const age='20' const soo2={ name, age }; console.log(soo1,soo2); Destructuring assignment const student={ name:'soo', level:1 }; const { name, level } =student; console.log(name,level); // 새로운 변수로도 할당 가능 const{name: name1, level: level1}=student; console.log(name1,level1); // 배열에도 이런식으로 접근 가능 const animal=['1','2']..

async & await Promise를 좀 더 간결하고 동기적으로 실행되는 것처럼 보이게 하는 것 Promise처럼 계속해서 체이닝하면 복잡하기 때문에 이와 같이 사용하는 것 기존에 존재하는 것 위에 감싸서 좀 더 간편하게 API를 사용하는 것을 syntactic sugar라고 부름 무조건 Promise가 나쁘고 async & await를 사용하는 것이 더 좋은 것이 아님 각자 상황에 따라 용도가 다름 async // 함수 앞에 async 붙여주면 자동으로 promise로 실행 async function fetchUser(){ return 'soo'; } const user = fetchUser(); user.then(console.log); console.log(user); await Promise로..