참고 자료 : https://www.youtube.com/watch?v=67stn7Pu7s4 flex 각각의 flex의 item들이 컨테이너에서 차지하는 크기를 설정할 수 있다. 아래는 3개의 item들의 각기 다른 범위를 차치하는 상황이다. flex-grow flex-grow는 아이템이 flex-basis의 값보다 커질 수 있는지를 결정한다. 기본값은 0이다. 그래서 따로 값을 설정하기 전까지는 아이템이 늘어나지 않는다. 설정된 flex-grow의 값에 비례해서 여백 부분을 할당받는다. .upNext .item .img { flex-grow: 1; } .upNext .item .info { flex-grow: 1; } .upNext .item .moreBtn { flex-grow: 1; } 해당 예시에..

참고 자료 : https://www.youtube.com/watch?v=67stn7Pu7s4 CSS calc() CSS 코드에서 사칙 연산을 이용하는 방법. .actions button i { margin-bottom: calc(var(--padding) / 2); } —padding은 이전에 :root에서 정의한 변수다. +와 `` 연산자는 좌우에 공백이 있어야 한다. calc(50% -8px)은 백분율 값과 음수 길로 해석하여 유효하지 않지만, calc(50% - 8px)은 백분율과 길이의 뺄셈으로 해석한다. 마찬가지로, calc(8px + -50%)는 길이와 음의 백분율 간의 덧셈으로 처리한다. *와 / 연산자는 좌우 공백을 요구하지 않지만, 그래도 추가하는 편이 일관성을 유지하기에 좋다. 출처 :..

참고 자료 : https://www.youtube.com/watch?v=67stn7Pu7s4 flex 잘 정리해둔 글이 있어서 링크를 남긴다. 추가로 flex에 이어서 grid에 대한 설명도 있으니 필요하면 찾아서 사용하자. flex에 대한 설명 : https://studiomeal.com/archives/197 grid에 대한 설명 : https://studiomeal.com/archives/533 지금 당장 알아야 할 것은... flex-direction으로 배치의 방향(가로축 row, 세로축 column)을 선택한다는 사실. 선택한 축 방향으로 정렬하고 싶으면 프로퍼티로 justify-content:를 사용한다. 선택한 축의 수직 방향으로 정렬하고 싶으면 프로퍼티로 align-items:를 사용한다..