※ 연습문제 :
● 해결 방법 (핵심만) :
내가 약했던 부분 :
1_ 맨 위 상단 로고 고정바 (header.Box)
● 순서 1 : 상단 로고는 스크롤을 해도,맨 위에 계속 고정 출력
=> position : fixed + top , left , right : 0
● 순서 2 : 스크롤 하면서, 다른 Box들과 겹칠 때, 더 위에 출력 되어야함
=> z-index : 1 // 0보다 큰값(default 값)
2_ 비디오 + 광고 텍스트 (hero.Box) //궁금한 점은 이렇게 많이 되어있던데, 다른방법안사용하고 이 기법을 자주 사용하나??
● 순서 1 : 비디오(bg.Box) , 광고 텍스트 (hero-heading.Box)를 모두 감싸는 부모 Box를 position : relative를 걸고, position : absolute로 비디오 안의 위치 조정 (position:fixed사용 사례와 다른 차이)
- hero.Box 셀렉터 : position : relative;
- hero-heading.Box 셀렉터 : position : absolute + 적절한 위치 조정 + margin-top/bottom를 조정하여, 영상 선위 등 멋있게 위치할 곳을 찾아 배치
● ▲순서 2 : 광고 텍스트를 품은 hero-heading.Box의 display : flex 적용 사항
○ hero-heading.Box에 아래와 같은 CSS 적용
- display : flex;
- flex-direction : column;
- justify-content : center , align-items : center;
# 최종 결과물 링크 :
https://bakey-api.codeit.kr/web/enrollments/670f8de1ec16416f4c513d65/lessons/5798/index.html
