본문 바로가기
반응형
[Web] 모바일 웹처럼 부드러운 스크롤 효과 개요 부드러운 모멘텀 스크롤은 사용자가 스크롤을 멈춘 후 마치 운동량이 있는 것처럼 웹 페이지의 콘텐츠가 부드럽게 계속 이동하는 일종의 스크롤 동작을 말합니다. 이렇게 하면 모바일 장치에서 스크롤하는 것과 유사한 느낌의 보다 자연스럽고 유동적인 스크롤 환경을 만들 수 있습니다. 사용자가 스크롤 막대 또는 트랙패드를 놓으면 갑자기 중지되는 기존 스크롤과는 달리 부드러운 스크롤은 물리 기반 알고리즘을 사용하여 콘텐츠의 속도와 가속도를 계산하여 부드럽고 연속적인 스크롤 모션을 만듭니다. 이렇게 하면 사용자가 긴 페이지나 내용 목록을 더 쉽게 탐색할 수 있으며 웹 사이트의 전반적인 사용자 환경을 개선할 수 있습니다. 부드러운 운동량 스크롤은 스마트폰이나 태블릿과 같은 터치 지원 장치에서 종종 사용되지만, Jav.. 2022. 9. 8.
[Tips] 리눅스 쉘 기본 명령어 사용법 개요 Linux 쉘은 사용자가 텍스트 기반 명령을 사용하여 운영 체제와 상호 작용할 수 있는 강력한 CLI 입니다. 처음에는 어려워 보일 수 있지만 Linux 쉘 명령의 기본 사항을 학습하는 것은 파일, 폴더 및 시스템 리소스를 관리하는 데 매우 유용할 수 있습니다. Linux 셸을 사용하려면 터미널 창을 열어야 합니다. 이 작업은 일반적으로 Linux 데스크톱 환경에서 "터미널"을 검색하거나 "Ctrl + Alt + T" 바로 가기 키를 눌러 수행할 수 있습니다. 알아야 하는 이유 1. 효율성과 생산성 리눅스 셸 명령의 기본 사항을 학습함으로써 프로그래머는 리눅스 기반 시스템에서 작업할 때 효율성과 생산성을 높일 수 있습니다. 간단한 명령줄 구문을 사용하여 디렉토리를 빠르게 탐색하고 파일을 검색하며 다.. 2022. 9. 8.
[3ds Max] 유용한 모델링 모디파이어 Modifier 정리 2022. 9. 8.
[Web] Web App 웹앱이란? 본 포스팅은 웹앱 강의를 들으면서 정리한 내용입니다. 입문자 강의다보니 내용이 광범위하고 목차처럼 단순했습니다. 강좌의 컨텐츠 AWS EC2 서버 구축 HTML, CSS, JS, Jquery Node.js 웹서버 구축 Cordova 인터넷의 정의 Inter + Network의 합성어 정보 공유를 위해 컴퓨터와 통신망을 연결한 거대한 네트워크 작은 네트워크도 인터넷과 연결될 수 있다면 모두 인터넷이라 칭합니다. 역사 발전 과정은 군사적 목적 - 학술적 목적 - 상업적 용도의 순서였습니다. TCP/IP 방식으로 NSFnet이 개발된 것이 시초가 되었습니다. 프로토콜이란? 컴퓨터나 통신 장비 사이에서 메시지를 주고 받는 양식과 규칙 체계입니다. 패킷 전송 방식이란? 패킷은 대용량의 정보를 효과적으로 전달하기 .. 2022. 9. 6.
[Unity] 무료버전 유니티 스플래시 화면 로고 제거 감추는 방법 무료 버전에서 유니티 로고를 지울 수 없다는 것을 알고 계실 것입니다. 그래서 방법을 열심히 찾아보시다가 여기에 오셨을 거라 생각합니다. 유니티 정책 상 우리는 로고를 제거하지 못하도록 되어 있습니다. 스플래시 화면은 유니티의 시작화면에서 유니티 로고가 뜨는 장면을 말합니다. 스플래시 로고를 지워야만 하는 경우에 당혹스러우실 수 있습니다. 저는 이 문제를 해결하기 위해 해외 포럼을 마구 뒤져보다가 결국 유니티 내부적으로는 방법이 없다는 결론에 이르렀습니다. 유니티 로고를 제거할 수 있는 우회적인 방법을 고안하게 되어 포스팅합니다. 유니티 프로그램을 해킹하는 방법이 있을까 했습니다. 그래서 hack, crack, mod 등의 키워드와 함께 검색했지만 여전히 방법을 찾을 수 없었습니다. 해외 포럼의 답변은 .. 2022. 9. 6.
[3ds Max] 주요 단축키 모음 https://knowledge.autodesk.com/support/3ds-max/getting-started/caas/CloudHelp/cloudhelp/2022/ENU/3DSMax-Basics/files/GUID-A73E1B09-7BFE-4A22-8153-1D3D2237B8E9-htm.html Keyboard Shortcut Tables | 3ds Max 2022 | Autodesk Knowledge Network The following tables provide a main reference for all default keyboard shortcuts included with Max 2020.1 and higher knowledge.autodesk.com a Toggle Angle Snap o.. 2022. 9. 5.
[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.
[Tips] 오토핫키로 프로그램을 실행 오토핫키가 처음이라면 이 문서부터 읽어보세요. [Tips] 오토핫키 기본 사용법 오토핫키는 윈도우용 무료 오픈소스 스크립팅 언어입니다. 쉽게 배울 수 있고 간단한 명령부터 복잡한 명령까지 자동화시킬 수 있는 도구로 이미 많은 사람들이 이용하고 있습니다. 스크립트는 ifhead.tistory.com Run과 RunWait 명령어로 실행가능한 대상을 실행할 수 있습니다. F2:: { Run, Calc } F2를 누르면 계산기를 실행합니다. F2:: { Run, C:\ } 폴더를 엽니다. F2::{ Run, https://ifhead.tistory.com/ } 사이트를 엽니다. Run / RunWait의 매개변수 Run, Target [, WorkingDir, Options, OutputVarPID] RunW.. 2022. 9. 4.
[Tips] 오토핫키 창 크기 및 위치 조절 오토핫키가 처음이라면 이 문서부터 읽어보세요. [Tips] 오토핫키 기본 사용법 오토핫키는 윈도우용 무료 오픈소스 스크립팅 언어입니다. 쉽게 배울 수 있고 간단한 명령부터 복잡한 명령까지 자동화시킬 수 있는 도구로 이미 많은 사람들이 이용하고 있습니다. 스크립트는 ifhead.tistory.com 이동 및 창 크기 변경 WinMove, WinTitle, WinText, X, Y , Width, Height 단순 이동 WinMove, X, Y WinTitle 창 제목 WinText 존재하는 경우이 매개 변수는 대상 창의 단일 텍스트 요소 (포함 된 Window Spy 유틸리티에 의해 표시됨)의 하위 문자열이어야합니다. DetectHiddenText가 켜져 있으면 숨겨진 텍스트 요소가 감지됩니다. (일반적으.. 2022. 9. 3.
[Tips] 오토핫키 기본 사용법 오토핫키는 윈도우용 무료 오픈소스 스크립팅 언어입니다. 쉽게 배울 수 있고 간단한 명령부터 복잡한 명령까지 자동화시킬 수 있는 도구로 이미 많은 사람들이 이용하고 있습니다. 스크립트는 간단하고 유연한 문법을 가지고 있습니다. 지금부터 오토핫키 기본 사용법을 포스팅하겠습니다. 오토핫키 설치 https://www.autohotkey.com/download/ AutoHotkey Downloads www.autohotkey.com 오토핫키 인스톨러를 다운받아 설치합니다. 설치툴에서 Express Installation을 선택해줍니다. 설치만 하면 간단하게 이용할 수 있으니 천천히 따라해 보시길 권합니다. 오토핫키 스크립트 생성 새로 만들기에서 오토핫키 스크립트를 생성할 수 있습니다. 이 스크립트를 이용해서 모든.. 2022. 9. 3.
[OOP] 좋은 코드 당신이 생각하는 좋은 코드는? 당신이 어떤 종류의 코드를 작성하는 사람인지 알지 못하지만 한 가지는 확신할 수 있습니다. 당신은 코드를 통해 어떠한 대상과 소통하고 있습니다. 코드는 하드웨어, 소프트웨어, 때로는 다른 프로그래머와 대화하기 위해서 작성됩니다. 당신이 나열한 글자들은 질서를 가지고 의미를 만들어 냅니다. 저는 이 글자들이 일하는 방식에 관심이 많습니다. 자연스럽게 더 좋은 방식을 찾는 일에도 흥미를 가지게 되었습니다. 좋은 코드가 무엇인지에 대한 견해를 정리해보고자 이 글을 씁니다. 프로그래밍을 더 친숙하게 바라봅시다. 웹, 게임, 임베디드와 같은 세세한 구분을 걷어내면 프로그래밍은 결국 무엇입니까? 프로그래머가 실제로 하는 일은 글자를 타이핑하는 일입니다. 우리는 글을 쓰는 사람들입니다... 2022. 9. 2.
[Unity] 유니티 스크롤 뷰 Scroll View 사용법 ㅇUnity에서 UI를 작업할 때 난감한 부분들이 많이 있습니다. 그 중 하나가 스크롤 뷰였습니다. 저는 유니티 스크롤 뷰가 유니티에 없을 때 직접 구현하느라 애를 먹었습니다. 전에는 UGUI가 없어서 NGUI플러그인이 필요했습니다. 이젠 UGUI가 NGUI에서 할 수 있던 많은 기능을 가지게 되고 발전하면서 완전히 대체되어가고 있습니다. 스크롤 뷰는 컨텐츠와 스크롤로 구분되며 그 안에는 UI 요소들이 배치됩니다. 이 모든 것을 유니티 컴포넌트에서 자동으로 설정할 수 있도록 도와줍니다. 저는 스크롤 뷰 컴포넌트로 다음과 같은 데모를 만들었습니다. ​이 포스팅에서는 유니티 스크롤 뷰 Scroll View 컴포넌트를 사용하는 방법을 다뤄 보겠습니다. 캔버스 캔버스를 생성하고 UI > Scroll View를 .. 2022. 9. 2.
반응형

티스토리툴바