본문 바로가기

전체 글

(35)
[IDE] 인텔리제이 깃 클론 (IntelliJ Git Clone) 개요인텔리제이에서 Repository를 깃 클론하는 방법입니다. 깃 클론 방법1. 주소 복사 2. File -> New -> Project from Version control  3. Repository URL -> URL 붙여 넣기 -> Clone 4. Git Clone 완료
[CSS / JS] 마우스에 반응하는 메타볼 만들기 개요CSS와 JS를 사용해 다음과 같이 점성이 있는 느낌의 요소(전문용어로 메타볼)를 만들어 보겠습니다.  구현1. 방법만드는 방법은 생각보다 쉽습니다. 바로 CSS의 blur와 contrast를 사용하면 됩니다.두 가지 모두 css의 filter 속성에서 설정할 수 있는데 기능은 다음과 같습니다.blur : 적용된 요소에 가우시안 블러 효과를 적용합니다. 픽셀로 조절하며 값이 클수록 요소가 더 흐려집니다.contrast : 적용된 요소에 대비를 증가시키거나 감소시킵니다. 값이 클수록 대비가 증가하며 이 효과는 요소의 이미지나 텍스트를 더 선명하게 만들거나 시각적으로 두드러지게 만들 때 사용됩니다.위 두가지 기능을 이용해 blur로 물체를 흐리게 만든 후 contrast를 사용해 흐려진 부분까지 모두 선..
[JavaScript] 브라우저 밖 알림 기능 개요브라우저 안에서의 알림은 alert로 가능합니다. 하지만 사용자가 브라우저를 보고 있지 않다면 의미가 없기 때문에 브라우저 밖에서도 확인 가능한 알림 기능에 대해 알아봤습니다. 방법Notification방법은 바로 내장 객체인 Notification을 사용하는것 이었습니다.window.Notification은 브라우저에서 사용자에게 알림을 표시하기 위한 JS의 내장 객체입니다.이 객체를 사용하면 브라우저 밖에서도 사용자에게 알림을 보낼 수 있습니다.구현 방법은 다음과 같습니다. 구현1. 권한 요청Notification처럼 브라우저 밖에서도 js 코드가 영향을 주기 위해선 사용자의 허가가 있어야 합니다.requestPermission으로 권한 허용 여부를 물어볼 수 있습니다.코드는 다음과 같이 사용할 ..
[CSS / JS] CSS , JS 경로에 쿼리스트링을 사용하는 이유 개요웹사이트 유지보수를 하면서 한 번씩 css와 js파일을 불러올 때 경로 끝에 다음 사진과 같이 '? v=1.2'와 같은 쿼리스트링을 본 적이 있을 겁니다. 이 쿼리스트링이 왜 필요한지,그리고 어떻게 활용되는지 알아보겠습니다 요약우선 본론부터 말하면 캐시 관리를 위해서입니다.웹 브라우저는 성능 향상을 위해 파일을 로컬 캐시에 저장하는데, 이렇게 되면 웹사이트가 업데이트되어도 사용자가 최신 버전의 파일을 받지 못하는 경우가 생길 수 있습니다. 바로 그럴 때 사용자가 항상 최신의 스크립트나 스타일시트를 사용할 수 있도록 보장해 주는 게 바로 파일 경로에 주는 쿼리스트링입니다. 설명1. 캐시란 무엇인가?웹 브라우저는 웹사이트의 로딩 속도를 높이기 위해 이미 방문했던 페이지의 데이터를 로컬에 저장하는 방식을 ..

728x90