본문 바로가기

전체 글51

position: sticky 요소가 stuck일 경우에만 CSS를 적용하는 방법 이번 포스팅에서는 position: sticky 인 요소가 stuck 상태인 경우, 즉 브라우저 상에서 원하는 위치에 달라 붙었을 경우에만 해당 요소에 CSS를 적용하는 방법에 대해서 알아보겠습니다. 이러한 작업은 주로 웹사이트의 헤더가 스크롤을 내리면 상단에 달라붙어야 하는 경우, 해당 헤더의 스타일을 바꾸는 경우에 필요합니다. 물론 그 밖에 다른 영역들에도 적용이 필요한 경우도 있겠죠. 먼저 해결 방법을 알아보기에 앞서 해결 방법에 사용되는 개념을 간략히 정리해보겠습니다. 1. IntersectionObserver란?Intersection observer는 브라우저 뷰포트와 설정한 요소의 교차점을 관찰하며, 요소가 뷰포트에 포함되는지 포함되지 않는지, 더 쉽게는 사용자 화면에 지금 보이는 요소인지 아.. 2023. 9. 5.
Swiper 영역 너비가 동적으로 바뀔 경우, 내부의 콘텐츠 너비 업데이트하기 브라우저가 렌더링된 후 스와이퍼 영역의 너비를 동적으로 조정할 경우, 스와이퍼 내부의 콘텐츠 너비가 자동으로 갱신되지 않는 문제가 발생하는 경우가 있습니다. 이번 포스팅에서는 이 문제를 해결하는 방법에 대해 살펴보겠습니다. 1. 문제 확인 먼저 앞서 서론에서 이야기한 문제를 직접 확인해보겠습니다. 예시 화면은 좌, 우측의 각각의 영역이 있고 전체 너비 100%를 각각 60%, 40%로 나눠 가집니다. 좌측 영역에는 swiper 플러그인이 사용되었고, 우측 영역은 일반 콘텐츠이며 옆에 있는 QUICK 버튼을 클릭하면 열렸다 닫히는 형태의 UI 입니다. See the Pen Swiper 영역 너비가 동적으로 바뀔 경우, 내부의 콘텐츠 너비 업데이트하기 (구버전) by newstar (@newstar_) on.. 2023. 8. 30.
Chapter 12: Classes 💡 도서 모던 자바스크립트 핵심 가이드를 읽고 정리합니다. 12.0 클래스 MDN에서는 클래스를 다음과 같이 설명 클래스는 일차적으로 자바스크립트의 기존 프로토타입 기반 상속에 대한 문법적 설탕이다. 클래스 문법이 자바스크립트에 새로운 객체 지향 상속 모델을 도입하는 것은 아니다. 클래스는 이미 구축되어 있던 프로토타입을 기반으로 추가된 문법상으로 달달한, 즉 편리함을 제공하는 문법 클래스와 오브젝트 (Class vs. object) class class란 조금 더 연관있는 것들을 묶어 놓은 fields와 methods의 집합 template declare once no data in (data가 들어갈 fields만 들어있음) object object는 class에 직접 data를 넣어 만든 insta.. 2022. 1. 26.
Chapter 11: 자바스크립트 심볼 (Symbols) 💡 도서 모던 자바스크립트 핵심 가이드를 읽고 정리합니다. 11.1 심벌의 고유성 심벌은 ES6에 처음 추가된 원시 자료형으로 항상 고유성을 지님 const me = Symbol("Alberto"); console.log(me); // Symbol(Alberto) const clone = Symbol("Alberto"); console.log(clone); // Symbol(Alberto) console.log(me == clone); // false console.log(me === clone); // false 11.2 객체 속성에 대한 식별자 객체 속성의 식별자로 사용 가능 동일한 속성명이 각각 고유하게 존재해야 할 경우 사용 가능 const office = { [Symbol("Tom")]: "CE.. 2022. 1. 25.
Chapter 10: 객체 리터럴 (Object literal upgrades) 💡 도서 모던 자바스크립트 핵심 가이드를 읽고 정리합니다. 10.1 변수를 키와 값으로 하는 객체 만들기 객체의 key와 value가 동일할 경우, value 값을 생략하여 표현 가능 const name = "Alberto"; const surname = "Montalesi"; const age = 25; const nationality = "Italian"; const person = { name, surname, age, nationality, }; console.log(person); // {name: "Alberto", surname: "Montalesi", age: 25, nationality: "Italian"} 10.2 객체에 함수 추가하기 일반 함수 // ES5 const person = .. 2022. 1. 24.
Chapter 09: Spread와 Rest (Spread operator and rest parameters) 💡 도서 모던 자바스크립트 핵심 가이드를 읽고 정리합니다. 9.1 The Spread operator (스프레드 연산자) spread 라는 단어가 가지고 있는 의미는 펼치다, 퍼뜨리다 이 문법을 사용하면 이터러블한 요소를 개별 요소로 분리하거나, 객체 혹은 배열을 펼칠 수 있음 기존의 배열 혹은 객체를 건드리지 않고 새로운 배열 및 객체를 생성해야 하는 경우 유용하게 사용할 수 있음 → 기존의 것을 건드리지 않고 새로운 것을 만든다는 것이 핵심 // ...[1, 2, 3]은 [1, 2, 3]을 개별 요소로 분리한다(→ 1, 2, 3) console.log(...[1, 2, 3]); // 1 2 3 // 문자열은 이터러블이다. console.log(...'Hello'); // H e l l o // 이터러.. 2022. 1. 23.
Chapter 08: 배열 메서드 (Array improvements) 💡 도서 모던 자바스크립트 핵심 가이드를 읽고 정리합니다. 8.1 Array.from() 배열처럼 보이지만 배열이 아닌 개체를 받아 실제 배열로 변환해 반환한다. Apple Banana Orange const fruits = document.querySelectorAll(".fruits p"); const fruitArray = Array.from(fruits); console.log(fruitArray); // [p,p,p] const fruitNames = fruitArray.map( fruit => fruit.textContent); console.log(fruitNames); // ["Apple", "Banana", "Orange"] 아래와 같이 단순화할 수도 있다. const fruits = A.. 2022. 1. 22.
Chapter 07: 반복문 (Loop) 💡 도서 모던 자바스크립트 핵심 가이드를 읽고 정리합니다. 7.1 for (value of iterable) for...of 문은 배열에 관한 반복문을 돌리기 위해서 만들어진 반복문이다. 따라서 이터러블 객체(Array, Map, Set, String, TypedArray, arguments 객체 등을 포함)에만 사용 가능하다. 사실 이 구문은 배워놔도 사용 할 일이 별로 없다. 보통 배열을 반복할 때에는 map 등의 배열 내장 함수를 많이 사용하기 때문이다. 기본 문법 const array = [1, 2, 4, 5]; for (let value of array) { // use strict 환경이 아닌 경우 let을 빼도 됨 console.log(value); } // 1 // 2 // 4 // 5 배.. 2022. 1. 20.
Chapter 06: 디스트럭처링 - 구조 분해 할당 (Destructuring) 💡 도서 모던 자바스크립트 핵심 가이드를 읽고 정리합니다. 6.1 객체 디스트럭처링 // ES6 이전 var person = { first: "Alberto", last: "Montalesi" } var first = person.first; var last = person.last; // ES6 const person = { first: "Alberto", last: "Montalesi" } const { first, last } = person; 중첩된 객체 형태로 데이터가 주어진 경우에도 사용 가능하다. const person = { name: "Alberto", last: "Montalesi", links:{ social: { facebook: "https://www.facebook.com/alb.. 2022. 1. 19.