Lpla 개발 블로그

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..

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..

JavaScript/기초

[JavaScript] 반복문 (for in / for of)

1. for문 let data = [1, 2, undefined, NaN, null, ""] for(let i=0; i

JavaScript/기초

[JavaScript] startsWith, endsWith, includes

string.startsWith(matchString) matchString이 string의 문자로 시작하는지 여부 확인 string.endsWith(matchString) matchString이 string의 문자로 끝나는지 여부 확인 string.includes(matchString) matchString이 string의 문자를 포함하고 있는지 여부 확인 1. startsWith() matchString이 string의 문자로 시작하는지 여부 확인 (true/false) let str = "hello world!" let matchstr1 = "hel" console.log(str.startsWith(matchstr1)); //true 2. endsWith() matchString이 string의 문..

JavaScript/기초

[JavaScript] 생성자 함수

자바스크립트 코드를 짜다 보면 비슷한 객체를 여러개 만들어야 하는 경우가 많다. 이 때 new 연산자와 생성자 함수를 이용할 수 있다. 생성자 함수는 일반 함수와 기술적으로 차이가 없기 때문에 이를 구별하기 위해 다음과 같은 규칙을 정해두고 있다. 함수의 첫 글자는 대문자 new와 함께 호출 function Member(name) { this.name = name; this.age = 29; } let member = new Member("Jin"); alert(member.name); // Jin alert(member.age); // 29 위 코드의 작동 원리는 다음과 같다. function Member(name) { // this = {}; 빈 객체가 임시로 만들어진다. // 새로운 프로퍼티를 th..

JavaScript/기초

[JavaScript] this (1)

자바스크립트에서 this는 매우 유연하게 쓸 수 있다. 메서드 내부에서 this를 사용하면 객체에 접근할 수 있다. let Jin = { 'name' : 'Jin', sayHello() { alert(this.name + " 안녕하세요."); } } let Yumi = { 'name' : 'Yumi', sayHello() { alert(this.name + " 안녕하세요."); } } Jin.sayHello(); // Jin 안녕하세요. Yumi.sayHello(); // Yumi 안녕하세요. 하지만 위 코드는 sayHello()가 Jin과 Yumi에 중복 작성되었기 때문에 깔끔하지 않다. 다음처럼 줄여 쓸 수 있다. let Jin = {'name' : 'Jin',} let Yumi = {'name' :..

JavaScript/기초

[JavaScript] 프로퍼티와 메서드와 리터럴

자바스크립트 공부를 하다 보니 프로퍼티와 메서드, 리터럴이라는 용어를 자주 접한다. 이를 짧게 정리해보았다. 프로퍼티 : 키(Key)와 값(Value)로 이루어진 객체(Object)의 일부 let member = { 'name' : 'Jin', 'age' : 30, 'country' : 'italy' } member는 객체 'name', 'age', 'country' 는 키 'Jin', 30, 'italy' 는 값 'name' : 'Jin', 'age' : 30, 'country' : 'italy' 는 프로퍼티이다. let member = { 'name' : 'Jin', 'age' : 30, 'country' : 'italy', sayHello() { alert("안녕하세요."); } } member.s..

JavaScript/기초

[JavaScript] 객체 (2)

계산된 프로퍼티 let color = prompt("색상을 정하세요."); let select = { [color]: "좋아요.", // 변수 fruit에서 프로퍼티 이름을 동적으로 받아 옵니다. }; alert( select.blue ); // color에 "blue"이 할당되었다면, 5가 출력됩니다. 단축 프로퍼티 function info(name, age) { return { name, // name : name 과 같다. age // age : age 와 같다. }; } let user = info("Jin", 29); alert(user.name); // Jin 프로퍼티 조회 let user = { name: "Jin", age: 29, region: "Seoul", gender: "Man" }..