드롭다운메뉴를 만들었다...ㅎ 근데
width값을 화면 전체로 주고싶은데 안돼서 left값을 -410px만큼 줘서 화면 시작부터 끝까지 차게 만들어줬다ㅋㅋㅋㅋㅋㅋㅋㅋ큐ㅠㅠㅠㅠㅠwidth 100%를 주면 될까 싶었는데 그러면 nav를 1100px만큼만 줘서그런지 그만큼만 차지해서....
width : 100% left값은 X 이렇게 주면 위 사진처럼 되어버린다ㅎㅎㅎㅎ
암튼 하드코딩을 해버렸더니 화면을 줄이면
이렇게 되어버린다~~~~~~~~~~~~ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ큐ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
일단 내 생각으로는 상위 태그의 width값을 화면 전체로 준다음에 sub-menu의 width값을 100%로 주고 left를 0으로 주면 되지 않을까..??하는데 안된다 ㅎㅎㅎㅎ 꼭 해결하고 오겟따......ㅠㅠㅡㅠㅡㅠㅡㅠ
이전에는 header 전체를 inner로 감싸고 그안에 nav-menu가 있어서 nav-menu에 width 100%을 주어도 화면 전체를 잡지 못했었다.
그래서 header전체를 감싸던 inner를 없애주어 nav-menu가 화면 전체를 잡을 수 있도록 해주었다.
inner안에 안담아주면 메뉴 UI가 이상해졌었는데 inner을 안으로 넣어주고 width를 100%로 주니 해결..!
( inner에 의해서 컨텐츠들이 width: 1100px를 잡을 수 있게 됨..! )
nav-menu를 100%로 하고 sub-menu의 기준이 화면 전체를 잡은 nav-menu가 되기 때문에
sub-menu에 left :0 을 줘서 시작을 왼쪽 끝으로 만들고 width : 100vw를 주어 넓이를 화면 전체로 주면
드롭 메뉴가 화면 넓게 분포할 수 있게 된다!!!!
화면을 줄여도 메뉴가 잘 유지된다..!!!~!~!~!~!~!!~
쉽게 해결했는데 왜 저번에 했을 때는 해결 못했는지 모르겠다ㅎㅎㅎㅎ
안될땐 잠깐 쉬고 하는것도 나쁘지 않은듯~
'코딩' 카테고리의 다른 글
| 디자인패턴 - MVC / MVP / MVVM (0) | 2022.10.20 |
|---|---|
| [스타벅스 클론코딩] 드롭다운 메뉴 - 위에서 아래로 내려오는 효과 (0) | 2022.04.20 |
| [해결][스타벅스 클론코딩] 다른 요소에 가려져(?) 버튼 hover이 안된다ㅎㅎㅎ - position과 z-index (0) | 2022.04.16 |
| [해결][스타벅스 클론코딩] css - nav 찌그러지는(?) 문제..! (0) | 2022.04.09 |
