조명테스트

<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

[26년 1월 23일] 뷰티포스트

클리오, 2024년 상반기 매출 1856억원

건조함을 이기는 오일 활용법

Popular Stories

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

LG생활건강, 프레시안 ‘에그라이크 파운데이션’ 2종 출시

수출 114억 달러의 기적! 글로벌 시장을 홀린 K-뷰티, 역대 최대 실적

LG생활건강 화장품 북미 진출 가속화, K-뷰티 글로벌 전략

K-뷰티산업현황및 회계/세무 Guide Book

Welcome Back!

Retrieve your password