-

1. GSAP 라이브러리 불러오기GSAP은 CDN 또는 NPM, Yarn을 통해 사용할 수 있음1) CDN 방식 (HTML에 바로 연결)별도 빌드 환경 없이 바로 사용 가능. 일반적으로 마감 본문 태그와 사용자 지정 GSAP 코드 앞에 GSAP 스크립트 태그를 붙이는 것이 가장 좋음 GSAP는 자주 업데이트가 되기 때문에 제일 최선 버전을 사용하는게 좋음 2) NPM 방식 (프로젝트 설치)React, Vue, Next.js 같은 프레임워크 프로젝트에서 많이 사용.npm install gsapimport gsap from "gsap";

GSAP (GreenSock Animation Platform) 정의 : 웹에서 애니메이션을 부드럽고 효율적으로 구현할 수 있는 자바스크립트 기반 애니메이션 라이브러리CSS 애니메이션이나 requestAnimationFrame을 직접 다루는 것보다 성능이 뛰어남복잡한 애니메이션을 직관적으로 제어할 수 있음 GSAP의 특징성능 최적화초당 60fps 애니메이션 유지가 가능하도록 최적화되어 있음구형 브라우저와도 호환성이 좋아서 안정적으로 동작.다양한 애니메이션 제어위치, 크기, 회전, 색상, 투명도 등 거의 모든 CSS 속성을 제어할 수 있음숫자 값이 들어가는 속성은 전부 애니메이션화가 가능.정교한 타이밍 제어delay, repeat, yoyo 같은 옵션으로 반복 애니메이션도 쉽게 작성할 수 있음Timelin..

gap정의 : Grid나 Flexbox 컨테이너 안에서 자식 요소들 사이의 간격을 지정하는 CSS 속성행(Row)과 열(Column) 사이 간격을 동시에 또는 개별적으로 조절할 수 있음gap의 외곽 여백은 padding이 담당flex의 gap과 grid의 gap 모두 IE에서 미지원실무에서 반응형 작업 시 모바일은 세로 간격만 넓히고, 가로 간격은 줄이는 패턴이 많음.일부 CSS 프레임워크(예: Bootstrap 4 이하)나 컴포넌트 라이브러리에서는 margin 기반 spacing 유틸리티를 많이 씀.gap을 쓰면 해당 spacing과 중복되거나 불필요한 여백이 생길 수 있으니, 스타일 가이드 정리 필요.gap: 20px; /* 행과 열 모두 20px */gap: 10px 30px; ..

반응형 웹 background image 처리반응형 웹에서 백그라운드 이미지 처리는 화면 크기, 해상도, 디바이스 종류에 따라 적절한 이미지를 보여주거나, 이미지가 깨지지 않고 자연스럽게 보이도록 하는 게 중요성능 최적화 및 팁이미지 용량 최적화: 웹용으로 압축된 JPEG, WebP 포맷 사용 권장Lazy Loading: 백그라운드 이미지는 보통 lazy loading 불가하므로, 화면에 보일 때만 로드하는 방법 고민이미지 캐싱: CDN 활용 시 캐싱 설정 중요브라우저 지원 확인: image-set() 등 최신 CSS 기능은 지원 범위 확인 필요배경이미지 vs 콘텐츠 이미지 구분: 의미 있는 이미지는 로 처리하고, 장식용이면 배경 이미지로 처리1. CSS background-image + 미디어쿼리 활용..

backgroundbackground-image요소의 배경으로 사용할 이미지 URL을 지정기본값: none (배경 이미지 없음)background-repeat배경 이미지를 반복할지 여부와 방향을 설정기본값: repeat (가로, 세로 모두 반복)속성값설명repeat가로, 세로 모두 반복- 이미지를 원래 크기로 반복, 여분 공간이 남으면 그냥 빈 공간 남음 (간격 없음)repeat-x가로 방향으로만 반복repeat-y세로 방향으로만 반복no-repeat반복하지 않음round- 이미지 크기 조절해서 반복 (간격 없이 꽉 채움) - 이미지 크기 : 원래 크기와 달라질 수 있음 (늘어나거나 줄어듦) - 이미지 사이 간격 : 없음- 이미지 반복 개수 : 반복 횟수 맞춤 - 여분 공간 처리 : 이미지 크기를 반복 ..

object-fit정의 : 이미지, 비디오 등 박스(container) 안에 들어가는 콘텐츠의 크기 조절 및 배치 방식을 정의하는 속성주로 , , 같은 요소에 적용해서, 콘텐츠가 컨테이너 크기에 맞게 어떻게 맞춰질지 결정사용 상황반응형 이미지, 비디오 등에서 비율 유지하며 크기 맞출 때.썸네일이나 카드 내 이미지가 깨지지 않고 보기 좋게 보이도록 할 때.배경처럼 이미지가 영역을 꽉 채우게 하거나, 잘리지 않고 모두 보이도록 조절할 때.참고 사항object-fit은 block 요소에는 적용되지 않고, replaced 요소(img, video 등)에 적용됨배경 이미지처럼 background-size 속성과 비슷한 역할을 함 (하지만 object-fit은 요소 자체의 크기 조절)IE는 지원하지 않으니 필요..

기본 원칙1. 이미지 크기 유연하게 설정이미지는 크기(px)로 고정하지 않고, 부모 요소 크기에 따라 유동적으로 변하도록 설정해야 함대표적으로 max-width: 100%; height: auto; 조합을 사용하여이미지가 부모 컨테이너 너비를 넘지 않고, 비율(가로/세로 비율)을 유지하며 크기가 조절됨2. 비율 유지이미지는 가로 세로 비율을 깨지 않도록 해야 함height: auto로 가로 크기에 맞춰 세로를 자동 조절하거나width: auto로 세로 기준 가로를 자동 조절임의로 고정 크기(width: 100px; height: 100px;)를 주면 이미지가 찌그러질 수 있음3. 적절한 이미지 해상도 제공디바이스 해상도가 다르기 때문에 동일 이미지라도 해상도별 적절한 이미지를 준비모바일 화면, 일반 데스..

srcset 속성여러 크기 혹은 해상도의 이미지를 한 곳에 모아둔 것브라우저가 자신의 화면 환경에 가장 적합한 이미지를 골라서 다운로드함ex) 480w, 800w, 1200w)는 이미지 각각의 너비(픽셀 단위)를 뜻함브라우저는 뷰포트 크기, 해상도 등을 고려해 적절한 이미지를 선택단위 (width descriptor, 너비 단위1. w 단위 (width descriptor, 너비 단위)이미지의 가로 길이(px)를 나타냄브라우저가 뷰포트 크기와 sizes 속성을 참고해서 가장 적절한 너비 이미지를 선택2. x 단위 (pixel density descriptor, 픽셀 밀도 단위)기기 픽셀 밀도 비율(DPR, device pixel ratio)을 의미함표준 해상도(1x), 레티나 해상도(2x), 초고해상도(..

이미지 사이즈와 용량 최적화1. 적절한 해상도 선택화면 크기 및 해상도에 따라 다른 크기의 이미지를 제공큰 이미지를 무조건 로드하면 성능 저하 → 용량이 크고 로딩 속도 느림2. 압축과 최적화상황에 따른 압축방식 사용이미지 최적화 도구(예: TinyPNG, ImageOptim) 활용구분 손실 압축 (Lossy) 무손실 압축 (Lossless)품질일부 손실, 품질 저하 가능품질 변화 없음, 완전 동일 복원 가능용량 감소크고 강력한 압축 가능상대적으로 적음재압축품질 악화 가능반복 압축해도 품질 유지주용도사진, 복잡한 이미지아이콘, 로고, 텍스트, 선명한 그래픽대표 포맷JPG, WebP (lossy), HEICPNG, GIF, SVG, WebP (lossless), TIFF3. 포맷 선택웹에서 쓰기 좋은 포..

유사배열유사배열은 배열과 비슷하게 생겼지만 진짜 배열은 아닌 객체즉, 배열처럼 인덱스(0, 1, 2...)와 length 프로퍼티가 있어서 배열처럼 접근할 수 있지만, 배열 메서드(Array.prototype 메서드)는 없는 객체특징인덱스로 요소에 접근 가능 (ex, obj[0], obj[1])length 속성 존재배열 고유 메서드(ex: push(), pop(), forEach())를 사용할 수 없음반복문 접근 가능(for, while)일반 객체이므로 배열 메서드를 바로 사용할 수 없음 Array.from() 또는 전개 연산자 ...로 배열로 변환 가능유사배열을 진짜 배열로 만들어야 배열 메서드를 쓸 수 있음Array.from() 함수나 [...obj] (이터러블인 경우)로 변환 가능반복문으로 접근 가..