[웹4]240424-(반응형 예제 이어서)

https://codepen.io/limyena/pen/PogXPON

반응형 탑바(선생님)

 

 

 

[화면이 900px이하로 내려가면 네비바 아이콘이 자연스럽게 사라지게 하기]

 

- html에서 사라지게 하고싶은 아이콘 코드 찾아서 공통클래스 달아주기

- css에 애니메이션 라이브러리 생성(미리해뒀음)

- css 가장 하단에 미디어쿼리 코드 작성

성공

 

 

 

[화면이 600px이하로 줄어들면 폰트사이즈 16px에서 14px로 줄여주기]

- html에서 네비바 텍스트 클래스 찾아서 공통클래스 달아주기

- css하단에 미디어쿼리 코드 작성

성공

 

 

[화면이 줄어들었을때 네비바 하단으로 분리시키기]

(기존에 있던 네비바가 하단으로 내려가는 방식이 아닌,

평상시에 보이지않는 하단 네비바를 생성해두고 화면이 일정 px안으로 줄여졌을때 띄워주는 방식)

 

- html에서 탑바 두가지로 분류

- 네비바 클래스 분리

- 필요한 코드만 꺼내오기

확인