드디어 우리팀의 마지막 작업..
상세페이지 css까지 수정완료하였고, 마지막 메인 톰크루즈 형님 기본 사진이 너무 정사각형에 가까운 사진을 가져왔다보니 규격에 맞지 않았다.
고민하다 다른 가로가 긴 사진으로 대체하기로 하였다.
마지막 수정 날이라 생각해서 그런지 다 같이 라이브 화면 켜고 수정을 해나갔는데, *{} 도 몰랐던 내가 주도적으로 화면을 키고 어디를 어떻게 수정해야할지 체크해가면서 작업하는 모습에 진짜 농담안치고 한달전 나와는 너무나도 큰 실력차이가 나구나 물론 개발자가 요구하는 능력치엔 아직 터무니 없이 미흡한 수준이지만 너무 기뻤다.
처음엔 잘 몰랐던 부분인데 완성하고 난 후 살펴보니
화면을 확대하고 아래쪽 스크롤을 오른쪽으로 옮기면 사진이 저렇게나 많은 여백을 보여주고 있었다.
그래서 고민하다
body {
overflow-x: hidden;
}해당 overflow-x 는 아래쪽 스크롤을 해당하는 코드인데 숨기니까 해결이 되었었고,
웹사이트 비율을 높이면 저렇게 카드가 짤리게 되었다.
그래서 해상도마다 규격을 다르게하는 반응형 웹을 떠올리게 되었고,
@media (max-width: 1600px) {
#card {
grid-template-columns: repeat(3, 1fr);
margin-top: 100px;
/* margin을 수정할 때 필요하다면 추가 */
}
}
@media (min-width: 1610px) {
#card {
grid-template-columns: repeat(5, 1fr);
margin-top: 100px;
/* margin을 수정할 때 필요하다면 추가 */
}
}
@media (max-width: 1020px) {
#card {
grid-template-columns: repeat(2, 1fr);
margin-top: 100px;
/* margin을 수정할 때 필요하다면 추가 */
}
}
@media (max-width: 675px) {
#card {
grid-template-columns: repeat(1, 1fr);
margin-top: 100px;
/* margin을 수정할 때 필요하다면 추가 */
}
}가로기준 1600px일때 1610px일때 1020px일때 675px일때 맞춰서 카드가 몇개를 한줄에 노출시킬지 팀원과 상의해서 정하게 되었다.
확실히 요즘시대는 굉장히 다양한 기기로 사이트를 볼 수 있기 때문에 아무리 잘 만든 사이트여도 이러한 사소한 부분까지 신경써주지 않는다면 굉장히 허접한 사이트가 될 수 도 있겠다고 체감하였다.
오늘은 하루종일 아주 사소한 부분을 건드리면서 우리 팀의 프로젝트가 더 잘 보일 수 있도록 회의하냐고 개인공부는 하지 못하였지만, 같이 일주일 내내 고생한 보람이 사이트에 보이니까 다들 하이텐션에 더 가까워진 느낌도 들었다.
이런 성취감도 개발자의 소소한 행복이구나 느껴졌고, 주말은 약속을 제외하고 남은 시간 열심히 개인 능력을 높여보도록 하겠다.
