min-content와 max-content 활용이름에서 알 수 있듯이 min-content는 최소한의 컨텐츠 크기를, max-content는 최대한의 컨텐츠 크기를 가지게 해주는 값입니다. 위의 코드를 봐주세요. 해당 코드에 우리는 가운데 아이템에 "this is long text"라는 구문을 넣었고, 아이템들을 감싸고 있는 컨테이너에는 그리드를 선언하고 가운데 트랙의 값을 min-content를 주었습니다. 우리가 적은 구문이 어떻게 되어 있나요? 띄워쓰기 한 부분을 기준으로 컨텐츠가 내려가 있고, 컨텐츠를 유지하는 가장 최소의 공간은 가지고 있습니다. 이렇게 만들어주는 것이 "min-content"입니다. 그럼 max-content는 어떻게 될까요? 텍스트가 차지할 수 있는 최대의 공간은 모든 텍스..
라인을 잘 기억해주셔야합니다.그리드에 다루면서 라인에 대해서 설명했던 것을 기억하시나요? 아이템의 경우 어느 공간을 어느 정도 차지할 것인가 표시하는 것이 주로 사용하는 기능이기 때문에 라인을 기억해주는 것이 중요합니다. 해당 코드를 실행하면 아래와 같은 자주 보던 형태를 만들 수 있습니다. 코드를 보시면 grid-auto-rows를 설정해 놨기 때문에 칸이 모자라면 row를 1fr 크기로 만들게 됩니다. 이제 이 기본형태를 통해서 아이템을 여러 셀을 차지하도록 해보겠습니다.grid-column과 grid-row를 통해서 차지하는 공간 늘리기위의 상자는 column에 4개의 선이 있고, row에는 3개의 선이 있습니다. 그래서 시작선과 종료선을 값으로 주면 해당 선에 맞게 공간을 차지하게 됩니다. 변화가..
css flex 박스에서 아이템을 옮기는 속성들을 생각해보세요.주축 방향으로 옮기는 것은 justify-content, 교차축 방향으로 옮기는 것은 align-items 입니다. grid에서도 이와 같은 속성들이 있습니다. 하지만 차이점도 있죠. flexbox는 방향을 설정하는 것에 따라 주축이 달라지기 때문에, 당연히 그에 따라 옮기는 방향이 달라지지만 그리드에서는 justify-content는 항상 가로축으로 이동하고, align-content는 세로축으로 이동시킵니다. 또 그리드가 좀 더 세분화되어 있습니다. justify-items와 align-items 등 아이템들에게 적용되는 속성들도 있습니다.justify-content, align-content 더 알아보기fr과 같은 단위는 유동적입니다. ..
grid를 선언하는 방법그리드가 무엇인 지, 또 플렉스박스와 비교하는 포스팅을 작성할 때 그리드를 선언하는 방법과 트랙을 선언하는 코드를 작성했었습니다. 여기서 잠깐 다시 짚어보고 진행하도록 하겠습니다. display의 값으로 grid를 주는 것이 그리드를 선언하는 방법이고, grid-template-rows와 grid-template-columns로 트랙을 선언할 수 있다고 했습니다. 그럼 형태에 일단은 트랙에 의해 생겨난 "그리드 셀"에 아이템(자식 엘리먼트)들을 하나씩 놓아둔다고 했었습니다. 이까지 기억나시나요? 트랙은 여러가지의 값을 줄 수 있습니다. 지금은 픽셀을 주었지만 그리드에서 사용할 수 있는 새로운 단위인 fr을 다루고 속성들을 다뤄보도록 하겠습니다.새로운 속성 "fr" 배워보기 픽셀은 ..