조명테스트

<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

글로벌 무대 장악한 K-뷰티, 이제는 ‘화장품마케팅교육’

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

빛을 머금은 피부를 위한 샤넬 브라이트닝 스킨케어의 혁신!

Popular Stories

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

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

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

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

올리브영이 그리는 뷰티 놀이터의 영토 확장 3가지

Welcome Back!

Retrieve your password