질문드려욥 css

Question

우선 현재 figma 에서는 포스터와 별점등록탭 같이 잡아도 합산크기가 안뜨는데 혹시 제가 다르게 잘못사용하는걸까요?? 영상과 바뀐 부분이있는걸까요 ??

그리고 .movie-container 부분에서

수평정렬을

justify-content:center; 로 안하시는 이유가있나요??

margin : 0 auto ; 와 어떤차이점이 있는지 궁금합니다!

Answer

안녕하세요 케냐더블에이님~ 반갑습니다 :)

1. 피그마의 UI를 보시면, 아래 스크린샷처럼 왼쪽에 이미지의 목록이 있고, 오른쪽 화면에는 이미지의 목록이 어떻게 배치가 되어있는지 보여주는, 크게 두 개의 화면으로 구성되어 있습니다.

오른쪽 이미지 화면에서 '이미지 자체' 를 누르지 마시고

검은 화살표가 가르키고 있는, 화면 왼쪽 이미지 목록에서 선택하고 싶은 이미지를 클릭하시면 됩니다. 그럼 오른쪽 이미지 화면 아래에 파란 박스에 수치가 표기될겁니다.

2. 그리고 .movie-container 를 수평 정렬을 하고 싶다면 justify-contents 로는 불가능합니다.

왜냐하면 justify-contents 는 flex-item 요소만 정렬 가능하지, flex-container 요소를 정렬하지는 못하기 때문입니다!

참고로 여기서 flex-container 요소는 display 속성이 flex인 요소이고, flex-item은 display 속성이 flex인 요소의 자식 요소들을 말합니다 :)

movie-container 요소는 flex-container 요소이기 때문에 margin:0 auto로 가운데 정렬해주었습니다 ~