Background훈련(1)

이렇게 생긴 Background card를 만들어보자.

구분하면 위와 같은 요소들로 구분할 수 있다.

이렇게 만들어봤다… 디테일이 부족하다.

Background훈련(2)

위와 이어진다.

flex와 관련된 새로운 개념을 하나 알려주겠다.

flex-grow라는 속성이 있다.

오른쪽 보라색 공간은… flex-direction row로 가로배치하고나서 남는 공간이다. 왜 남냐면.

이 박스의 width를 따로 설정하지 않아서 정확하게 자식 요소들의 가로만큼만 커졌기 때문.

이때 보라색의 남는 마진만큼 키우고 싶다면(자식 요소들 중에 더 옆으로 갈 수 있는 친구가 있다면.. 위 그림에서는 4.97(203) 이 친구가 align-between이라 공간 있으면 더 간다.)