👉🏻유튜브 영상 렌덤으로 보이기 안녕하세요 트리플랩(TriplexLab) 입니다. 이번에는 흔하게 많이들 작업하시는 유튜브 영상을 렌덤으로 보이기 기능에 대해서 살펴보겠습니다. 👉🏻HTML 코드 유튜브 영상 렌덤으로 보이기 👉🏻CSS 코드 html,body {margin: 0; padding: 0;} .global.active::before { display: inline-block; content: ''; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); position: absolute; } .close-btn { width: 30px; position: absolute; right: 0px; top: -50px; } .center {..

유튜브 영상 렌덤으로 보이기

👉🏻유튜브 영상 렌덤으로 보이기 안녕하세요 트리플랩(TriplexLab) 입니다. 이번에는 흔하게 많이들 작업하시는 유튜브 영상을 렌덤으로 보이기 기능에 대해서 살펴보겠습니다. 👉🏻HTML 코드 유튜브 영상 렌덤으로 보이기 👉🏻CSS 코드 html,body {margin: 0; padding: 0;} .global.active::before { display: inline-block; content: ''; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); position: absolute; } .close-btn { width: 30px; position: absolute; right: 0px; top: -50px; } .center {..

2023.12.02

👉 단축 평가 (short-circuit evaluation) 논리 계산법 이번에는 논리 연산자를 조금 더 유용하게 사용하는 방법에 대해서 배워보겠습니다. 우리가 이전에 연산자를 배울때, 다음과 사항을 잘 숙지하셨을겁니다. true && true // true true && false // false true || false // true false || true // true 논리 연산자를 사용 할 때에는 무조건 우리가 true 혹은 false 값을 사용해야 되는 것은 아닙니다. 문자열이나 숫자, 객체를 사용 할 수도 있고, 해당 값이 Truthy 하냐 Falsy 하냐에 따라 결과가 달라집니다. const dog = { name: '멍멍이' }; var getName = function(animal) ..

좌,우 버튼으로 Y축으로 슬라이드되면서 무한 반복(롤링)되는 방식입니다. html에서 아이템 모두 개수마다 노출되는것이 아니라, 비례해서 상대적으로 노출됩니다. See the Pen slider-loop by 소윤호 (@younhoso) on CodePen.

👉 Truthy and Falsy 이것은 자바스크립트 문법까지는 아니지만, 알아둬야 하는 개념입니다. Truthy: true 같은거... Falsy: false 같은거... 라고 이해를 하면 되는데요, 예를 들어서 다음과 같은 함수가 있다고 가정해봅시다. function print(person) { console.log(person.name); } const person = { name: 'John' }; print(person); 만약에 이러한 상황에서, 만약 print 함수가 다음과 같이 파라미터가 비어진 채로 실행됐다고 가정해봅시다. function print(person) { console.log(person.name); } const person = { name: 'John' }; print()..

안녕하세요 TriplexLab 입니다. 이번 시간부터 JavaScript에서 유용한 Tip정보를 예시와 함께 알려드리고자 합니다. 오늘은 삼항연산자에 대해서 먼저 이야기를 해보겠습니다. 👉🏻삼항연산자 첫번째로 배울 문법은, 삼항 연산자입니다. 이 문법은 ES6 문법은 아닙니다. 조건 ? true일때 : false일때 라인의 길이가 너무 길어진다면 다음과 같이 작성하기도 합니다. const array = []; let text = array.length === 0 ? '배열이 비어있습니다' : '배열이 비어있지 않습니다.'; console.log(text); 예시)👇🏻👇🏻 삭제 라인의 길이가 너무 길어진다면 다음과 같이 작성하기도 합니다. 버튼 클릭 엘리먼트에 토글 클래스를 핸들링한다. const $btn..

🎦 Video Gallery Easy Tutorials 안녕하세요 TriplexLab 입니다. 이번 시간에는 Video Gallery의 간단한 쉬운 예제를 가져왔습니다. 섬네일을 클릭하면 해당 영상이 활성화되어서 나오는것 입니다. How To Make A Video Gallery Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta maiores, accusamus eum voluptatem ipsam tempora Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta maiores, accusamus eum voluptatem ipsam tempora Lorem ipsum dolor..

👉🏻스크롤 메뉴(Scroll Menu) 구현해보기 안녕하세요 TriplexLab 입니다. 이번에는 흔하게 많이들 작업하시는 스크롤 메뉴에관해서 살펴보도록 하겠습니다. 👉🏻참고링크 먼저 내 글중에서 마우스 이벤트 위치 관한글이 있는데 이것 보시고 이이서 글 보시면 이해하는데 도움이 될것 같습니다. MouseEvent 위치프로퍼티 정리 🖱 Event 위치프로퍼티 정리 안녕하세요 TriplexLab 입니다. 마우스 이벤트(MouseEvent) 객체에는 마우스 포인터의 위치와 관련된 다양한 프로퍼티들이 있는데요. 주로 아래와 같은 프로퍼티들이 자주 triplexblog.kr // scrollMenu.js class ScrollMenu { constructor(el) { this.el = el; this.$$ =..

Drag & Drop Vanilla Javascript(JS 드래그 앤 드롭) 안녕하세요 TriplexLab 입니다. 🧑‍🎄🧑‍🎄 오늘은 다음과 같이 Vanilla Javascript로 Drag & Drop기능에 관해서 살펴보도록 하겠습니다. Drag & Drop Vanilla Javascript 👉HTML HTML CSS JavaScript React Vue Next JS 👉CSS body, div { margin: 0; } .container { background-color: #f3f5f7; padding: 2rem; border-collapse: collapse; } .container:nth-child(n+2){ margin-top: 1rem; } .draggable { height: 82px;..

🖱 Event 위치프로퍼티 정리 안녕하세요 TriplexLab 입니다. 마우스 이벤트(MouseEvent) 객체에는 마우스 포인터의 위치와 관련된 다양한 프로퍼티들이 있는데요. 주로 아래와 같은 프로퍼티들이 자주 사용됩니다. 프로퍼티 설명 clientX, clientY 마우스 포인터의 브라우저 표시 영역에서의 위치 pageX, pageY 마우스 커서의 문서 영역에서의 위치 offsetX, offsetY 마우스 포인터의 이벤트 발생한 요소에서의 위치 screenX, screenY 마우스 포인터의 모니터 화면 영역에서의 위치 1️⃣ clientX, clientY client 프로퍼티는 말 그대로 클라이언트 영역 내에서 마우스의 좌표 정보를 담고있는데요. 클라이언트 영역이란 이벤트가 발생한 순간에 브라우저가 ..

👨‍💻 [JavaScript] 배열을 유용하게 활용하는 10가지 방법 안녕하세요 TriplexLab 입니다. 이번 시간에는 객체 배열에서(key-value)에서 유용하게 활용하는 10가지 방법에 관해서 정리해보겠습니다. 이번 포스트는 다음 링크를 참고 했습니다. [Javascript] 15가지 유용한 map, reduce, filter 아래 글을 번역 및 요약한 글. dongmin-jang.medium.com 다음과 같은 데이터가 있다고 가정해봅시다. const datas = [ { id: 1, type: "ko", name: '비빔밥', price : '8,000' }, { id: 2, type: "ko", name: "삼계탕", price : "12,000" }, { id: 3, typ..

👉이미지 슬리이드 JS(fade) 안녕하세요 TriplexLab 입니다 :) 오늘은 이미지 슬리이드 JS(fade)대해서 살펴보도록 하겠습니다. 이미지 페이드 효과 #banner {position: relative; width: 1200px; margin: 0 auto; text-align: center; overflow: hidden; height: 360px; } #banner img {width: 100%; display: block;} #banner h2 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 10; background: rgba(255,255,255,0.5); border-radiu..

✅JavaScript로 최신순, 베스트순 만들기 안녕하세요 TriplexLab입니다. 오늘은 JavaScript로 최신순, 베스트순을 구현해 보겠습니다. 🔥Mock데이터를 화면에 출력 먼저 Mock 데이터를 fetch, async / await을 사용해서 화면에 출력하는 것부터 만들어 보겠습니다. const $ = (select) => document.querySelector(select); (() => { const getDatas = async () => { const res = await fetch("./mock.json"); const body = await res.json(); return body; } const handleLoad = async () => { await getDatas().t..