라인을 잘 기억해주셔야합니다.그리드에 다루면서 라인에 대해서 설명했던 것을 기억하시나요? 아이템의 경우 어느 공간을 어느 정도 차지할 것인가 표시하는 것이 주로 사용하는 기능이기 때문에 라인을 기억해주는 것이 중요합니다. 해당 코드를 실행하면 아래와 같은 자주 보던 형태를 만들 수 있습니다. 코드를 보시면 grid-auto-rows를 설정해 놨기 때문에 칸이 모자라면 row를 1fr 크기로 만들게 됩니다. 이제 이 기본형태를 통해서 아이템을 여러 셀을 차지하도록 해보겠습니다.grid-column과 grid-row를 통해서 차지하는 공간 늘리기위의 상자는 column에 4개의 선이 있고, row에는 3개의 선이 있습니다. 그래서 시작선과 종료선을 값으로 주면 해당 선에 맞게 공간을 차지하게 됩니다. 변화가..
아이템에 넣을 수 있는 속성들을 알아봅시다. 저번 시간엔 콘테이너에 넣을 수 있는 속성들을 배웠습니다. 이번 시간에는 아이템에 넣을 수 있는 속성들을 배워봅시다. 아이템에는 직계 자식 태그만 속한다는 것을 잊지 마세요. 컨테이너 안에 5개의 상자가 있습니다. 보시면 마지막 상자는 이름은 div-4인데 마지막에 위치해 있고, 다른 것들 보다 조금 길게 만들어졌군요. 긴 것은 길이를 다르게 설정했다고 하더라도 순서도 제가 다르게 입력했을까요?아래의 소스코드를 주목해주세요. div-1 div-2 div-3 div-4 div-5 container 역할을 하는 태그 안에 상자들은 1부터 5까지 순서대로 되어있습니다. #four에 order 값이 1인 것을 주목해 주세요. order 속성을 이용하면 아이템들의 순서..