TIER 1 · CSS GRID
진짜 벤토
(span 배치)
지금까지는 flex 폭(57%/37%)으로 흉내만 냈다.
이건 실제 grid span 이라 행·열이 정확히 맞물린다.
이건 실제 grid span 이라 행·열이 정확히 맞물린다.
작업실
가로수길 스튜디오의 아침
시그니처
클래식 로즈 부케
웨딩
단 하루를 위한 준비
내추럴
와일드플라워 믹스
구독
매주 찾아오는 제철 꽃
원물
새벽 시장의 신선함
프레스티지
프리미엄 오키드
TIER 1 · ABSOLUTE + Z-INDEX
진짜 겹침 콜라주
지금까지 오버랩은 배경이미지 위에 카드를 얹는 연출이었다.
이건 레이어를 실제로 겹친다.
이건 레이어를 실제로 겹친다.
OVERLAP
레이어가 실제로 겹칩니다
z-index 로 순서를 정하고 _offset_x / _offset_y 로 배치합니다. 배경이미지 흉내가 아닙니다.
※ 태블릿·모바일에서는 absolute 를 유지한 채 오프셋을 세로로 재계산해 스택으로 만든다(함정 1h).
TIER 1 · TRANSFORM
기울어진 카드
함정 1g: popover 토글 값은 ‘transform’ 이어야 한다. ‘yes’ 를 주면 조용히 무시된다.
클래식 로즈
rotate -4deg
선샤인 데이지
rotate 2deg
프리미엄 오키드
rotate -2deg