본문 바로가기

HTML, CSS, javascript/실습

반응형 실습

 - 웹사이트의 크기가 줄어들 때 (예를 들어 PC > 모바일 환경)  안에 배치 된 사진의 배치가 바뀌는 웹사이트를 만들었다.

 - 너비가 좁아질 때 사진도 줄어들게 하기 위해 inner 클래스의 너비를 max값으로 잡았다.

 - 너비가 900px 이하가 되면 왼쪽 하단에 배치되어 있던 사진의 position값을 초기화 하고 float 시켜 오른쪽으로 배치되게 하고 다른 사진은 left: auto를 주고 right:0을 주어 오른쪽에 배치되게 했다.

 - 너비가 700px 이하가 되면 남은 사진도 position을 초기화하고 위의 그림처럼 배치되게 했다.

'HTML, CSS, javascript > 실습' 카테고리의 다른 글

nicescroll 실습  (0) 2022.06.29
gnb 실습  (0) 2022.06.20
Tab Menu 실습  (0) 2022.06.15
Modal 실습  (0) 2022.06.07
포트폴리오(싱글페이지) 제작 실습  (0) 2022.06.03