css grid 컨테이너 속성 중에서 flexbox와 유사한 기능의 속성들
css flex 박스에서 아이템을 옮기는 속성들을 생각해보세요.주축 방향으로 옮기는 것은 justify-content, 교차축 방향으로 옮기는 것은 align-items 입니다. grid에서도 이와 같은 속성들이 있습니다. 하지만 차이점도 있죠. flexbox는 방향을 설정하는 것에 따라 주축이 달라지기 때문에, 당연히 그에 따라 옮기는 방향이 달라지지만 그리드에서는 justify-content는 항상 가로축으로 이동하고, align-content는 세로축으로 이동시킵니다. 또 그리드가 좀 더 세분화되어 있습니다. justify-items와 align-items 등 아이템들에게 적용되는 속성들도 있습니다.justify-content, align-content 더 알아보기fr과 같은 단위는 유동적입니다. ..
flex의 컨테이너
컨테이너에 넣을 수 있는 속성들을 알아봅시다. 앞 시간엔 부모 엘리먼트의 display 값에 flex를 선언한 것까지 했습니다. 컨테이너가 무엇인지 기억나시나요? 부모 엘리먼트를 앞으로 컨테이너라고 지칭하기로 했었습니다. flex를 선언하면 기본적으로는 이런 모습으로 보입니다. flex는 다른 값을 주지 않는다면 일단 한 줄안에 다 넣습니다. 그리고 가로로 아이템들을 정렬합니다. 속성으로 얘기하자면 flex-direction은 row값이 적용되어 있고, flex-wrap은 nowrap인 것이죠. flex-direction이란 무엇일까요? 말 그대로 플렉스의 방향을 정해주는 속성입니다. 플렉스에서는 기본 방향을 주축(main-axis)이라고 합니다. row는 그림처럼 나타날 것이고, column을 주면 어..