Lpla 개발 블로그

일상

로지텍 MX마스터3 1년 사용 후기

사무용 마우스의 끝판왕이라고 할 수 있는 로지텍 MX 마스터3 1년 사용 후기를 적어 보겠다. 마우스 선정 이유 들어가기 앞서 나는 손이 큰 편이다. 가늘고 긴 손인데 그래서 작은 마우스를 오래 사용하지 못한다. 마우스는 하루 중 스마트폰보다 더 오래 쥐고 있기 때문에 나에게 맞는 마우스 선택이 중요하다고 할 수 있다. 학창 시절에는 로지텍 G1을 많이 사용했고 대학생 시절에는 레이저 데스에더 엘리트 마우스를 사용했다. 나는 7버튼 마우스를 선호한다. 그 이유는 웹서핑을 할 때 이전 페이지 / 다음 페이지 이동 버튼이 없으면 아주 큰 불편함을 느끼기 때문이다. 불필요한 손목 이동을 최소화하고 내 손목 건강을 챙기기 위해서 이 버튼들은 필수다. 서론이 길었는데 결국 로지텍 MX 마스터3 를 구매한 결정적인..

JavaScript/실전

IE11 에서 블러(Blur) 처리하기 blurify.js

일반적으로 css filter 기능으로 요소에 블러 효과를 구현하는 것은 쉽다. HTML CSS img { -webkit-filter: blur(5px); filter: blur(5px); } 결과 : 크롬 / 익스플로러 11 하지만 익스플로러에서는 이렇게나 간편하고 유용한 필터 기능을 지원하지 않는다. 우리나라의 익스플로러 점유율이 2019년 10퍼센트에서 2020년 5퍼센트로 떨어졌다고는 하지만 회사와 클라이언트 입장에서 익스플로러를 완전히 배제할 수 없는 상황이다. 개인적으로 3년이 지나면 그땐 정말 익스플로러는 고려하지 않아도 될 것 같다. 다행히 익스플로러에서 블러 기능을 구현할 수 있는 자바스크립트 라이브러리가 있다. 바로 blurify 이다. dabanlee/blurify blurify.js..

JavaScript/실전

스크롤 애니메이션 라이브러리 AOS.js

1. 소개 AOS.js는 스크롤의 움직임에 따라 요소에 애니메이션(트랜지션) 효과를 손쉽게 구현할 수 있는 자바스크립트 라이브러리다. AOS - Animate on scroll library AOS Animate On Scroll Library Scroll down michalsnik.github.io AOS.js의 장점은 굉장히 가볍다는 데 있다. 파일은 aos.css와 aos.js 2개로 동작하며 각각의 파일을 보면 코드도 간단하게 구성되어 있다. 간단하면서도 기본적인 애니메이션 효과를 모두 갖추고 있기 때문에 아주 훌륭한 라이브러리라고 할 수 있다. 2. 사용법 HTML에 아래 코드를 추가한다. 실행하려면 자바스크립트에 아래 코드를 추가한다. AOS.init(); 3. 기능설명 애니메이션 효과를 사..

HTML&CSS

[SCSS] @extend, @each, @mixin, @include

1. @extend 특정 선택자의 css 요소를 그대로 다른 선택자에 상속한다. 하지만 아래 컴파일된 css에서 확인할 수 있듯이 기존 요소에 더하여 만들어진다. css가 단순하다면 문제 없지만 복잡하고 depth가 많아질수록 어디에 생성될지 예상하기 어렵고 오류가 발생할 수 있어 사용을 자제하는 것이 좋다. SCSS .green_box { color: #fff; background-color: green; border: 4px solid #000; width: 300px; height: 300px; margin: 20px auto; } .box { @extend .green_box; background-color: blue; } Compile to CSS .green_box, .box { color: ..

HTML&CSS

[SCSS] 색상 관련 내장함수

HTML default darken lighten saturate desaturate adjust-hue opacity SCSS $red : #d8222b; div { width: 10rem; height: 10rem; margin: 1rem; display: inline-block; text-align: center; line-height: 10rem; color: #fff; font-size: 1.4rem; } .box1 { background-color: $red; } .box2 { background-color: darken($red, 30%); } .box3 { background-color: lighten($red, 30%); } .box4 { background-color: saturate(..

JavaScript/실전

[JavaScript] 반응형 이미지 좌표값 구하기(jQuery RWD Image Maps)

이미지맵으로 하나의 이미지에 위치마다 여러 개의 링크를 걸거나 여러 개의 함수를 실행할 수 있다. 하지만 반응형의 경우 좌표가 매번 달라지기 때문에 일반적인 방법으로는 사용이 어렵고 rwdImageMaps 자바스크립트 라이브러리를 통해 정상적으로 이미지맵을 사용할 수 있다. Responsive Image Maps jQuery Plugin Responsive Image Maps jQuery Plugin Allows image maps to be used in a responsive design by recalculating the area coordinates to match the actual image size on load and window.resize. Download the plugin from..

일상

아이폰12 애플 케어 플러스 가입하기

아이폰12 프로를 사전예약으로 구매한지 2달이 다가와, 얼마 전에 애플 케어 플러스에 가입했다. 나는 아이폰을 케이스도 쓰지 않고, 필름도 붙이지 않은 채 쌩폰으로 사용하다가 애플 케어 플러스로 1~2년 후에 리퍼를 받을 생각이기 때문에 애플 케어 플러스에 가입했지만 남들처럼 보호필름도 붙이고 케이스도 사용하면서 험하게 다루지 않는 일반인이라면 가입을 권하고 싶진 않다. 1. 가입기간과 보증기간 애플 케어 플러스의 가입기간은 제품과 함께 구매하지 않으면 구매일 기준으로 60일 이내이다. 이후 애플 케어 플러스에 가입하면 최대 2년까지 보증 기간이 적용된다. 가입 후 날아온 메일에 따르면 iPhone을 처음 활성화한 날짜에서 2년 후로 자동 조정된다고 하는데, 실제로는 그렇지 않고 애플 케어 플러스를 신청..

JavaScript/실전

[JavaScript] Slick.js 반응형 rows 이슈

대다수가 그렇듯 나도 캐러셀(Carousel) 라이브러리 중에 스와이퍼(Swiper.js)와 슬릭(Slick.js)을 자주 사용한다. 그런데 얼마 전 Slick을 사용하면서 아래와 같은 이슈를 겪었다. 먼저 Slick으로 한 화면에 5개의 슬라이더가 보이도록 만들었다. 그리고 반응형 작업을 위해 breakpoint 로 1280px 이하는 슬라이더가 3개만 보이도록, 그리고 768px 이하는 슬라이더가 가로 2, 세로 2 즉 2x2 = 4개가 보이도록 만들었다. 여기까지는 의도대로 잘 작동하고 있다. 하지만 768px 에서 다시 브라우저 크기를 늘리게 되면? 위 그림처럼 2줄에서 1줄로 바뀌지도 않고 좌우여백도 제대로 작동하지 않는 이슈가 생겼다. 전체 코드는 다음과 같다. 이 이슈는 rows 값을 건드릴..

JavaScript/실전

Swiper 예제 - 활성화된 슬라이드 이미지 띄우기

아래 swiper 예제를 만들어보겠다. 이 슬라이더의 특징은 가운데 슬라이드, 다른 말로 활성화된 슬라이드는 위쪽으로 떠 보이는 효과가 있다. 덕분에 활성화된 슬라이드에 집중할 수 있 수 있고 간단한 트렌지션 효과로 심심하지 않다는 장점이 있다. 단순할 것 같지만 이 같은 슬라이더를 만드려면 한 가지 난관에 부딪힌다. .swiper-slide-active { margin-top: -100px; } 활성화된 슬라이드는 .swiper-slide-active 클래스를 가진다. 이 클래스에 마진을 -100px 만큼 주면 가운데 이미지만 위쪽으로 올라가긴 하지만 슬라이더 바깥으로 벗어나지 못한다. 바로 swiper 전반에 걸쳐 overflow: hidden; 이 적용되어 있기 때문이다. 그렇다고 overflow:..

JavaScript/실전

[JavaScript] Swiper 마지막 슬라이드에서 페이지 스크롤

22-07-21 수정 기존 코드보다 더 좋은 코드를 작성했습니다. 마지막 슬라이드 뿐만 아니라 첫번째 슬라이드에서 위로 스크롤도 되고, 모바일에서 스냅도 적용됩니다. 스크롤을 막는 것은 releaseOnEdge 파라미터를 사용했고 터치를 막는 것은 touchReleaseOnEdges 파라미터를 사용했습니다. See the Pen Swiper snap & scroll when last slide - new by lpla (@lpla) on CodePen. 마땅한 문장이 떠오르지 않아서 '마지막 슬라이드에서 페이지 스크롤' 이라고 적어놨지만, '마지막 슬라이드에서 마우스 휠 이벤트 제어'가 가장 정확하고 'Swiper 마우스 휠 기능 정지' 도 나쁘지 않은 문장 같다. Swiper로 세로 스크롤(Vertic..