-
[부트캠프] T1F3 프로젝트 2일차부트캠프/프로젝트 2024. 7. 17. 20:17
오늘 작업한 내용
1. 팀원분들께서 완성한 내용을 하나로 병합
팀원분들 개개인의 능력이 너무 뛰어나셔서 병합하는 과정 / 병합 후의 기능적 문제는 발생하지 않았습니다.
문제점
코드 합치는 것에는 문제가 발생하지 않았지만,
처음에 너비를 정해두지 않아 UI의 너비가 제각각으로 들쭉날쭉하였습니다.병합 후 이미지 너비를 조정하면서 A 요소를 수정하면 B 요소 또한 같이 수정됐고,
긴 코드 속에서 내용을 수정하는 것은 생각보다 번거로웠습니다.
이 과정을 통해, 와이어 프레임 단계에서 디테일하게 규격과 내용을 정하고 시작해야 함을 알게 되었습니다.
2. 이미지 변경
기존에 온라인에서 발견한 이미지가 아닌, 실제 팀원분들의 이미지를 삽입했다.
문제점
1일차 작업에서 이미 이미지를 원으로 자르는 것은 성공하였으나,
팀원분들이 보내준 사진을 넣는 과정에서 2차 문제가 발생하였다.
가로나 세로로 긴 이미지일 경우, 기본적으로 이미지 비율을 유지시키려는 현상 때문에
이미지가 왜곡된다는 점이 문제로 다가왔다.그 이유에 대해 찾아보니, 이미지는 기본적으로 object-fit:fill 이라는 속성을 갖고 있었기 때문인데,
이 속성으로 인해 해당 영역에 이미지를 일단 채우려다 보니 왜곡 현상이 발생하였던 것이었다.
해당 이미지에 대해 object-fit:cover로 바꿔 크기 외부의 영역을 잘라준 뒤,
object-position 값을 조정하여 원하는 영역이 잘 보이게 끔 조정하였다.
코드
Java-Boot-Camp/프로젝트/F1T4/project.html at main · kkw2238/Java-Boot-Camp · GitHub
완성
'부트캠프 > 프로젝트' 카테고리의 다른 글
[프로젝트/KPT] 프로젝트를 끝 마치며 (0) 2024.08.08 [부트캠프] NBCStudentManager 프로젝트 1일차 (0) 2024.08.07 [IntelliJ] 한글 깨짐 오류 (0) 2024.07.26 [프로젝트/KPT] 프로젝트를 끝 마치며 (0) 2024.07.19 [부트캠프] T1F4 프로젝트 1일차 (0) 2024.07.16