Front-end 개발

1. accept 속성 서버로 업로드하는 파일의 type을 명시 합니다.( ex: .jpg) 하나 이상의 확장자를 사용할 경우 콤마로 구분 합니다. ( ex: .jpg,.png,.svg) accept을 사용하지하지 않으면 모든 파일을 입력 받습니다. 확장자을 지정 하여도 사용자가 모든파일(*.*) 선택하여 올릴수 있습니다. (주의) 특정 확장자만 입력 받고 싶다면 별도 작업 필요합니다. 2. capture 속성 모바일에서 이미지 업로드 할때 사용합니다. capture 속성 값으로 전/후면 카메라를 우선 작동시킬수 있습니다. //전면카메라 //후면카메라 3. required 속성 파일이 선택 되어 있는지 확인 할 때 사용합니다. 파일 미선택 시 '파일을 선택하세요'라고 메시지가 보입니다. 4. multip..

1. HTML 2. Javascript /* 파일용량 제한*/ $("input[name=file_size").on("change", function(){ let maxSize = 5 * 1024 * 1024; //* 5MB 사이즈 제한 let fileSize = this.files[0].size; //업로드한 파일용량 if(fileSize > maxSize){ alert("파일첨부 사이즈는 5MB 이내로 가능합니다."); $(this).val(''); //업로드한 파일 제거 return; } }); ※ maxSize 설정시 참고 하세요. (데이터 크기는 1024의 제곱으로 표현합니다) 1024 = 1KB 1024 * 1024 = 1MB 1024 * 1024 * 1024 = 1GB 1024 * 1024 *..

1. ChatGPT란? GPT 3.5를 기반으로 하는 OpenAI개발사에서 만든 대화형 인공지능 서비스이다. 사용자의 대화에서 질문에 답하도록 설계된 언어모델이다. 마이크로소프트(MS)는 OpenAI개발사에 투자하였고 자사 제품 오피스(office)와 검색엔진(Bing)에 적용할 계획이다. 2. ChatGPT 사용 방법? https://openai.com/blog/chatgpt 개발사 사이트로 접속합니다. Sign up(회원가입) 합니다. (이메일 인증필요) Try ChastGPT 클릭하여 대화화면으로 이동합니다. 4. 입력창에 질문하고 싶은 텍스트를 적는다. https://ttowa.tistory.com/entry/CSS-GPT%EB%A1%9C-CSS%EC%84%A0%ED%83%9D%EC%9E%90-%..

1. 카운트업(CountUp.js)이란? 숫자모션을 만들어주는 프레임워크(frameworks)and 플러그인(plugins)입니다. Angular, React, Vue, WordPress, jquery 지원 합니다. Demo 사이트 https://inorganik.github.io/countUp.js/ 공식 Github 사이트 https://github.com/inorganik/CountUp.js 2. 사이트 제작하다고 보면 카운트 모션을 사용하고 싶을때가 있습니다. 간단한 플레임워크(frameworks)and 플러그인(plugins)을 이용하여 카운트 모션을 만들어 봅시다. 카운트모션 제작시 필요한 옵션값외 자세한 설명은 공식 Github사이트에서 확인할수 있습니다. Options (defaults i..

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'..

1. text-size-adjust 란? Viewport가 변경되면 폰트 사이즈가 변경됩니다. (아이폰의 경우 Viewport가 변경되면 자동으로 폰트를 조절) 반응형 웹사이트 제작시 폰트가 원치 않게(크거나 작음) 보이는 경우가 있습니다. 이를 방지하기 위한 방법으로 폰트를 고정 합니다. (text-size-adjust : none) 비표준 속성이므로 벤더 프리픽스를 사용 해야 합니다. Value Description auto 화면 폭에 맞게 크기가 자동으로 조절됩니다.(device별로 크기가 다를수 있어서 비추천) none(기본값) 화면 크기에 따라 자동조절 하지 않는다. percentage (%) 퍼센트(%)로 크기를 조절합니다. (모든 device에서 동일한 텍스트 크기 부여 가능) inherit..

1. 사용 방법 비교 할 이미지 2장을 HTML 내 추가 하여 줍니다. ​ 비교 슬라이드 영역은 웹, 모바일(반응형)에서 사용 가능합니다. 참고 사이트 : before-after.js GitHub - jotform/before-after.js: An Image Comparision Slider: See an example demo here: http://www.jotform.com/formscentral/ An Image Comparision Slider: See an example demo here: http://www.jotform.com/formscentral/ - GitHub - jotform/before-after.js: An Image Comparision Slider: See an examp..

1. CSS(미디어쿼리) 사용하여 브라우저 내 특정 영역만 출력(PDF) 하기 미디어 쿼리 print(프린트) 선언하기 @media print { //프린트 출력시 비노출 영역 추가하기 #header, #sec_2{display:none} }​ background(백 그라운드)사용 시 해당 속성을 보여 주게 합니다. @media print { * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } ※지원 가능 브라우저를 체크하세요. (IE, Firefox에서는 인쇄창에서 배경포함 인쇄를 선택 해야 보여집니다.) https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-print-color-a..

Scope(스코프) 란 ? 번역하면 '범위'라는 뜻을 가집니다. 즉, 변수에 접근할 수 있는 범위 입니다. 그치만 단순 범위라고 정의하면 안됩니다. 선언하는 시점에 따라 값이 달라질수 있습니다. 동작 스코프, 레벨 스코프로 나눌수 있습니다. 스코프의 종류 1.동작 -정적(Static) 스코프 Javascript는 정적 스코프 특성을 가집니다. 호출 스택과 관계없이 선언 시점에 스코프를 결정됩니다. ①레시컬(Lexical) 스코프 var name = '영수'; // 전역변수 function friend_1() { var name = '영미'; second(); } function friend_2() { console.log(name); } friend_1(); // 영수 friend_2(); // 영수 /..

1.React(리액트)란? 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용합니다. 싱글 페이지 애플리케이션(SPA)이나 모바일 애플리케이션 개발에 사용할 수 있습니다. 대규모 또는 복잡한 리액트 애플리케이션 개발에는 보통 라우팅, API통신 등의 기능이 요구되는데 리액트에는 기본적으로 제공되지 않기 때문에 추가 라이브러리를 사용해야 합니다. 2.React 특징 단방향 데이터 바인딩(One Wat Data flow) ▷리엑트는 단방향 바인딩을 사용하여 성능저하를 줄이고 더 확실하게 데이터를 추적 할수 있습니다. 가상돔(Virtual Dom) ▷싱글 페이지 어플리케이션(SPA)에서는 리플로우/리페인트거 자주 발생 되는데 가상돔을 사용하여 최소화하여 성능을 최적화 시켰습니다. 컴포넌트(..

1. GSAP(GreenSock Animation Platform)을 이용하여 브라우저 내 마우스 커서 변경하기 커스텀된 마우스 커서를 노출시키고 기본 커서는 비노출 합니다. 커스텀된 마우스 커서와 기본 커서를 함께 노출 시킵니다. 노출영역, 비노출 영역을 지정 할수 있습니다. 영역별 마우스 커서를 커스텀 할수 있습니다. 이 글이 도움이 되었다면 ♡(공감)를 눌러 주세요.