웹 썸네일형 리스트형 (JS/JQuery) 전체화면, 특정 요소의 스크롤 위치 퍼센트 계산하기 기본적으로 위치 퍼센트 계산은 { (현재 스크롤 상단 위치좌표) / (스크롤 길이를 제외한 기준 스크롤 높이값) * 100 } %가 됩니다. 예를 들어서 봅시다. 스크롤 길이를 제외한 기준 스크롤 높이값을 100이라고 해봅시다. (편의상 이하 예시에선 기준 스크롤 높이값으로 줄여 말합니다.) 현재 스크롤이 최상단에 있으면 - 상단 위치좌표 = 0 - 기준 스크롤 높이값 = 100 으로 결과값은 0/100*100 = 0%가 됩니다. 좀 더 움직여서 스크롤을 반쯤 움직였습니다. 그러면 - 상단 위치좌표 = 50 - 기준 스크롤 높이값 = 100 으로 결과값은 50/100*100 = 50% 가 됩니다. 그럼 이제 코드를 봅시다. 1. 전체 화면의 스크롤 위치를 계산할 때 기준 스크롤 높이값은 '문서 높이'와 .. 더보기 Git 자주쓰는 명령어 업로드 관련 *스테이징 git add 파일명 git add . //모든 수정파일 스테이징 *메모포함 커밋 git commit -m "할말" *저장소에 올리기 git push origin 브랜치명 다운로드 관련 *저장소에서 받아오기 git pull origin 브랜치명 상태, 기록 관련 *상태체크 git status *로그 한줄로 보기 git log --oneline *로그 최근 n개만 보기 git log -n 변경사항 관리 *로컬에서 add 취소 (unstage로) git reset *로컬에서 커밋 취소 (기존 커밋 내역은 stage 상태로) git reset --soft HEAD^ *특정 파일만 변경사항 되돌리기 $ git checkout -- 파일명 *현재 연결된 저장소 확인 git remote -v 더보기 반응형 웹 단계별 해상도(나누는 크기 기준) 1. 모바일: 320~767px 2. 타블렛/랩탑: 768~1199px 3. PC: 1024px~ 또는 1200px~ 각 기기별로 화면 볼 수 있는 사이트 http://responsive.pixeltuner.de/ 모바일 디바이스별 개발 해상도 및 Pixel Ratio 정리글 (2019 기종) https://www.burndogfather.com/185 Pixel Ratio 계산방법 https://feel5ny.github.io/2018/05/13/mediaQuery_01/ +모바일 웹 작업 시, 양손 터치 기능 가능/불가능 여부 신경써야함. +iOS는 숫자 클릭 시 전화걸리는 경우 있음. 더보기 [React] 리액트 Attempted import error: './App' does not contain a default export (imported as 'App') 에러 리액트 연습 프로젝트 중 이런 오류가 발생했는데 검색해보면 왠지 잘 안나오길래 백업 겸 써둔다. 알고보니 기본 생성되는 App.js에서 뒷부분 코드를 지우다가 export default App; 을 삭제해버려서 그런거였다. 문장 그대로 default export가 없을 때 뜨는 에러인 듯 하다. 해당 코드를 다시 추가해주니까 해결되었다. 더보기 JS ES5+ 정리 노트 ✔ 데이터 타입 Data Type 변수 - JS는 Dynamic Typing 언어. 변수 선언 시 타입을 선언하지 않으며, 런타임에 타입이 결정됨. 변수에 넣어진 값에 따라 타입이 중도 변경됨. * var - 선언되지 않아도 에러없이 undefined로 값을 넣어서 나옴 - var hoisting 때문에 값부터 넣고 선언해도 값이 나옴. (어디에 선언했든 상관없이 선언을 끌어올려줌.) - block scope가 없음. * let (ES6에서 추가) - Mutable Datatype (r/w) - block scope가 있음 : block 안에서 선언된 변수는 바깥에서 변수 접근 불가 *const (ES6~) - Immutable Datatype (r) - 값을 할당 후 변경하지 않는 데이터는 여기에 - .. 더보기 VS Code 단축키 / 숏컷 -개인 백업용, 수시 갱신됨 ▶해당 줄 위아래 라인으로 이동 : alt + 방향키(↑또는 ↓) ▶해당 줄 복붙 : Shift + alt + 방향키(↑또는 ↓) ▶여러 라인에 동시 커서 놓기 : Ctrl+ alt + 방향키(↑또는 ↓) 또는 alt+마우스로 원하는 곳 클릭 ▶해당 줄 주석 처리 : Ctrl + / ▶이전 커서 위치로 커서 이동 : Ctrl + U ▶해당 줄 중간에서 끝줄 엔터+아래줄로 넘어가기 : Ctrl + Enter ▶Tab키 반대방향 작용 (=들여쓰기 레벨 낮추기) : Shift+Tab ▶블록한 라인들 끝에 커서 놓기 : Shift+Alt + I 또는 Shift+Alt +마우스 드래그 ▶블록한 요소와 같은 이름의 요소 선택 : (블록잡은 상태에서) Ctrl+D (커맨드 반복입력) ▶C.. 더보기 이전 1 2 3 4 5 다음
