부트스트랩(BOOTSTRAP)을 활용한 반응형 웹페이지 만들기-11-3(nike 2022 SS 홈페이지)

미디어 쿼리를 어떻게 짜야 할 지 잘 모르겠음 일단 보류

img-responsive 클래스를 입력해도 화면상에서 반응해야하는 이미지가 변하지 않음 

클래스 명을 따로 주어야 하나 ? 

code

screen

모든 이미지에 적용 되지 않음..

code

hidden 클래스도 적용 되지 않음

왜인지 모르겠어서 그냥 재시작 해도 적용이 안됨

screen TB

빨간색 박스는 hidden 클래스로 보이지 않아야 되는데 그대로 노출됨..

screen PC

빨간색 박스를 제외한 아래 박스가 보이지 않아야 하는데 그대로 노출됨.

 

 

 

code

클래스 명 잘 못 씀

클래스 명 한번 정리 할 필요가 있음.

이걸로 해결!

 

screen PC

screen TB

일단은 해결 했지만 레이아웃 엉망진창이라 하나씩 해결 할 것.

code

px단위로 CSS를 설정하니 화면마다 깨져서 rem단위로 CSS를 변경

screen TB

screen PC

code 

이미지가 깨져 보여서 CSS변경

근데 레이아웃 순서가 뒤죽박죽 되어버림.

background-size cover->contain으로 변경

 

screen PC 

TB와 박스 전체 사이즈를 다르게 CSS에서 값을 다르게 줄 필요가 있음.

screen TB

명령값을 contain으로 바꾸어서 다음 이미지에 영향을 주지 않음.