- 웹사이트의 크기가 줄어들 때 (예를 들어 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 |