오늘은 어제부터 시작된 첫 미니 프로젝트를 계속 연달아서 작업하였습니다...!
저는 어제도 말씀 드렸다시피 서브 페이지 CSS를 맡게 되었습니다
이왕 만드는 거 반응형으로 제작을 한 번 해보자...!라고 큰 결심을 했는데,
아니나 다를까, PC버전(1920px)부터 모바일 버전(500px)까지 번갈아 살펴보면서 코드를 짜기란 정말 어렵더군요...
(부트스트랩으로 몇 개의 input 기능만 만들어두고 그 외에는 모두 직접 코딩하였습니다)
그래도 꽤나 만족스러운 결과물을 얻지 않았나 하는 생각이 들어요 ㅎ.ㅎ
그럼 지금부터 작업하면서 어려웠거나 까먹고 있었던 것들 위주로 나열을 한 번 해볼게요:)
첫 번째, 반응형에서 사진 정사각형 크기로 고정시켜두기.
여기서 특히 애를 많이 먹었던 것 같습니다...
#img_box {
position: relative;
width: 100%;
padding-bottom: 100%;
overflow: hidden;
}
#img_box > img {
position:absolute;
width:100%;
height:100%;
object-fit:cover;
}
이미지 밖에 부모 박스(#img_box)를 만들어준 후,
position : relative; width : 100%; padding-bottom : 100%; overflow : hidden;을 값으로 줍니다
그리고 이미지에는 position : absolute; width : 100%; height : 100%; object-fit을 주면 끝!
이렇게 작업을 끝마쳐주면 사이트의 크기가 아무리 줄어들어도 정사각형 크기에서 절대 변하지 않는 이미지를
볼 수 있습니다
두 번째, 버튼에 hover 했을 때 배경 색상이 천천히 변하게 만들기
hover 값까지 준 후에 button에 transition-duration : 0.5s;를 써넣었는데도 적용이 되지를 않더라구요...
그래서 열심히 인터넷을 뒤지고 또 뒤졌습니다!
.mypost .btn {
margin-top:20px;
transition-duration: 0.5s;
transition-property: background-color;
}
.mypost .btn:hover {
background-color:lightseagreen;
border:1px solid lightseagreen;
}
button에 transition-property : background-color을 넣어주면 부드럽게 작동이 잘 되더라구요~
세 번째는 이미지를 클릭했을 때 이미지가 정해진 크기의 틀 안에서 부드럽게 커지게 만드는 것입니다
transform : scale(1.2);를 이용했구요, 인터넷을 찾아보니 transform을 적용시켰기 때문에
이미지에 transition : transform 1s;를 써넣어줘야 한다는 것이었습니다
#image_list_1>li>a>img {
width:100%;
height:100%;
object-fit:cover;
transform:scale(1.0);
transition: transform 1s;
}
#image_list_1>li:hover img {
transform:scale(1.2);
transition: transform 1s;
}
그리고 대망의 마지막...!
반응형으로 제작하는 만큼 사이즈 조절이 정말 힘들더군요...(언제 해도 힘들어요 ㅠ.ㅠ)
#image_list_1 {
width:100%;
overflow:hidden;
display:flex;
justify-content:space-between;
}
#image_list_1 > li {
width:calc(33.3% - 10px);
}
display : flex;로 이미지를 옆으로 정렬해준 후 justify-content : space-between으로 끝과 끝에 공간이 남지 않도록 한 후
여백을 똑같이 나눠 분배하는 방법을 사용하였습니다! 그리고 li에 width : calc(33.3% - 10px)을 적용시켜 주었죠!
그 결과 세 개의 이미지를 정사각형으로 똑같이 나눌 수 있었답니다~(창의 크기를 줄여도 펄펙트~!)
그럼 오늘의 공부는 여기서 끝마치도록 하겠습니다!
'1일1 스터디 후기' 카테고리의 다른 글
[ 2022-11-06 ] 코딩 WIL 일지 (일주일을 돌아보면서 쓰는 일지 (0) | 2022.11.07 |
---|---|
[ 2022-11-04 ] 코딩 일지 (프로젝트 마무리 (0) | 2022.11.05 |
[ 2022-11-03 ] 코딩 일지 (프로젝트 4일차 (0) | 2022.11.05 |
[ 2022-11-02 ] 코딩 일지 (프로젝트 3일차 (0) | 2022.11.03 |
[ 2022-10-31 ] 코딩 일지 ( 프로젝트 1일차 (0) | 2022.10.31 |
github : https://github.com/dnjfht
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!