참고 자료 : https://www.youtube.com/watch?v=67stn7Pu7s4 flex 각각의 flex의 item들이 컨테이너에서 차지하는 크기를 설정할 수 있다. 아래는 3개의 item들의 각기 다른 범위를 차치하는 상황이다. flex-grow flex-grow는 아이템이 flex-basis의 값보다 커질 수 있는지를 결정한다. 기본값은 0이다. 그래서 따로 값을 설정하기 전까지는 아이템이 늘어나지 않는다. 설정된 flex-grow의 값에 비례해서 여백 부분을 할당받는다. 해당 예시에서는 모두 동일한 1:1:1 비율이다. flex-shrink flex-shrink는 … 더 읽기
참고 자료 : https://www.youtube.com/watch?v=67stn7Pu7s4 CSS calc() CSS 코드에서 사칙 연산을 이용하는 방법. —padding은 이전에 :root에서 정의한 변수다. 출처 : https://developer.mozilla.org/ko/docs/Web/CSS/calc 아이콘과 텍스트 중앙 정렬 아이콘과 텍스트가 좌측을 기준으로 정렬되어있다. 중앙을 기준으로 정렬시키고 싶을 경우 쉽게 하는 방법이 있다. margin: 0 auto;는 아이콘의 상하단의 마진은 0으로 설정하고 좌우는 컴퓨터가 자동으로 설정한다. 이렇게 작성할 경우… 알아서 아이콘의 중앙선과 … 더 읽기
참고 자료 : https://www.youtube.com/watch?v=67stn7Pu7s4 flex 잘 정리해둔 글이 있어서 링크를 남긴다. 추가로 flex에 이어서 grid에 대한 설명도 있으니 필요하면 찾아서 사용하자. 지금 당장 알아야 할 것은… flex-direction으로 배치의 방향(가로축 row, 세로축 column)을 선택한다는 사실. 선택한 축 방향으로 정렬하고 싶으면 프로퍼티로 justify-content:를 사용한다. 선택한 축의 수직 방향으로 정렬하고 싶으면 프로퍼티로 align-items:를 사용한다. 이 정도 알면 필요한 기능을 … 더 읽기
