Lpla 개발 블로그

etc

웹사이트에 유튜브 영상을 삽입하는 여러가지 방법

iframe embed 가장 기본적인 방식이며 컴알못도 사용 가능하다는 최고 장점이 있다. 예제 1. 간단하고 쉬운 embed 방식 See the Pen 유튜브 iframe embed (1) - 기본 by lpla (@lpla) on CodePen. 예제 2. 매개변수를 사용하여 자동재생과 반복재생 추가 뿐만 아니라 유튜브에서 지원하는 매개변수를 사용하면 간단하면서도 유용한 몇 가지 기능을 사용할 수 있다. See the Pen 유튜브 iframe embed (1) - 기본 by lpla (@lpla) on CodePen. 주로 사용하는 매개변수는 아래와 같다. 매개변수 값 기능 autoplay 1 자동재생 기능 사용 mute 1 음소거 controls 0 플레이어 컨트롤러 숨김 loop 1 반복재생 기..

JavaScript/실전

[JavaScript] 클릭 이벤트로 Swiper 슬라이드 내용 변경

1. 기능 설명 탭을 클릭하면 클릭한 값과 일치하는 슬라이드만 보여주는 방법에 대해 알아보겠다. 예시를 보자. 아래와 같이 총 8개의 이미지가 있고 이것을 "음료", "빵", "과일" 로 분류하고자 한다. 그래서 "음료" 탭을 클릭했을 때는 콜라, 우유, 커피 슬라이드만 보여주고 "빵" 탭을 클릭했을 때는 햄버거, 샌드위치, 케익 슬라이드만 보여주고 "과일" 탭을 클릭했을 때는 사과, 바나나 슬라이드만 보여주고 싶다. 2. 단순 구현 단순하게 구현하는 방법은 각각 Swiper를 따로 만들어서 탭을 클릭했을 때 해당 Swiper만 보여주고 나머지는 숨기도록 하는 것이다. See the Pen 클릭 이벤트로 Swiper 슬라이드 내용 변경(좋지 않은 예시) by lpla (@lpla) on CodePen. ..

JavaScript/기초

[JavaScript] continue, break, return 차이

짧고 쉽게 설명해보겠다. 1. break break는 반복문을 즉시 빠져나온다. for (let i = 0; i < 10; i++) { if (i === 5) { console.log(`${i}에서 멈춘다.`); break; } console.log(i); } 2. continue continue는 반복문의 현재 단계를 중단하고 다음 단계를 이어서 진행한다. for (let i = 0; i < 10; i++) { if (i === 5) { console.log(`${i}에서 건너뛴다.`); continue; } console.log(i); } 실행된 코드를 보면, i가 5일 때, console.log(i)가 실행되지 않고 건너 뛴 것을 확인할 수 있다. 3. return return은 함수에 해당 값을 ..

JavaScript/실전

[JavaScript] Swiper 해상도에 따라 다른 효과 사용하기 (반응형)

Swiper를 PC 해상도에서만 사용하거나 모바일 해상도에서만 사용하는 기능을 원하면 다음 포스팅을 참고하자. Swiper 예제 - 특정 해상도에서만 사용하기 (반응형) 1. breakpoints? swiper는 breakpoints로 반응형을 지원한다. const swiper = new Swiper('.swiper-container', { slidesPerView: 1, spaceBetween: 10, breakpoints: { // 1280px 보다 클 경우 1280: { slidesPe.. lpla.tistory.com 코딩을 하다보면 다양한 요구사항에 맞닥뜨린다. 이번에는 1200px 이상의 해상도에서는 슬라이드, 1200px 미만의 해상도에서는 페이드인 Swiper 슬라이드를 만들고자 한다. 1..

JavaScript/기초

[JavaScript] 배열의 최대값 구하기

1. Math.max.apply() Math.max()는 입력받은 값 중 가장 큰 수를 반환한다. Math.max(1, 3); // 3 Math.max(1, 9, 6, 11); // 11 하지만 숫자가 아닌 배열을 사용하면 제대로 동작하지 않는다. Math.max([1, 9, 6, 11]); // NaN 배열에서 사용하기 위해서는 apply() 메서드를 같이 사용해야 한다. let array = [100, 40, 80, 120, 50, 90, 10, 20]; let result = Math.max.apply(null, array); console.log(result); // 120 2. 스프레드 연산자(...) 스프레드 연산자로 배열을 풀어서 구하는 방법도 있다. 가장 간단하지만 ES6부터 사용할 수 있..

etc

유튜브 iframe Player API 구간 반복 재생

유튜브 특정 구간을 반복 재생시켜 달라는 요청을 받았다. 처음엔 그게 될까 싶었는데 Youtube API에서 이 기능을 지원한다. 일반적으로 유튜브 영상을 첨부하는 iframe 태그를 사용하는 방식으로는 안되고 iframe Player API를 사용해야 한다. See the Pen 유튜브 구간 반복 자동재생 by lpla (@lpla) on CodePen. 전체 코드가 어떻게 동작하는지 궁금한 사람들은 공식 사이트를 참고하도록 하고, iframe 삽입에 대한 YouTube Player API 참조 문서 | YouTube IFrame Player API | Google Developers Embed a YouTube player in your application. developers.google.com ..

JavaScript/실전

[JavaScript] Click 이벤트 중복 해결하기

제이쿼리 resize 이벤트로 700px 이하에서만 클릭 이벤트를 적용하고 700px을 초과하면 어떠한 이벤트도 없는 버튼을 만들고자 한다. HTML button button은 클릭 이벤트를 생성할 요소, width 클래스는 윈도우 가로 크기를 볼 수 있도록 표시할 요소이다. JS let ww = $(window).width(); checkResize(); $(window).on('resize', function() { ww = $(window).width(); $('.width').text(ww); checkResize(); }); function checkResize() { if (ww

etc

윈도우 터미널 설치

Mac의 터미널과 유사한 윈도우 터미널을 마이크로소프트 스토어에서 쉽게 다운받아 사용할 수 있다. Windows Terminal 구매 - Microsoft Store ko-KR Microsoft Store에서 이 Windows 10용 앱을 다운로드하세요. 스크린샷을 보고, 최신 고객 리뷰를 읽고, Windows Terminal에 대한 평점을 비교하세요. www.microsoft.com 만약 설치가 안된다면 윈도우 설정에서 개발자 모드를 켜고 다시 설치하면 된다. 설치가 끝났다면 윈도우키(Win) + wt로 윈도우 터미널을 실행시킬 수 있다.

JavaScript/실전

[JavaScript] locomotive-scroll로 marquee 효과 만들기

1. 설치 공식 깃허브에서 받거나 npm으로 설치한다. GitHub - locomotivemtl/locomotive-scroll: 🛤 Detection of elements in viewport & smooth scrolling with parallax. 🛤 Detection of elements in viewport & smooth scrolling with parallax. - GitHub - locomotivemtl/locomotive-scroll: 🛤 Detection of elements in viewport & smooth scrolling with parallax. github.com npm install locomotive-scroll 이후 locomotive-scroll.css와 loco..

HTML&CSS

[CSS] IE에서 position: sticky 사용하기

1. position: sticky 소개 position: sticky는 평소에 static 속성을 유지하다가 스크롤이 부모 요소에 다다르면 fixed 속성으로 바뀌고, 부모 요소를 벗어나면 다시 static 속성으로 바뀌는 재미있는 CSS 속성이다. body { height: 400vh; } #parent { height: 100vh; position: relative; top: 100vh; border: 5px solid #EB514C; box-sizing: border-box; } #sticky { position: sticky; height: 200px; top: 0; background-color: #FFF4ED; } 2. 주의사항 단 sticky를 사용할 때 알아둬야 할 사항이 몇 가지 있다...