또 다시 줄 이슈

오늘도 즐거운 코딩 공부~

1. 영화 목록 창

길이가 늘거나 줄어들 때, 가운데로 고정된 상태에서 영화가 늘어나는 게 아니라 왼쪽으로 정렬된 상태에서 크기를 충족하면 영화 칸이 늘어나는 문제.

 

위 사진의 문제를 해결하기 위해 display: flex를 주었었는데, 그럴 경우 영화가 지정된 범위를 벗어나 정렬되어버리는 바람에 어찌할 바를 몰랐었던 것을 드디어 해결했다.

 

방법은 flex에 아래와 같은 코드를 붙여주면 됐다.

flex-wrap: wrap;

 

 

 

 

2. 메뉴 창

뷰포트를 수정하고 메뉴창을 정렬시키는 과정에서 아래 사진과 같은 문제가 발생했다.

오른쪽 칸이 남아 도는 모습

hr도 건드려보고 온갖 삽질을 했었지만, 원인은 @media 설정을 해주면서 길이를 그대로 가져간 것이 문제였다.

메뉴 창의 <li> 길이를 450px로 지정해둔 상태다 보니 450px 이하로 줄어드는 순간 칸이 줄어들지 않고 공간을 밀어내는 것이다.

 

@media를 줄 때는 width와, margin을 다시 수정해주어야 한다! (길이는 %, 마진은 0px을 주는 등)

 

프로젝트 개인 작업 끝.

진짜 해치웠나...?

이제 팀원들과의 데이터 병합만이 남았다.