안녕하세요. 이번 포스팅에서는 이전 포스팅에서 폰트 변경에 대해서 여쭤보시는 분이 계셔서 추가로 정보를 드리기 위한 포스팅입니다. [HTML/JS/CSS] contenteditable을 이용한 editor 만들기 안녕하세요. 이번 포스팅은 HTML에 있는 contenteditable을 이용해서 editor를 만들기입니다. 만드는 방법은 아주 간단합니다. input, textarea와 같은 텍스트 입력 태그가 아닌 div와 같은 태그에 contenteditabl dev-bak.tistory.com 먼저 기존의 코드에서 폰트 사이즈와 폰트 글꼴을 선택하기 위한 Select와 폰트를 추가를 해줍니다.(기존 코드는 이전 포스팅을 참고해주세요) 폰트 추가(저는 일단 구글 폰트에 등록된 폰트를 추가했습니다) sel..

작업을 하다 보면 확장자명이 한번쯤은 일괄로 변경을 할 때가 있을수도 있을 거라고 생각합니다. 확장자명을 한번 바꿀일이 있었는데 손으로 작업을 할려면 할수도 있지만 굳이 터미널에서 명령어를 입력하면 한번에 해결이 되는데 굳이 손으로 할 필요가 있을까요? 그래도 혹시 저처럼 몰라서 손으로 일일이 하려다가 도저히 못하겠어서 찾아보고 계실 모르시는 분들을 위해서 공유를 해드립니다. find 경로 -depth -name "*.이전확장자" -exec sh -c 'mv "$1" "${1%.이전확장자}.변경할확장자"' _ {} \; # 예시 css -> scss # find ./ -depth -name "*.css" -exec sh -c 'mv "$1" "${1%.css}.scss"' _ {} \;

이전 포스팅에서 contenteditable을 이용해서 에디터를 만들기를 해보았습니다. [HTML/JS/CSS] contenteditable을 이용한 editor 만들기 안녕하세요. 이번 포스팅은 HTML에 있는 contenteditable을 이용해서 editor를 만들기입니다. 만드는 방법은 아주 간단합니다. input, textarea와 같은 텍스트 입력 태그가 아닌 div와 같은 태그에 contenteditabl dev-bak.tistory.com contenteditable로 생성한 에디터에 다른곳에 적혀 있는 텍스트를 복사해서 붙여넣으면 복사한 곳의 스타일이 그대로 복사되서 붙여넣어지는 것을 볼수가 있습니다. 이번 포스팅에서 스타일이 그대로 복사되는걸 원치 않을 경우 텍스트만 삽입되게 하려면 어..

Figma에서 Autolayout을 적용을 한 뒤에 Autolayout이 적용된 Frame위로 다른 Layer을 마우스로 끌어서 옮기게 되면 자동으로 Autolayout이 적용된 Frame 안으로 들어가게 되는게 이렇게 되면 Autolayout이 적용된 것과 별개로 따로 디자인을 해서 겹쳐놓고 싶을때 아주 불편힙니다😱 이때 스페이스(Space)를 누르고 Layer를 이동을 시키면 Frame 안으로 들어가는것을 방지할수 있습니다. 아래와 같이 빨간색 사각형 두개가 Autolayout으로 되어 있는 상태에서 파란색 사각형을 빨간색 사각형과 겹쳐지게 그냥 마우스로 드래그해서 옮길 경우 아래와 같이 파란색 사격형이 Autolayout Frame 안으로 들어가게 됩니다. 이때 파란색 사각형을 잡은 다음 스페이스를..

이번 포스팅에서는 Typescript를 이용해서 Express를 구성하는 것을 해보겠습니다. 먼저 필요한 라이브러리를 npm을 이용해서 설치를 해주겠습니다. $ npm i express $ npm i -D nodemon typescript @types/express @types/node 그리고 명령어를 통해서 typescript 환경 파일을 생성해주도록하겠습니다. $ npx tsc --init 위 명령어를 실행을 하면 tsconfig.json 파일이 생성이 됩니다. { "compilerOptions": { /* Visit https://aka.ms/tsconfig.json to read more about this file */ /* Basic Options */ // "incremental": true..

이번 포스팅에서는 Angular Material Bottom Sheet을 이용해서 특정한 동작을 했을 때 하단에서 메뉴가 올라오는 하단 메뉴를 만들어보겠습니다. Angular Material UI component infrastructure and Material Design components for Angular web applications. material.angular.io 먼저 버튼 모듈인 MatButtonModule과 하단 메뉴를 위한 MatBottomSheetModule 모듈을 추가해주도록 하겠습니다. import {BrowserModule} from '@angular/platform-browser'; import {NgModule} from '@angular/core'; import {A..