-
G마켓 2차 탑바 구현(2)
ㄴ css 연결 시 순서를 잘 확인하고 넣어야 한다 (특히 hover가 사용되는 코드에는 더욱)
G마켓 2차 탑바 구현
ㄴ 2차 탑바에 left: 0;을 적용했더니 body를 기준으로 작용하기 때문에 맨 왼쪽에 붙는다
ㄴ position: absolute; 가 된 g-market-3 태그를 가둬주는 역할로 코드 입력
ㄴ 가둬놓겠다는 뜻
[2] li너비 만큼 밀어주기
ㄴ left: 0; 가 아니라 left: 100%; 로 바꿔주기
[3] 마우스를 올렸을 때 2차 메뉴 고정시키는 방법
★ ★ ★ ★
position: relative; 위치는 container에 적용되어 있어야 한다.
+ 추가로
display: none; 처리 한다.
순서
1. html 버스 메뉴 구조 추가하기 (반드시 텍스트 작성)
2. .css에서 fixed나 absolute 우선 적용
3. html에서 원하는 위치에 relative 작성
4. 위치 속성으로 위치잡기
5. list2번에 서브메뉴 구조 추가하기
6. .css에서 서브메뉴 display: none; 처리하기
7. hover 구현하고 list1번과 list2번에서 제대로 작동하는지 확인하기
8. 확인 후 display: none; 주석, hover 주석, list2번 주석 처리하고 디테일한 구조 구현하기
9. 디테일한 구조 완료 후 나머지 list에 구조 붙여넣기 (구조 붙여넣기 할 때는 html에서 구조 닫은 후 안전하게 복사하고 붙여넣기)고정시키기
hover 처리하기
액션을 주고 싶은 대상을 정확하기 파악하기
ㄴ 현재 우리는 지마켓의 li 위에 마우스를 올릴 때의 액션을 주는 것이기 때문에
g-market-2__nav > ul > li 에게 hover 처리한 후 그의 자식인 . g-market-3__nav 를 선택해준다
[4] 디테일 잡기
ㄴ 만들어야 할 구조 잡아보기
flex-grow 를 잡는 이유는 - 여백을 먹기 위해서
ㄴ top-box와 bottom-box를 flex-item으로 만들어주기
ㄴ flex-direction: column; 을 사용하여 세로로 정렬해주기