-

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

기본 원칙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. 포맷 선택웹에서 쓰기 좋은 포..

상대 단위반응형 퍼블리싱에서 상대 단위는 화면 크기나 부모 요소, 루트 요소를 기준으로 크기를 조절하는 단위고정 단위(px)보다 유연하게 반응하기 때문에 다양한 기기 환경에서 필수로 사용rem (Root EM)기준html 요소(font-size)를 기준으로 배수 계산1rem = html font-size특징부모 요소 영향 없음 → 전역 일관성 유지전역 폰트 크기 조정 시 전체 UI가 비례 변경주 사용처 : 폰트크기, 간격, 그리드장점예측 가능, 유지보수 편리반응형에서 @media로 html font-size만 변경하면 전체 UI 크기 자동 조정접근성 측면에서도 브라우저 확대/축소와 자연스럽게 연동됨주의사항html font-size 설정이 중요 (기본 브라우저 html font-size:16px 보통 62..

브레이크포인트(beakpoint) 화면 크기에 따라 레이아웃이나 스타일을 전환하는 기준점을 의미 브레이크포인트 설정 기준 1. 디자인 기반실제 UI/디자인 시안을 기준으로 설계디자인 시안이 모바일/태블릿/PC/대형 PC로 나눠져 있을 경우 각 시점의 크기를 브레이크포인트로 사용2. 콘텐츠 기반콘텐츠가 줄 바꿈 되거나 깨지는 지점을 기준으로 브레이크포인트 설정좀 더 유연하고 사용자 중심의 접근 방식장점: 디바이스 의존도↓ / 유연성↑단점: 반복되는 테스트와 수정 필요3. 디바이스 기준 + 콘텐츠 기준 혼합가장 많이 쓰이는 실무 전략우선 기기 기준으로 rough 한 breakpoints 설정하고,특정 컴포넌트에서 깨지거나 이상해지는 부분만 콘텐츠 기준으로 미세 조정기기별 브레이크포인트 기기해상도 기준 (wi..

미디어 쿼리(media query)CSS3에서 도입된 기능으로, 브라우저의 환경(뷰포트 크기, 디바이스 해상도, 방향 등)에 따라 조건에 따라 스타일을 적용주로 화면 크기에 따라 레이아웃을 바꾸는 데 사용기본 문법/* [문법] */@media media-type and (media-feature) { /* 조건을 만족할 때 적용될 스타일 */}media-type (미디어 유형)미디어 유형설명all모든 장치에 적용 (기본값)screen화면 기반 장치 (모니터, 스마트폰 등)print인쇄 또는 인쇄 미리보기 시 적용speech스크린리더용 장치media-feature (미디어 특성)미디어 특성설명width, height뷰포트의 너비 / 높이min-width, max-width최소 / 최대 너비 조건orie..

모바일 퍼스트(Mobile First) 모바일 기기에서의 화면을 기준으로 스타일을 작성하고, 점점 넓은 화면(태블릿, 데스크탑)을 위한 스타일을 미디어쿼리로 추가하는 방식장점모바일 사용자 비중이 높은 현재, 실제 사용 환경에 맞는 전략모바일 성능 제약을 고려해 필수 스타일만 먼저 로딩, 성능 향상점진적 향상(Progressive Enhancement): 기본 기능에서 점점 향상시켜 나가는 전략과 맞물림단점데스크탑 중심의 디자인을 먼저 받은 경우, 작업자에게 익숙하지 않을 수 있음복잡한 UI가 많은 데스크탑을 나중에 고려할 경우, 스타일 구조가 복잡해질 수 있음/* 기본 스타일: 모바일 기준 */.container { font-size: 14px; padding: 16px;}/* 화면이 768px 이상..

반응형 디자인 (Responsive)브라우저나 기기의 화면 크기에 따라 유동적으로 콘텐츠와 레이아웃이 변화하는 웹 디자인 방식.특징하나의 CSS 파일에서 media query를 사용해 다양한 해상도에 대응flex, grid, %, vw, rem 등 유동 단위 사용화면 크기가 조금씩 바뀌어도 자연스럽게 레이아웃이 적응장점유지보수 쉽고, 장기적인 프로젝트에 적합다양한 해상도와 디바이스에 자동 대응새로운 디바이스가 생겨도 레이아웃이 깨지지 않음단점설계가 복잡하고 디자이너와의 협업이 중요초기 개발 시간이 오래 걸릴 수 있음적합한 상황블로그, 쇼핑몰, 기업 홈페이지 등 모든 디바이스에서 접근 가능한 서비스다양한 디바이스 (PC/모바일/태블릿/폴더블 등)에서 동일한 콘텐츠 제공콘텐츠가 중심이 되는 웹사이트 (예: ..

레티나(Retina) 디스플레이 정의 : 애플(Apple)이 정의한 고해상도 디스플레이 브랜드명레티나 기준 : PPI(Pixels Per Inch), 즉 1인치당 픽셀 수가 약 300 이상, 사람이 일반적인 거리(약 30~40cm)에서 볼 때 픽셀 단위가 눈에 보이지 않을 정도면 레티나라고 함레티나 디스플레이를 고려한 퍼블리싱UI 개발 시 직접 레티나 디스플레이를 조작하진 않지만,이 디스플레이 환경을 고려해 퍼블리싱 대응 작업을 해야 함1. 고해상도 이미지 대응 (srcset, @2x, SVG) [Responsive] 반응형 이미지 - 레티나(Retina) 이미지레티나(retina) 이미지정의 : 고해상도 디스플레이(DPR 2 이상)에서 깨지지 않도록 더 높은 해상도로 준비한 이미지ex) 고해상도 디스..