211216 게터디 - 시디즈 문제 해결

문제1

• 구조

ul>li>a>img+span+span

• 문제점
  flex container인 ul에 justify-content가 안 먹힌다
  

해결

• li안에 img에만 크기를 지정해주고 부모인 li에게는 아무 크기도 없는 상태였다. flex item인 li에 크기를 지정해야겠단 생각이 들어서 img 크기를 li에게 주니까 문제가 해결됐다.

문제2

• 구조

ul>li>a>img+span+span

• 문제점
  li 요소 자식으로는 a, span, span이 있는데 지금 li는 a태그만 감싸고 있다.
  

해결

• 이것도 부모 요소의 크기가 명확하지 않아서 생긴 문제였다. 앞서 문제1을 해결하기 위해 img태그의 크기를 그대로 li에게 줬었다. 그래서 li의 높이가 img의 높이만큼만 있으니까 다른 요소는 못감싸고 img태그만 감싼 것처럼 보인거다.

• li의 높이를 100%로 지정해주니까 깔끔하게 해결됐다. 그리고 원래 img에게는 width: 100%, height: 100%를 줬었는데 height의 값은 고정값으로 줬다. (시디즈는 사진 자체가 이미 사이즈가 딱 맞게 재단되어있음)