반응형 [Web] 자바스크립트 KeyCode 검색 사이트 https://www.toptal.com/developers/keycode/for/e JavaScript Key Code for KeyE | Toptal® 0 - That key has no keycode3 - break8 - backspace / delete9 - tab12 - clear13 - enter16 - shift17 - ctrl18 - alt19 - pause/break20 - caps lock21 - hangul25 - hanja27 - escape28 - conversion29 - non-conversion32 - spacebar33 - page up34 - page down35 - end3 www.toptal.com 모든 키코드를 얻을 수 있는 유용한 사이트입니다. 웹앱에서 키입력을 써.. 2022. 9. 13. [Web] 모바일 웹처럼 부드러운 스크롤 효과 개요 부드러운 모멘텀 스크롤은 사용자가 스크롤을 멈춘 후 마치 운동량이 있는 것처럼 웹 페이지의 콘텐츠가 부드럽게 계속 이동하는 일종의 스크롤 동작을 말합니다. 이렇게 하면 모바일 장치에서 스크롤하는 것과 유사한 느낌의 보다 자연스럽고 유동적인 스크롤 환경을 만들 수 있습니다. 사용자가 스크롤 막대 또는 트랙패드를 놓으면 갑자기 중지되는 기존 스크롤과는 달리 부드러운 스크롤은 물리 기반 알고리즘을 사용하여 콘텐츠의 속도와 가속도를 계산하여 부드럽고 연속적인 스크롤 모션을 만듭니다. 이렇게 하면 사용자가 긴 페이지나 내용 목록을 더 쉽게 탐색할 수 있으며 웹 사이트의 전반적인 사용자 환경을 개선할 수 있습니다. 부드러운 운동량 스크롤은 스마트폰이나 태블릿과 같은 터치 지원 장치에서 종종 사용되지만, Jav.. 2022. 9. 8. [Web] Web App 웹앱이란? 본 포스팅은 웹앱 강의를 들으면서 정리한 내용입니다. 입문자 강의다보니 내용이 광범위하고 목차처럼 단순했습니다. 강좌의 컨텐츠 AWS EC2 서버 구축 HTML, CSS, JS, Jquery Node.js 웹서버 구축 Cordova 인터넷의 정의 Inter + Network의 합성어 정보 공유를 위해 컴퓨터와 통신망을 연결한 거대한 네트워크 작은 네트워크도 인터넷과 연결될 수 있다면 모두 인터넷이라 칭합니다. 역사 발전 과정은 군사적 목적 - 학술적 목적 - 상업적 용도의 순서였습니다. TCP/IP 방식으로 NSFnet이 개발된 것이 시초가 되었습니다. 프로토콜이란? 컴퓨터나 통신 장비 사이에서 메시지를 주고 받는 양식과 규칙 체계입니다. 패킷 전송 방식이란? 패킷은 대용량의 정보를 효과적으로 전달하기 .. 2022. 9. 6. [Web] 드래그 복사 방지법 HTML, CSS, JS로 원천봉쇄 물론 우회적으로 뚫는 방법들이 있겠지만 이것이 최선입니다. 이 글은 모든 방법을 적용해서 컨텐츠를 보호할 수 있도록 도와드립니다. 자바스크립트 드래그 방지는 확장 프로그램으로 쉽게 끌 수 있기 때문에 CSS와 HTML을 통한 방법도 병행했습니다. HTML oncontextmenu = "return false" : 우클릭 방지 onseletstart = "return false" : 마우스 드래그 방지 ondragstart = "return false" : 이미지 복사 드래그 방지 onkeydown = "return false" : 키보드 단축키 복사 방지 CSS body, html에 적용합시다. /*텍스트 선택 불가*/ -webkit-user-select: none !important; -moz-user.. 2022. 9. 5. [Web/CSS] 모바일 CSS 수직 중앙 정렬하기 모바일 웹은 상단바와 하단 네비게이션 바로 인해 100vh가 화면 전체를 의미하지 않습니다. 때문에 PC에서처럼 vh로 세로 가운데로 정렬할 수 없습니다. 이럴 때 사용자 정의 스타일로 문제를 해결할 수 있습니다. 모바일 수직 중앙 정렬 방법에 대해 포스팅하겠습니다. JavaScript : 새롭게 "--vh" 스타일을 정의 function setScreenSize() { //먼저 뷰포트의 실제 높이를 100등분하여, 새로 정의할 1 vh의 값을 얻습니다. let vh = window.innerHeight * 0.01; //--vh를 키워드로 삼아서 활용합니다. document.documentElement.style.setProperty('--vh', `${vh}px`); } setScreenSize();.. 2022. 9. 5. [Web/CSS] 반응형 정사각형 만들기 반응형 정사각형 만들기 반응형 정사각형이란 '사각형의 가로길이가 화면의 width에 대해 %'로 되어있고 '세로길이는 가로와 같아야' 합니다. 즉 가로길이는 변동하고 세로길이는 가로와 똑같아지면서 정사각형이 되는 것입니다. 자주 사용하지만 해당하는 문법이 정해진 게 없습니다. 따라서 우회적인 방법으로 구현해야 합니다. html 컨텐츠를 감쌀 box div를 만들고 안에 컨텐츠를 넣는다. CSS 구현 과정 감싸는 box의 사이즈를 설정합니다. after로 가상요소를 만듭니다. padding-bottom을 100%를 줍니다. 정사각형이 되는 이유는 padding-bottom이 width 값을 따르기 때문입니다. 박스 안에 요소가 들어가 있는 경우에는 다음과 같이 크기와 포지션을 조정합니다. .content .. 2022. 9. 5. [Web] GSAP 간단한 애니메이션 만들기 선을 따라가는 애니메이션을 제작해보면서 motionPath 플러그인을 알아보겠습니다. 레거시에서 GSAP3로 MorphSVG는 GSAP 버전 2용으로 만들어졌습니다. 이후 많은 개선 사항이 포함된 GSAP3가 나왔습니다 GSAP3 motionPath를 사용하는 것이 좋습니다. GSAP3 모션패스 플러그인 https://greensock.com/motionpath MotionPathPlugin Animate anything (SVG, DOM, canvas, generic objects, whatever) along a motion path in any browser. Define the path using an SVG or an Array of points. The magical "align" featur.. 2022. 9. 5. [Web] APNG 투명도 있는 영상 / 애니메이션 만들기 APNG 만들기 투명도가 있는 애니메이션을 연구하다가 APNG 포맷을 선택하게 되었습니다. PNG를 기반으로 애니메이션 효과를 이용합니다. 구글이 WebM과 WebP를 제공하면서 투명도가 있는 영상을 도입하려고 했지만 APNG에 비해서는 호환성이 낮은 편입니다. APNG도 완벽하지는 않지만 모던 브라우저에서는 거의 돌아갑니다. APNG는 지원 불가능한 경우 첫 번째 이미지를 노출이라도 시켜줍니다. 현제 개인적으로 제작하고 있는 웹앱(web app)의 과정을 기반으로 APNG를 만드는 방법을 소개하고자 합니다. 포토샵을 이용해 APNG 만들기 애니메이션 타임라인을 작성하신 후 Render Video로 들어갑니다. 포맷은 PNG로 하시면 이미지 시퀀스가 출력됩니다. APNG Assembler 설치 https.. 2022. 9. 2. [Web] 미디어 쿼리 기기별 해상도 분기점 미디어 쿼리로 모바일 해상도에 대응할 때 어떤 기준을 적용할지 애매할 수 있습니다. 많은 개발자들이 크로스브라우징을 연구하면서 찾은 기기별 해상도 분기점을 참고하면 도움이 될 것입니다. 모바일부터 데스크탑까지 몇 개의 분기점으로, 어떤 해상도까지 대응할 수 있는지 알아겠습니다. (필수) 뷰포트 메타 태그 뷰포트가 있기만 하면 되니 편집해도 상관 없습니다. 미디어쿼리 템플릿 @media screen and (min-width:1024px) { /* Desktop */ } @media screen and (min-width:768px) and (max-width: 1023px) { /* Tablet */ } @media screen and (max-width:767px){ /* Mobile */ } 분기점에.. 2022. 9. 1. [Web] 미디어 쿼리로 반응형 웹사이트 구현 미디어 쿼리는 접속자의 기기에 따라 웹사이트가 반응하도록 하는 역할을 가집니다. 기기의 특성이란 화면 해상도, 뷰포트의 너비 등이 있습니다. 웹브라우징을 지원하는 모바일 기기는 너무나 다양합니다. 따라서 뷰포트의 너비에 따라 컨텐츠를 유연히 배치할 필요가 생깁니다. 미디어 쿼리는 CSS로 구현할 수 있습니다. 미디어 쿼리의 문법 구조는 이렇습니다. 조건이 만족되면 스타일이 적용되는 식입니다. 가장 간단한 구문 @media (*조건*) { *스타일* } 조건문과 스타일 @media (min-width: 800px) { .something { color: red; } } 조건문의 종류 width : 화면 너비 height : 화면 높이 device-width : 출력장치 너비 device-height : 출.. 2022. 9. 1. [Web] GSAP 스크롤하면 선을 따라가는 애니메이션 이번에는 GSAP 라이브러리에서 그래픽 소스가 선을 따라가도록 만들어주는 애니메이션 기능을 소개하겠습니다. 들어가기 전에 데모를 보고 어떤 애니메이션이 가능한지 체크해보세요. SVG란? SVG는 벡터 이미지 파일입니다. 위처럼 코드 형식으로도 표현할 수 있습니다. 여러분은 따라갈 패스를 만들거나 그려질 패스를 표현할 때 SVG를 이용하게 됩니다. 그 밖의 벡터 그래픽 소스도 물론 가능합니다. GSAP는 스크롤 양과 SVG 데이터를 연관지어줍니다. 우리는 GSAP의 몇 가지 플러그인을 이용해 다양한 효과를 구현할 수 있습니다. 이 포스팅에서는 스크롤하면 따라가는 애니메이션을 구현해 보겠습니다. GSAP 플러그인 불러오기 패스팔로잉 애니메이션을 구현하기 위해서 몇 개의 플러그인을 불러와야 합니다. 헤드 태그.. 2022. 8. 30. [Web] 투명도가 있는 애니메이션 포맷 고르기 웹페이지에 투명도 있는 애니메이션/동영상 넣기. 가장 효과적인 방법은 무엇일까요? 투명도가 없는 동영상이라면 고민할 것도 없이 video 태그와 함께 mp4를 사용하면 됩니다. 하지만 움짤과 같은 영상이고 투명도가 있다면 고민이 시작됩니다. 크로스 브라우징이 가능해야 할 것이고, 성능과 압축률이 좋아야 합니다. 이 모든 필요 사항을 실제 기기에서 테스트해서, 무엇을 사용하면 된다고 결론을 내려주면 얼마나 좋을까요? 그래서 이 포스팅을 하기로 했습니다. 결론부터 말씀드리면 APNG가 가장 괜찮습니다 사실 투명도가 있는 애니메이션, 동영상 포맷을 결정하는 데 있어 정답은 없었습니다. 왜냐하면 최선이 없기 때문입니다. 알려진 방법으로는 WebM, WebP, APNG, GIF, PNG를 여러 장 돌리기 등이 있.. 2022. 8. 30. [Web] p5.js 스케치 성능 최적화 방법으로 프레임레이트 높이기 최적화 방법 리스트 p5.min.js 를 p5.js로 변경 코드에서 익명 함수를 쓰지 말 것 아래 코드 한 줄 추가 : 예기치 않은 인수 입력을 경고하지 않음 p5.disableFriendlyErrors = true; p5 메소드보다 빠른 자바스크립트 네이티브 코드를 활용 Chrome, running methods 10000000x times: p5.random took: 283.88ms Math.random took: 190.01ms p5.sin took: 481.14ms Math.sin took: 338.33ms p5.min took: 781.41ms Math.min took: 538.15ms p5 Editor, running methods 10000000x times: p5.random took: .. 2022. 8. 26. [Web] GSAP 메소드 매개변수와 효과의 종류 Transform gsap 메소드의 매개변수로 var 변수를 받는다. 매개변수들 중 CSS Transform에 접근하는 방법을 표로 보여주고 있다. GSAP CSS Explanation x: 100 transform: translateX(100px) Move horizontally (px or SVG units) y: 100 transform: translateY(100px) Move vertically (px or SVG units) xPercent: -50 transform: translateX(-50%) Move horizontally (percentage of element's width) yPercent: -50 transform: translateY(-50%) Move vertically (p.. 2022. 8. 26. [Web] GSAP 객체 기본 사용 방법 gsap 객체 GSAP는 모션 보간Tween을 하기 위해 gsap 메소드를 사용합니다. Tween은 그럼 어떤 변수를 조작할 수 있을까요? DOM요소가 가지고 있는 대부분의 속성을 조작할 수 있습니다. 우리는 투명도, 위치, 숫자, 문자처럼 변경될 가능한 값을 대부분 움직일 수 있습니다. 트윈을 만드는 세 가지 일반적인 방법을 알아보겠습니다. gsap.to() 가장 일반적인 유형으로 대상 값을 어딘가로 다가가게 하는 값입니다. 예제 코드는 box 클래스를 1초 동안 회전(+27도) 및 이동(x+100)시킵니다. gsap는 현재 값을 자동으로 파악합니다. 시작값이 필요하지 않습니다. gsap.to(".box", {rotation: 27, x: 100, duration: 1}); gsap.from() DOM.. 2022. 8. 26. 이전 1 2 다음 반응형
