🕘 일정
- 무비차트 영역 스타일 작성
기능
1) hover 시 버튼 노출
2) 상영예정작 클릭 시 이미지 변경 (X)
3) 캐러셀 애니메이션 (수동) (X) - EVENT 영역 스타일 작성
기능
1) hover 시 이미지 확대
2) 캐러셀 애니메이션 (자동) - 특별관
1) 리스트 border 스타일
2) list hover 시 border 변경
3) list hover 시 이미지 변경
-
반응형 웹 (X)
이슈
- button 앞의 가상요소를 포함하지 않고 tab 지정하기
- section--event 의 overflow: hidden
event image 애니메이션을 구현하려면 hidden을 주어야하는데
그럼 빠져나오는 모든 요소들이 감추어져버려서
slide 버튼까지 감추어져버린다. - event image 에 hover 시 scale
scale을 하면 박스 바깥으로 빠져나온다.
TIL
1. position의 absolute
absolute는 상위 부모에게 달라붙는 성질을 가졌기 때문에
상위부모의 position 속성이 정해져있어야 작동한다.
2. hover 시 버튼 노출
정말 이거 하나 하는데 반나절이 걸렸다. 왜이렇게 머리가 안돌아갔던거야..
자바스크립트로 동작해야하나, 함수를 어떻게 짜야되는건가 골골대다가
결국 포스터 이미지와 같은 사이즈로 button-wrap 을 겹치게 올려놓고
기본값으로 투명도 0에다가, button-wrap에 hover가 되면 투명도를 1로 변경해서
짜잔 - 나타나게 구현했다. (헉헉..)
3. 애니메이션
트랜지션 같은 경우 초기상태와 끝 상태를 지정하면 중간 단계는 자동적으로 설정이 되는데
애니메이션은 키프레임으로 중간 상태를 제어한다. (타임라인 기반으로 애니메이션을 줄 수 있다.)
애니메이션 반복에 delay를 주고싶을 땐 duration 시간을 % 로 계산하여 작성할 수 있다.
ㅡ 참고
https://juno-juno.tistory.com/30
4. 이미지의 width, height
부모 요소의 width, height가 있어도 이미지는 자체적으로
가지는 크기가 있기 때문에 부모 요소의 박스에 빠져나오게 된다.
이럴 땐 display:bock 으로 명시적으로 포지션을 잡아준 후
width 속성 값을 100% 주면 박스에 맞춰 이미지의 크기가 잡힌다.
5. 자바스크립트
-
노드리스트는 'text'도 포함한다.
-
list 에 마우스 hover 되면 이미지 변경
각 list에 data-id 값에 숫자를 넣어주고 자바스크립트 객체 안에
data-id와 연결할 숫자에 맞는 img 의 src 값들을 배열 데이터로 넣어두었다.
객체 또한 배열처럼 인덱스로 접근이 가능하기에 list에 hover 될 때
해당 list의 id 값을 배열 인덱스 값으로 호출하여 src를 바꿔주도록 구현하였다.
