개인공부 54

[Markdown에디터] Typora or Mark Text

마크다운 에디터 중 Typora가 무료였으나 현재 유료로 결제를 해야함. 일단 사용하기 편했음 메모장 같은 가벼운 느낌 https://typora.io/ Typora — a markdown editor, markdown reader. Readable & Writable Typora gives you a seamless experience as both a reader and a writer. It removes the preview window, mode switcher, syntax symbols of markdown source code, and all other unnecessary distractions. Instead, it provides a real live preview typora.io ..

개인공부/기타 2022.01.27

[JS라이브러리] Swiper 슬라이드 만들기

슬라이드를 보다 쉽게 만들어 주는 JS라이브러리 Swiper https://swiperjs.com/ Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com - 사용법 https://swiperjs.com/get-started Getting Started With Swiper Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazin..

개인공부/기타 2022.01.26

[JS라이브러리] gsap 애니메이션 효과 라이브러리

요소를 제어하여 애니메이션 효과를 줄 수 있는 라이브러리 https://cdnjs.com/libraries/gsap gsap - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers GSAP is a JavaScript library for building high-performance animations that work in **every** major browser. Animate CSS, SVG, canvas, React, Vue, WebGL, colors, strings, motion paths, generic objects...anything JavaScript can touch! ..

개인공부/기타 2022.01.25

[JS라이브러리] Lodash로 스크롤이벤트제어

JS라이브러리인 Lodash를 사용하여 스크롤이벤트 제어 스크롤이벤트를 제어하여 과부하를 방지하도록 한다. Lodash cdn을 검색해서 복사 붙여넣기하여 연결 https://cdnjs.com/libraries/lodash.js lodash.js - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers A utility library delivering consistency, customization, performance, & extras. - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-so..

개인공부/기타 2022.01.24

[GIT] 깃허브 폴더에 화살표 표시(접근불가)

init을 폴더 하위폴더와 상위폴더에서 실행을하여 .init파일이 두군데에 생성된 경우 발생하는 오류인듯 하다. 블로그를 참조해서 아래의 명령대로 실행하니 정상작동한다. 하위폴더로 이동을 해서 $ rm -rf .git 명령어로 해당 .git 파일 제거하고 상위폴더로 이동 > cd .. > git rm --cached . -rf (스테이지에 있는 파일 제거) 명령어를 실행 후, 다시 add commit push를 하니, 정상적으로 작동한다. 참조한 블로그 https://jgjg.tistory.com/m/21 깃허브 화살표 폴더오류 우선 오류가 발생하게 된 상황의 서순 : 1. 원래 최상위 레포지토리 'MUTSA' 폴더 안에 깃허브 블로그를 html과 css로 작성하던 'Blog'라는 폴더가 따로 있고 과제..

개인공부/GIT 2021.07.16

[React] TypeError: Cannot read property 'prototype' of undefined 에러

아래와 같은 오류가 발생을 했는데 구글링을 해보고 원인을 찾아보니 response를 받아오는 코드가 작성된 페이지에서 vscode가 자동으로 import { response } from 'express';를 생성해주었기 때문이다. express는 node.js 부분을 위한 모듈이고 메소드처럼 꺼내서 쓸 수 없기 때문이란다. 그 페이지를 찾아서 import {response} from 'express';를 삭제하니 정상적으로 작동한다.

개인공부/React 2021.07.01

[vscode]visual studio code에서 저장시 자동으로 줄바꿈(정렬)

비주얼스튜디오 코드에서 저장시 자동으로 줄이 바뀌는 경우에 한줄에 다 작성하고 싶어도 저장하면 줄바꿈이 되고 두줄로 나눠서 작성하고 싶어도 한줄로 정렬이 되어버리는 경우가 있다. 이를 해결하는 방법으로 파일 - 기본설정 - 설정에서 formaton save 입력 체크를 해제하거나 json에서 true를 false로 수정한다.

개인공부/기타 2021.04.13

[CSS] FLEX

- 플렉스의 장점 기존의 float, inline-block으로 수평정렬을 하는 방법보다 쉽고 간편하다 inline-block 각각의 아이템들이 글자화되어서 띄어쓰기가 적용된다. 이런 문제를 해결하기 위해서 폰트사이즈를 0;으로 초기화하면 정상적으로 수평화가 된다. 만약 아이템들에 숫자를 적용한다하면 아이템 안에 있는 숫자들도 폰트사이즈가 0이되면서 표시가 안된다. 그래서 아이템부분에 font-size를 특정사이즈로 원상복귀해야한다. float 요소가 수평으로 쌓이긴 하는데 컨테이너가 각가의 요소를 담지 못하는 문제가 발생한다. 문제를 해결하기위해 컨테이너 전에 클리어픽스를 적용해야한다. flex 컨테이너 부분에 디스플레이 flex를 적용하면 바로 원하는 그림이 나온다. flex는 기본적으로 contai..

개인공부/CSS 2021.04.09

[CSS]애니메이션/다단

-animation 요소에 애니메이션을 설정/제어 값 의미 기본값 animation-name @keyframes 규칙의 이름을 지정 none animation-duration 애니메이션의 지속 시간 설정 0s animation-timing-function 타이밍 함수 지정 ease animation-delay 애니메이션의 대기 시간 설정 0s animation-iteration-count 애니메이션의 반복 횟수 설정 1 animation-direction 애니메이션의 반복 방향 설정 normal animation-fill-mode 애니메이션의 전후 상태(위치) 설정 none animation-play-state 애니메이션의 재생과 정지 설정 running 사용법 animation: 애니메이션 이름 지속시..

개인공부/CSS 2021.04.09