Front-end 개발

1.포토샵 드롭섀도 CSS 전환 해주는 사이트로 접속합니다. http://psd-to-css-shadows.com/ Convert Photoshop Drop Shadows to CSS3 Box and Text Shadows CSS3 Code box-shadow: offset-x offset-y blur-radius spread-radius rgba(0, 0, 0, opacity) inset; text-shadow: offset-x offset-y blur-radius rgba(0,0,0 opacity); box-shadow: offset-xpx offset-ypx blur-radiuspx spread-radiuspx rgba(0, 0, 0, opacity) inset; te psd-to-css-shado..

1.is unrecognized in this browser 에러가 날 경우 의미없는 대신 을 사용하면 콘솔오류가 없어집니다. 2.is using incorrect casing 에러가 날 경우 첫 문자를 대문자로 사용해야 합니다.(React 구성 요소에는 PascalCase를 사용하고 있습니다.) ※ PascalCase(파스칼 표기법)란? 모든 단어의 첫글자가 단어수와 상관없이 대문자로 시작합니다. 예) PascalCase 이 글이 도움이 되었다면 ♡(공감), 광고 눌러 주세요. 큰 도움이 됩니다.

1.웹 글꼴이란? 사용자 디바이스에 글꼴이 설치되 있지 않아도 웹 브라우저에서 사용할수 웹 전용 글꼴입니다. 2.웹 글꼴의 장,단점? 장점 : 사용자 디바이스에 폰트가 없어도 의도한 폰트로 보여줄수 있습니다. 단점 : 폰트 파일을 다운받아 적용시켜야 함으로 웹사이트 로드시 속도 저하가 발생합니다. 3.웹 글꼴 종류 TTF : True Type Font, 트루타입 글꼴이다. 1980년대 마이크로소프트와 애플이 어도비에 대항하기 위해 만든 글꼴 저장 형식. 한때 비트맵을 대체하여 Windows 글꼴이 대부분 이 형식이었으나 지금은 레거시 기술로 넘어가고 최신 Windows의 기본 글꼴은 대부분 OTF로 대체되었다. 제어점이 3개인 2차 베지어 곡선(Quadratic Bezier)을 사용한다. 출처 : htt..

원인 : Swiper 사용시 비노출(display :none) 요소에 사용하면 에러가 발생한다. 방법1. 해당요소와 부모요소를 감지하여 DOM에 변화가 생기면 초기화 하는 메서드를 추가 시켜줍니다.(observer : true, observeParents : true ) 방법2. display : block 시 swiper init 후 display : none 시 destroy(초기화) 시켜 줍니다. 방법3. CDN버전7이상 사용하면 됩니다.(작성기준 최신버전 8.4.4 ) (https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js) 결론 : 최신 버전의 Swiper(CDN)를 사용한다면 별도의 메서드 추가 없이 정상 작동 된다. 이 글이 도움이 되었다면..

1. 라이브러리 설치하기 npm을 이용하여 react-lottie 라이브러리를 설치합니다. npm을 이용하여 @lottiefiles/react-lottie-player 라이브러리를 설치합니다. npm install --save react-lottie //예제1 npm install --save @lottiefiles/react-lottie-player //예제2 yarn add @lottiefiles/react-lottie-player //예제2 설치후 @lottiefiles/react-lottie-player를 import 시켜줍니다. import Lottie from 'react-lottie'; //예제1 import { Player } from '@lottiefiles/react-lottie-pla..

1.export default 선언된 모듈에 하나의 변수,클래스,함수만 export할수 있다.(한개) import할때는 원하는 이름으로 가능하다. /* Main.js */ export default Main; /* App.js */ import Main from "./main.js" 2.export(=named export) 선언된 모듈에 변수,클래스,함수 export할수 있다.(여러개) import할때는 원하는 이름으로 불가능하다. import 시 {}안에 export 된 이름과 동일하게 해야 한다. /* Main.js */ export let Run1 = () =>{ console.log(1); } function Run2(){ console.log(2); } export Run2, /* App.js..

1.구글 애널리틱스 계정(ID) 발급 받기 발급 시 'Google 애널리틱스 4 속성과 유니버설 애널리틱스 속성 둘 다 만들기'로 선택하기 관리 → 속성설정 → 추적ID → UA-XXXXXXXX-X 확인하기 2.useEffect() Hooks을 사용하여 GA설정 하기 https://www.npmjs.com/package/react-ga $ npm install react-ga --save //react-ga Module 설치하기 import React, { useEffect } from "react"; import ReactGA from "react-ga"; export default function Example() { const ga_setting = () => { const pathName = wi..

1.클립보드(clipboard.js)로 복사하기 input 입력 값 복사하기 textarea 입력 값 복사하기 지정된 text 값 복사하기(버튼) data-clipboard-target : 타켓이 되는 앨리먼트 ID값을 넣어 줍니다. data-clipboard-text : 복사 하고 싶은 텍스트 값을 넣어줍니다. 이 글이 도움이 되었다면 ♡(공감)를 눌러 주세요.

1.스크롤 올릴때 헤더,네비 고정하기 고정할 태그는 자유롭게 변경하여 사용합니다. 스크롤 올릴때 nav, header 높이를 지나는 순간부터 숨김 처림 됩니다. (예제소스에서는 class로 제어했습니다. 직접 css로 제어해도 무관) 이 글이 도움이 되었다면 ♡(공감)을 눌러 주세요.

1. console.log TEXT 노출, CSS 적용 하기 개발 작업시 가장 많이 사용하지만 console 을 이용하여 콘솔창 꾸미기가 가능합니다. 미리 스타일을 지정하고 포매팅 합니다. const font_style=` font-family:verdana; color:#FF6D00; font-size:20px; background:black; background-color:#9C27B0; line-height:1.3; padding:0; border-radius:0; `; console.log('%chttps://ttowa.tistory.com/', font_style );​​ console.log 관호 안에 텍스트와 스타일을 지정 합니다. console.log('%cttowa.tistory.com'..