웹4 8일차 - 1차메뉴 및 넘겨지는 메뉴(이미지리스트)

1차메뉴

 

[데스크탑]

des-full-box ---> (flex-container) 180px 적용된 상태

nav-box ---> (flex-item) flex-item이기 때문에 flex-container높이를 100% 상속받아 180px

ul ---> (flex-contianer) (height: 100%; 적용된 상태) height: 100%가 적용되어 nav-box 박스 높이 180px 상속

 

[모바일]

mol-box ---> (block) nav-box 높이대로 높이를 가져 70px 

nav-box ---> (block) 70px 적용

ul ---> (flex-contianer) (height: 100%; 적용된 상태) height: 100%가 적용되어 nav-box 박스 높이 70px 상속

 

 

[데스크탑 탑바]

1260px (이상-O  이하 - X)

 

[모바일 버전 탑바]

1260px (이상 - X 이하 - O)

 

 

[ 1260이상일때 모바일 ul 사라지게 하기]

 

 

 

 

플렉스 쉬링크의 기본값은 1

양 옆 박스를 쉬링크 0으로 가둬놓아 플렉스의 유연함을 제ㅏㄴ한다

 

 

[이미지 리스트]

화면의 90%를 사용할거라 90vh 라고 높이를 지정해줌

 

 

이미지를 넣어주고, 백그라운드 리핏:노리핏을 사용해서 이미지 반복됨을 막아줌

가운데로맞추고 사이즈에 맞게 키워줌

 

 

전부 높이를 상속받으니 백비지에 높이를 주어 나머지 블럭-  높이가 따라오게끔 함

 

 

 

백이미지리스트에 마우스를 올리면 ㅇ미지에 변화를 일으킬건데, 무슨 변화?30% 커지게 할것

 

오버플로우 히든까지 넣어주면 이미지들이 바깥으로 나가지

wrap_07.01.zip

2.74MB

않고 제자리에서 커지는 걸 볼 수 잇음