티스토리

Lpla 개발 블로그

검색하기

블로그 홈

Lpla 개발 블로그

lpla.tistory.com/m

자기개발 블로그입니다. (2019.07.15~)

구독자: 18

방명록 방문하기

반응형

주요 글 목록

웹사이트에 유튜브 영상을 삽입하는 여러가지 방법 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 반복재생 기.. 공감수 5 댓글수 1 2022. 10. 22.
[JavaScript] 클릭 이벤트로 Swiper 슬라이드 내용 변경 1. 기능 설명 탭을 클릭하면 클릭한 값과 일치하는 슬라이드만 보여주는 방법에 대해 알아보겠다. 예시를 보자. 아래와 같이 총 8개의 이미지가 있고 이것을 "음료", "빵", "과일" 로 분류하고자 한다. 그래서 "음료" 탭을 클릭했을 때는 콜라, 우유, 커피 슬라이드만 보여주고 "빵" 탭을 클릭했을 때는 햄버거, 샌드위치, 케익 슬라이드만 보여주고 "과일" 탭을 클릭했을 때는 사과, 바나나 슬라이드만 보여주고 싶다. 2. 단순 구현 단순하게 구현하는 방법은 각각 Swiper를 따로 만들어서 탭을 클릭했을 때 해당 Swiper만 보여주고 나머지는 숨기도록 하는 것이다. See the Pen 클릭 이벤트로 Swiper 슬라이드 내용 변경(좋지 않은 예시) by lpla (@lpla) on CodePen. .. 공감수 6 댓글수 0 2022. 5. 22.
[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은 함수에 해당 값을 .. 공감수 1 댓글수 0 2022. 1. 23.
[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.. 공감수 9 댓글수 1 2022. 1. 3.
[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부터 사용할 수 있.. 공감수 3 댓글수 0 2021. 12. 31.
유튜브 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 .. 공감수 1 댓글수 0 2021. 12. 27.
[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 공감수 5 댓글수 0 2021. 12. 14.
윈도우 터미널 설치 Mac의 터미널과 유사한 윈도우 터미널을 마이크로소프트 스토어에서 쉽게 다운받아 사용할 수 있다. Windows Terminal 구매 - Microsoft Store ko-KR Microsoft Store에서 이 Windows 10용 앱을 다운로드하세요. 스크린샷을 보고, 최신 고객 리뷰를 읽고, Windows Terminal에 대한 평점을 비교하세요. www.microsoft.com 만약 설치가 안된다면 윈도우 설정에서 개발자 모드를 켜고 다시 설치하면 된다. 설치가 끝났다면 윈도우키(Win) + wt로 윈도우 터미널을 실행시킬 수 있다. 공감수 1 댓글수 0 2021. 12. 6.
[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.. 공감수 5 댓글수 0 2021. 11. 24.
[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를 사용할 때 알아둬야 할 사항이 몇 가지 있다... 공감수 2 댓글수 0 2021. 11. 17.
Swiper 예제 - 첫번째 슬라이드에서 prev 기능 막기 1. 기본 구조 1 2 3 4 5 6 7 Swiper에서 loop 기능을 사용하지 않으면 첫번째 슬라이드에서 prev 버튼이 자동적으로 비활성화된다. 마찬가지로 마지막 슬라이드에서 next 버튼도 비활성화된다. 한편 loop 기능을 사용하게 되면 첫번째 슬라이드에도 이전 슬라이드가 존재하고, 마지막 슬라이드 다음에도 슬라이드가 존재하기 때문에 버튼이 항상 활성화되어 있다. 말 그대로 루프(반복)니까 당연한 현상이다. 그런데 사용자에 따라서 loop 기능을 사용하되 첫번째 슬라이드에서 prev 버튼을 비활성화하고 싶을 수 있다. 첫번째 슬라이드에서 마지막 슬라이드로 되돌아가는 것이 마음에 들지 않을 수도 있으니까. 이제 해결 방법에 대해 알아보자. 2. reachBeginning, reachEnd Swip.. 공감수 5 댓글수 0 2021. 11. 6.
[JavaScript] 커서를 따라다니는 svg 효과 회사 웹디자이너분께서 다음 래퍼런스를 주면서 마우스 효과를 사용할 수 있는지 여쭤봤다. DFY® | Today’s Creative for Tomorrow™ 디파이는 디지털 마케팅의 모든 서비스를 제공하는 풀서비스 에이젼시입니다. www.dfy.co.kr 그런데 해당 사이트는 Vue.js 기반으로 제작된 사이트라 코드를 가져오려고 해도 쉽지 않았다. 필요한 커서 효과만 사용하기 위해 코드를 긁어 오면 다른 파일을 import 해야 하고, 그 파일은 또 다른 파일을 import 해야 하고.... import 지옥이 펼쳐졌다. 결국 노가다로 함수 하나하나 변수 하나하나 가지고 와서 적용하고 에러 뜨면 해결하는 방식으로 어렵게 코드를 가져올 수 있었다. See the Pen 커서를 따라다니는 svg 효과 by .. 공감수 13 댓글수 5 2021. 10. 28.
[JavaScript] 마우스 속도 구하기 See the Pen 마우스 움직임 속도 구하기 by lpla (@lpla) on CodePen. 자바스크립트로 마우스 속도 구하는 방법을 이해하면서 사용하고 싶어서 정리했다. 공감수 1 댓글수 2 2021. 10. 27.
그누보드 다중 게시판 최신글 1. 그누보드 최신글 그누보드는 하나의 게시판을 최신글로 불러올 수 있다. 하지만 이 방식으로는 두 개 이상의 게시판을 불러올 수 없다. 가령 공지사항 게시판, 소식 게시판을 하나의 최신글로 불러오고 싶다면 어떻게 해야 할까? 2. 그누위즈 다중 게시판 최신글 그누위즈에서 여러 게시판을 하나의 최신글로 불러오는 기능을 만든 것이 있다. [기능] 여러개의 게시판을 하나의 최신글로 불러오기 > 최신글 | 그누위즈 [기능] 여러개의 게시판을 하나의 최신글로 불러오기 > 최신글 | 그누위즈 www.gnuwiz.com 먼저 /lib/latest.lib.php 파일 하단에 다음 코드를 추가한다. function latest_all($skin_dir = '', $bo_tables, $rows = 10, $subjec.. 공감수 4 댓글수 0 2021. 10. 23.
[PHP] 맨땅에 헤딩으로 게시판 만들기 (2) [PHP] 맨땅에 헤딩으로 게시판 만들기 (1) 게시판 만들기 (1) 포스팅을 하고 세 달이 흘렀다. 최근 한 달 정도 php를 사용할 일이 평소보다 많아지면서 실력도 단기간에 많이 끌어올릴 수 있었다. 그럼 지난번에 이어서 가보겠다. 4. PHP로 DB 컬럼 추가 이전 시간에는 phpmyadmin으로 4개의 컬럼(num title, content, date)을 추가했다. 하지만 게시판을 생성할 때 phpmyadmin에 접속하여 테이블을 만들고 컬럼을 추가하는 개발자는 없을 것이다. 이번에는 PHP로 컬럼을 추가하는 방법에 대해 공부해보겠다. 먼저 secret 컬럼을 추가하는데, 무작정 추가하는 것이 아니라 없을 경우에 추가하도록 컬럼을 확인하는 과정을 거쳤다. $conn = mysqli_connect(.. 공감수 1 댓글수 1 2021. 10. 17.
[JavaScript] Swiper 페이징(pagination) 2개 사용하기 1. 들어가며 오늘 동료 직원이 하나의 Swiper에 2개의 페이징을 사용할 수 있는지 질문했다. 구현하고자 하는 결과물은 아래와 같았다. 2. 페이징(Pagination)? Page + (i)tion API에 따라서 페이징(Paging) 혹은 페이지네이션(Pagination) 이라고 칭하는 이것은 요소의 개수를 나타내주는 UI를 말한다. (파기, 파지, 패지네이션이 아니다) 가장 흔한 페이징은 게시판의 하단에 있는 숫자들이다. 각설하고 Swiper의 페이징은 총 네 가지가 있다. bullets fraction progressbar custom 그리고 페이징에 포함되지 않지만 거의 같은 기능으로 Scrollbar가 있다. Scrollbar Swiper 페이징은 다음 코드로 추가할 수 있지만 오직 하나의 .. 공감수 7 댓글수 2 2021. 10. 15.
[JavaScript] Swiper 구버전 Demo, API 확인하기 최근 Swiper가 7 버전으로 업그레이드됐다. 그래서 현재 공식 사이트에 접속하면 최신 버전의 demo와 api 자료를 확인할 수 있다. Swiper는 다른 슬라이더 라이브러리에 비해서 피드백도 빠르고 업데이트도 빠른 점이 좋다. (너무 빨라서 문제다.) 문제는 예전에 작업한 사이트의 Swiper를 수정하고자 할 때 참고할 수 있는 페이지가 없다는 점이다. 이미 공식 api 페이지나 demo 페이지는 7 버전을 기준으로 업데이트되었고 구버전은 확인할 수 없다. 대부분은 최신 api를 참고하여 작업해도 문제 되지 않겠지만 위험성을 언제나 갖고 있는 것이다. 아쉽게도 Swiper 측은 신버전이 나오면 구버전은 더 이상 지원하지 않는다고 한다. Github를 보면 Swiper 5 버전의 API가 있는데 어째.. 공감수 2 댓글수 2 2021. 10. 11.
[GSAP] 타이핑 효과 GSAP의 TextPlugin으로 타이핑 효과를 만들 수 있다. See the Pen TextPlugin - basic by lpla (@lpla) on CodePen. 이 플러그인을 이용하면 간단하게 타이핑 효과를 만들 수 있지만 한글은 'ㅌㅏㅇㅣㅍㅣㅇ' 으로 입력되지 않고 '타이핑' 처럼 자음모음이 합쳐져 입력 되는데 이런 작은 디테일에서 아쉬움이 있다. sdfsdfSee the Pen TextPlugin - basic by lpla (@lpla) on CodePen. 다행히 구글에 검색해보면 한글 타이핑을 할 수 있도록 누군가 친절하게 만들어 놓은 스크립트가 있다. See the Pen 타이핑 by lpla (@lpla) on CodePen. 하지만 이 스크립트는 스크롤 이벤트 없이 페이지가 로드되.. 공감수 8 댓글수 2 2021. 10. 10.
[React] 튜토리얼 자습하기 (2) 주요 개념 1. Hello World React에서 Hello Word를 출력하는 방법은 아래와 같다. ReactDOM.render( Hello, world!, document.getElementById('root') ); 2. JSX 소개 React는 마크업과 로직을 분리하지 않고 둘 다 포함하는 컴포넌트 단위로 이루어진다. a. JSX에 표현식 포함하기 중괄호에 변수를 감싸는 방법으로 JavaScript 표현식을 사용할 수 있다. const name = 'Ji Woon'; const element = Hello, {name}; ReactDOM.render( element, document.getElementById('root') ); b. JSX도 표현식이다. JSX 자체에 JavaScript 조건문.. 공감수 0 댓글수 0 2021. 10. 7.
[React] 튜토리얼 자습하기 (1) 설치하기 a. 웹사이트에 React 추가하기 (1) 1분 내로 React 추가하기 HTML 1분 내로 React 추가하기 javaScript 'use strict'; const e = React.createElement; class LikeButton extends React.Component { constructor(props) { super(props); this.state = { liked: false }; } render() { if (this.state.liked) { return '좋아요를 클릭하셨습니다.'; } return e( 'button', { onClick: () => this.setState({ liked: true }) }, '좋아요' ); } } const domContainer.. 공감수 0 댓글수 1 2021. 9. 24.
[CSS] Grid를 사용할 때 장점 하나 1. Grid를 사용하지 않을 때 어려운 레이아웃 웹퍼블리셔라면 grid를 사용할 줄 몰라도 한 번쯤 들어는 봤을 것이다. grid가 좋다고는 하는데 과연 어디에 좋은 것일까? grid를 왜 배워야하는지 의문이 드는 사람들을 위해 짧게 글을 쓴다. 디자이너의 시안에 따라 퍼블리싱을 할 때 다음과 같은 레이아웃이 있다고 하자. 시안 A 만약 이것을 코딩한다면 몇 가지 방법이 있겠지만 그중 아래처럼 코딩할 수 있다. See the Pen Gird Layout 없이 by lpla (@lpla) on CodePen. A, B, C, D는 모두 같은 box 클래스를 가지지만 우측에 있는 B, C, D는 wrapper 클래스로 한 번 더 감쌌다. A와 wrapper를 수평 정렬하기 위해서다. 따라서 부모 conta.. 공감수 4 댓글수 1 2021. 9. 22.
[JavaScript] sketch.js로 마우스를 따라 다니는 파티클 효과 구현하기 sketch.js로 마우스를 따라 다니는 파티클 효과를 구현할 수 있다. 공식 사이트는 참고하면 좋고, 코드를 바로 사용하려면 아래 codepen에 있는 코드를 그대로 사용하면 된다. sketch.js 데모 사이트 sketch.js Parallax Mountains Excellent parallax effect from Jack Rugile, using the sketch.js 2d canvas soulwire.github.io 파티클 효과 데모 사이트 sketch.js » Basic Example soulwire.github.io See the Pen sketch.js Demo by lpla (@lpla) on CodePen. 실제 웹사이트에 적용할 때 sketch.js 스크립트를 추가하는 것은 필수다.. 공감수 2 댓글수 0 2021. 9. 8.
[CSS]마우스 오버시 글자 반전 효과 See the Pen Invert Text by lpla (@lpla) on CodePen. css의 mix-blend-mode 를 사용하여 반전 효과를 줄 수 있다. 익스플로러에서는 지원하지 않는다. 크로스 브라우징에 관한 자세한 내용은 여기서 확인할 수 있다. "mix-blend-mode" | Can I use... Support tables for HTML5, CSS3, etc Blending of HTML/SVG elements Allows blending between arbitrary SVG and HTML elements caniuse.com 공감수 6 댓글수 0 2021. 9. 6.
[GSAP] 숫자 카운트 (ScrollTrigger) GSAP로 숫자 카운트 효과를 만들 수 있다. 1. 해당 요소에 스크롤시 숫자 카운트 See the Pen [GSAP] count - onUpdate by lpla (@lpla) on CodePen. 2. 해당 요소에 스크롤시 숫자 카운트 & 숫자 초기화 See the Pen [GSAP] count - onUpdate & toggleActions by lpla (@lpla) on CodePen. 3. 해당 요소에 스크롤시 숫자 카운트 & 스크롤에 따른 숫자 변화 See the Pen [GSAP] count - onUpdate & scrub by lpla (@lpla) on CodePen. ------- 21.08.28 추가 ------- 4. 소수 자리 표현 See the Pen [GSAP] count .. 공감수 2 댓글수 3 2021. 8. 24.
최근 느끼는 점 자바스크립트 공부를 한다. -> 프론트엔드 프레임워크를 사용하여 더 멋진 코드를 작성하고 싶은 욕구가 생긴다. -> 리액트 공부를 한다. -> 자바스크립트 문법이 부족함을 느낀다. -> 자바스크립트 공부를 한다. -> (반복) 공감수 1 댓글수 0 2021. 8. 22.
[JavaScript] 조건문 응용 이 글은 벨로퍼트와 함께하는 모던 자바스크립트의 내용을 공부하고 정리한 글입니다. 05. 조건문 더 스마트하게 쓰기 · GitBook 05. 조건문 더 스마트하게 쓰기 이번에는 조건문을 조금 더 스마트하게 쓰는 방법에 대해서 알아보겠습니다. 특정 값이 여러 값중 하나인지 확인해야 할 때 만약, 여러분이 특정 값이 여러 값 중 learnjs.vlpt.us 1. 특정 값이 참인지 확인하는 상황 function isAnimal(text) { return ( text === '고양이' || text === '개' || text === '거북이' || text === '너구리' ); } isAnimal('개'); // true isAnimal('노트북'); // false 특정 값이 동물인지 확인하는 함수 isA.. 공감수 0 댓글수 0 2021. 8. 17.
[JavaScript] 절대 좌표, 상대 좌표 구하기 HTML CSS html, body { margin: 0; padding: 0; } .box { width: 500px; height: 500px; position: absolute; } .box1 { background-color: bisque; top: 1000px; left: 50%; transform: translateX(-50%); } .box2 { background-color: brown; top: 3000px; left: 50%; transform: translateX(-50%); } box1의 top은 페이지(문서) 기준으로 1000px이다. 하지만 내가 보고 있는 화면을 기준(viewport)으로 좌표를 측정한다면 0px이 될 수도 있고 -1000px이 될 수도 있다. 1. 상대 좌표 .. 공감수 6 댓글수 0 2021. 7. 28.
[PHP] 맨땅에 헤딩으로 게시판 만들기 (1) 강의글이 아닙니다. 자신 있는 분야도 아니므로 틀린 부분이 있을 수 있습니다. php로 게시판을 만들고 싶어졌다. php를 정식으로 공부하지 않아서 문법에 많이 약하지만 게시판 커스텀은 수십 차례 해봤기 때문에 충분히 가능할 것 같았다. 그래서 내가 아는 지식을 총동원해서 게시판을 만들어 보기로 했다. 1. 로컬 서버 생성 php를 사용하기 위해 비트나미 로컬 호스트를 만들었다. 이전에 작성한 글이 있으니 참고하면 된다. 그누보드 로컬 설치하기 먼저 구글에 bitnami wamp를 검색하여 다운로드받는다. 글 작성일 기준으로 8.0.0-0이 최신버전이다. 하지만 8.0.0-0은 아직 그누보드에서 제대로 검증되지 않았다. 나는 모르고 8.0.0-0을 설치했다가 그 lpla.tistory.com 2. 게시판.. 공감수 0 댓글수 0 2021. 7. 13.
로컬 호스트에서 phpmyadmin 속도 문제 해결 phpmyadmin이 유독 로컬 서버에서 응답 속도가 많이 느린 문제가 있다. phpmyadmin이 설치되어 있는 폴더에서 confing.inc.php 파일을 아래로 수정한다. [수정 전] $cfg['Servers'][$i]['host'] = 'localhost'; [수정 후] $cfg['Servers'][$i]['host'] = '127.0.0.1'; 그리고 비트나미 서버를 재시작한다. 그리고 다시 phpmyadmin을 접속하면 평소와 같은 속도가 나온다. 참고 : https://community.bitnami.com/t/phpmyadmin-4-8-1-is-very-slow-how-do-i-upgrade-it/61965 공감수 2 댓글수 0 2021. 7. 9.
[JavaScript] forEach, map, fill 1. forEach forEach 메서드는 주어진 함수를 배열 요소 각각에 대해 실행한다. forEach는 중간에 멈출 수 없다. for문 const array1 = [2, 4, 6, 8, 10]; const array2 = []; for (let i = 0; i { array2.push(element * 2); }) console.log(array2); // [4, 8, 12, 16, 20] 2. map map 메서드는 주어진 함수를.. 공감수 1 댓글수 0 2021. 7. 4.

반응형

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.