조명테스트

<img width="1024" height="682" src="https://beautypost.net/wp-content/uploads/2026/01/4Qo-1024x682.jpg" alt="" srcset="https://beautypost.net/wp-content/uploads/2026/01/4Qo-1024x682.jpg 1024w, https://beautypost.net/wp-content/uploads/2026/01/4Qo-300x200.jpg 300w, https://beautypost.net/wp-content/uploads/2026/01/4Qo-768x512.jpg 768w, https://beautypost.net/wp-content/uploads/2026/01/4Qo-1536x1023.jpg 1536w, https://beautypost.net/wp-content/uploads/2026/01/4Qo-750x500.jpg 750w, https://beautypost.net/wp-content/uploads/2026/01/4Qo-1140x760.jpg 1140w, https://beautypost.net/wp-content/uploads/2026/01/4Qo.jpg 1600w" sizes="(max-width: 1024px) 100vw, 1024px" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Light: Light: /* [기본 레이아웃] */ .product-item { max-width: 500px; margin: 40px auto; font-family: 'Helvetica', Arial, sans-serif; } /* [이미지 영역] */ .image-wrapper { position: relative; width: 100%; aspect-ratio: 1 / 1.2; overflow: hidden; margin-bottom: 15px; background-color: #f5f5f5; transition: background-color 0.6s ease; } .image-wrapper img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.6s ease-in-out; } .photo-off { z-index: 1; opacity: 1; } .photo-on { z-index: 2; opacity: 0; } /* 조명 ON 상태: 이미지 전환 */ .product-item.is-on .image-wrapper { background-color: #ffffff; } .product-item.is-on .photo-on { opacity: 1; } /* [버튼 정렬] */ .controls-wrapper { width: 100%; display: flex; justify-content: flex-end; } .controls-container { display: flex; align-items: center; gap: 10px; cursor: pointer; } /* 텍스트 스타일: 볼드 처리 제거 */ .label-text { font-size: 16px; color: #333; font-weight: 400; /* 항상 일반 굵기 유지 */ transition: color 0.3s ease; } /* [스위치 트랙] */ .switch-track { position: relative; width: 50px; height: 26px; border: 1.5px solid #333; border-radius: 20px; background-color: transparent; transition: background-color 0.3s ease, border-color 0.3s ease; } /* [스위치 원] */ .switch-circle { position: absolute; top: 4px; left: 5px; width: 16px; height: 16px; background-color: #333; border-radius: 50%; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease; } /* ---------------------------------------------------- 조명 ON(is-on) 상태 스타일 (텍스트 굵기 변경 제외) ---------------------------------------------------- */ /* 1. 트랙 배경 검은색 반전 */ .product-item.is-on .switch-track { background-color: #333; } /* 2. 내부 원 흰색 반전 및 이동 */ .product-item.is-on .switch-circle { transform: translateX(22px); background-color: #ffffff; } /* 3. 조명 켜졌을 때도 텍스트 굵기는 그대로 유지 */ .product-item.is-on .label-text { font-weight: 400; /* 굵게 변하지 않도록 고정 */ }

조명테스트

조명테스트

BeautyPost

Recommended Stories

[테스트] 티파니

퇴근 후 데일리 케어

Kaneka, Kaneka Eurogentec S.A.에서 mRNA의 GMP 제조 능력 확장

Popular Stories

내 가방 속의 작은 사치, 샤넬 핸드크림 라 크렘 망의 화려한 귀환

“상상이 현실” 콜마 라우드랩스, AI 화장품 기획 플랫폼으로 미래를 보다

뷰티 스킨케어, 미래에 새로운 문법 4가지

올리브영이 미국 본토에 깃발을 꽂은 진짜 이유

‘K뷰티’, 유럽 뷰티 밸리를 점령하다…코스맥스, 이탈리아 ‘케미노바’ 인수의 숨은 3가지 전략

Welcome Back!

Retrieve your password