1차 프로젝트로 망고플레이트 웹을 클론을 시작했다.
1일차에는 팀원들끼리 Planning Meetting을 시작했다.
나는 망고플레이트 웹에서 메인페이지의 메인 부분과 상세 페이지를 맡았다.
기존에 목업으로 만들어 논 데이터를 가지고 트렐로에 각자 맡아서 구현해야 할 페이지와 기능을 나눠 카드로 작성했다.
그리고 2주 동안 이뤄질 프로젝트여서 이번 1주 동안 진행할 페이지와 기능 구현을 sprint에 지정해놓고 프로젝트를 시작했다.
메인 페이지의 메인 부분을 맡았지만 메인 페이지(전체)를 구현한다고 생각하고 만들기 시작했다.
먼저 Header부분을 HTML로 구조를 잡고 CSS로 스타일을 입혔다.
이 과정에서 HTML을 작성할 때 Sementic HTML로 제대로 만들어보자! 하고 공부했던 지식과 구글링으로 조금씩 조금씩 완성도를 높혀갔다.
CSS를 입히지 않은 상태라 1990년대 후반? 2000년대 초? 야후 같은 느낌이다.
HTML로 잡은 구조를 뷰에서 이쁘게 보이게 만드려고 위치 조정을 했다.
로고와 검색창 메뉴 리스트를 한 라인에 보이게하고 이미지, 텍스트, 여백 등등을 조정했다.
위치 조정에서는 여러가지 속성이 있지만 flex를 사용했고, 각 요소 간의 여백도 flex를 적용하면 사용할 수 있는 속성을
사용했다.
스크롤을 내려서 페이지를 밑으로 이동할 때 헤더가 고정으로 보이게 하기 위해 fix도 해줬다.
이미지를 뷰에 띄우려고 javascript 하던 것처럼 경로를 src에 값으로 줬는데 이미지를 못찾으면 보이는 엄청 조그만 종이가 뜬다.(뭐야? 안뜨네? 하고 바로 구글링..)
내가 찾은 방법은 이미지 파일을 프로젝트 디렉토리에 넣어 이미지 파일이 존재하고 있는 경로를 import해서 src의 값으로 주는것.(잘 되네~)
이때까지만 해도 상당히 무난하게 진행하고 있었다.
메인 페이지의 메인 부분!! 이미지 들을 일정한 사이즈와 일정한 간격 그리고 열(column)로 길게 보이게 하는게 문제였다…
일정한 사이즈 일정한 간격은 flex와 고정vw를 이용해서 잘 맞추었는데 열(column)로 길게 보이게 하려고 했더니 이미지가 계속 짤리는 문제가 발생했다.
문제가 발생하자 말자.. 이거 뭐야? 왜 이래? 왜 이런거지?? … 문제 발생할 리 없는데.. 등등 별에 별 생각이 들었다.
마인드 리셋하고 바로 문제 해결 시작.
이미지가 짤리는 문제라서 HTML에서 구조 조정(이미지와 관련된 태그들 조정) 가장 먼저 개수를 줄여봤다.
2 column으로 2줄 나올 때는 이미지가 안짤리고 3줄 나올 때는 이미지가 짤린다.
이미지가 문제있는 것을 아닐테고.. height(높이) 관련된 속성과 값을 확인 및 수정, 추가, 복구 계속 반복했다.
height(높이) 문제로 짤릴거라 생각한 이유에서다.
위 확인 및 수정, 추가, 복구를 반복하다 보니 이미지를 자식으로 가지고 있는 부모 태그에 height(높이) 관련 속성 그리고
값을 주면 이미지가 짤리고 주지 않으면 짤리지는 않는다.
하지만 주지 않으면 이미지가 짤리지는 않지만 이미지의 사이즈가 내가 원하지 않는 방향으로 이뤄지기 때문에 이건 해결
방법이 아니었다.
그럼 일단 이미지를 자식으로 가지고 있는 부모 태그에 속성과 값을 주지 않고 다른 태그들에 height(높이) 관련 속성과
값을 주면서 문제 해결을 시도했다.
딱히 내가 원하는 결과가 나오지 않는다.
정말 이 문제를 해결하기 위해 물리적인 시간도 시간이지만 내가 사용했던 CSS 속성과 값들을 확인 및 수정, 추가, 복구를
반복하는 과정 그리고 구글링…
이때 잊고 있었던 width…(!!!!!!!!!!!!)
heigh(높이)는 고정으로 줘도 되지만 주지 않는다면 width에 비례 또는 자식 컨텐츠에 높이 만큼의 값을 가진다는 것을…
다시 생각했다.
이미지를 자식으로 가지고 있는 부모 태그에 height(높이) 관련 속성, 값을 주면 문제가 발생하니까..
주지말고 width를 확인해보자 라고.
그리고 width의 값을 수정하면서 이미지도 안짤리고 최대한 내가 원하는 사이즈가 결과로 나왔다.
정말… 메인 페이지를 만들면서 가장 정체되고 물리적 시간이 많이 투자된 CSS
(글 작성을 하다보니 과정과 내용이 많이 생략되고 압축되었는데 엄청난 문제였다 ㅜㅜ)