Front-end 개발

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

1.Lottie (로티) 란? 에어비앤비에서 개발한 라이브러리 입니다. After Effects(에프터 이펙트)으로 추출한 애니메이션 데이터(json)를 Bodymovin(오픈소스)를 이용하여 웹, 앱(Android, iOS React-native)에 적용할수 있습니다. 벡터기반의 애니메이션 입니다.(로티는 svg) 2.Lottie 장점 벡터기반이라 용량이 적고 해상도 저하가 없습니다.(리소스 절감) 사용자의 인터렉션에 따라 제어가 가능합니다.(ex: play,stop) 3.Lottie 단점 After Effects(에프터 이펙트)외 에 쓸만한 작업툴이 없습니다. 제작 과정이 복잡하여 숙련도가 필요합니다. 4.참고 사이트 공식홈페이지(Lottie) - https://airbnb.design/lottie/..

1.웹, 모바일 자동 분기 접속한 디바이스 체크하여 현재 location.href 끝에 "/m/"을 추가 해줍니다. 웹서버 실행 후 확인 하세요. 이 글이 도움이 되었다면 ♡(공감)를 눌러 주세요.

1.Android(안드로이드) SMS보내기 location.href = sms:수신자번호?body=보낼메세지; 2.IOS(아이폰) SMS보내기 location.href = sms:수신자번호&body=보낼메세지; 3.Android & IOS 자동 분기 실제 디바이스에서 테스트 해야 정확한 결과 확인 가능 수신자 번호는 옵션.(생략 가능) A Tag에 직접 작성하여 사용 가능 하고 함수로도 사용 가능 줄바꿈 필요시 \n 으로 구분 이 글이 도움이 되었다면 ♡(공감)를 눌러 주세요.

1. CSS Ketframes로 이미지 모션 만들기 한장씩 제작된 이미지가 아닌 한장으로 만들어진 스프라이트 이미지로 모션 구현(모션용 제작 이미지 필요) img 내 position 변경 2. 소스 및 스프라이트 이미지 (Result 탭 에서 확인가능) 3. 스프라이트 이미지 장,단점 서버에 요청을 한 번만 함 (장점) 하나의 이미지 파일만 관리 (장점) 이미지가 크다면 로딩시 오래 걸림 (단점) 이 글이 도움이 되었다면 ♡(공감)를 눌러 주세요.

1.여러개 이미지로 시퀀스(Sequence) 모션 만들기 스프라이트(Sprite) 이미지가 아닌 한장씩 제작된 이미지 여러장으로 모션 구현(모션용 제작 이미지 필요) img tag 내 src 변경 2. 소스 및 시퀀스 이미지 (Result 탭 에서 확인가능) 이 글이 도움이 되었다면 ♡(공감)를 눌러 주세요.