Lpla 개발 블로그

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 값을 건드릴..