05 - 23 검은사막 메인 페이지 마크업 (5) - 메뉴 반응형

 

:: 1300px 일 때, 다운로드와 고객센터가 안보이고 더 보기가 활성화

더 보기가 평소엔 비활성화 

 

 

우선 메뉴부터, 천천히 보이고, 안보이고,

 

:: 반응형에서 적용 안되면 선택자를 하나 더 써주자.

 

 

:: 이렇게 설정을 하면 공간만 차지하고 보이지만 않게 되는 문제

 

 

 

::1350px 기준.

 

 

제이쿼리가 자동으로 height값을 조절해줘서 그런거였음. 반응형으로 css.

 

 

 

* 1300px 반응형 상태에서 더보기 메뉴 레이아웃 조정

* 각 메뉴마다 글자만큼이 아닌 메뉴 넓이만큼 선택범위 확대

 

 

height : auto 로 수정, 선택자 > 로 수정 ( >를 안하면 안에 li들까지 전부 적용이 되어버려서 레이아웃이 깨짐 )

 

 

:: 성공!

 

::1200px 커뮤니티 메뉴 더보기  안으로

 

 

 

 

 

굿 

 

 

마지막으로 :: 1100px일 때 상점탭 안보이고 더 보기 메뉴에 추가 ( 동일 )

 

 

 

:: 완료

 

 

:: 1025px일 때 태블릿, 모바일 반응형 화면

 

 

 

https://github.com/wonpoem/blackdesert/tree/master/blackdesert

GitHub - wonpoem/blackdesert: blackdesert mark up study

 

https://rkqtlr15159.cafe24.com/blackdesert/#

검은사막