교보문고 마이페이지 작업

교보문고 마이 페이지

 

 

교보문고 마이페이지를 만들고 있는데, 사이드바는 금방 만들었지만.. 

 

버튼의 위치가 문제였다.. ㅠㅠ

 

프로필 옆에 있는 버튼들이 계속 아래쪽으로 내려가는 문제가 발생을햇다.

교보문고 사이트와 비교해도 똑같이 값을 줬는데, 레이아웃 클론코딩에서는 계속 아래에 있었다. 

태그를 하나 빼먹었는지, 숫자를 잘못 적었는지 하나하나 살펴봤다. 

 

부모 요소 display 속성 차이 때문에 버튼의 위치가 어긋난 것이였다. 

 

display : block; width , height 값을 계속 바꾸면서 확인을 했었다.

 

ㅠㅠ 결국 contents에 있는 태그랑 선이 딱 맞게 되어서, 너무 행복했다... 

 

지금은 레이아웃만 클론코딩을 하고 있지만, 얼렁 끝내서 빨리 프론트에서 할 수 있는 기능을 다 해보고, 백엔드 작업도 해보고 싶어졌다..

 

 

 

아래 이미지는 실제 교보문고 마이페이지 사진이다.

실제 교보문고 마이페이지 헤더 부분

 

클론코딩 마이페이지

클론코딩 마이페이지...

 

절대로 교보문고 페이지의 카드 UI가 삐져나오는게 별로여서 똑같이 안만들려고 한거는 아니다..

레이아웃을 직접 클론코딩을 해보니, 개발자 모드 켜서, 뭐가 다른지 한번 보고, 쓰으윽 보면 대충 어디가 문제인지 해결을 할 수 있게됐다..

 

문제점은 알림, 추천 header 부분에서 mb 값을 안줬기 때문이였다

 

 

 

 

아래의 문제점은

position : relative 요소의 위치를 자기 자신을 기준으로 상대적으로 배치할 수 있도록 하는데, 이 요소가 flex 컨테이너에 있을 경우

position : relative 로 지정된 요소의 위치가 밀릴 수 있어서, flex 속성과 충돌을 했다. 

해결 방법은 justify-content: center , align-items: center 속성을 사용해 가로 세로 중앙 정렬을 할 수 있도록 설정을 했다.

 

 

background-image 축약 사용시 오류 발생

다른 컴포넌트, 페이지에서 작업을 할 때 축약 해서 사용할 때 에러가 안나왔는데,

마이페이지에서는 에러가 나와서 이미지가 나오지 않았다.

이럴 때 독립적으로 값을 주면 된다는걸 알았다.

backgorund-image 속성 오류

 

 

마이페이지 최종본

 

 

 

 

 

레이아웃을 클론 코딩하면서 속성의 의미를 조금씩 이해하게 됐다. 

이번 마이페이지에서는 점차적으로 그 속성들의 의미와 목적을 조금씩 이해하게 되었다. 

position : relative 속성이 단순히 요소의 위치를 변경하는 것처럼 느껴졌지만, flex 컨테이너 내에서 사용하면서 발생한

문제를 해결하려고 고민하다 보니, position : relative가 자기 자신을 기준으로 상대적으로 배치된다는 점을 알게 됐다. 

처음엔 position, display 속성을 왜 이렇게 사용하는지 잘 몰랐지만, 이번 충돌을 해결 하면서 속성들의 의미를 더 잘 이해하게 되었다.