CSS - display(3) grid와 item
오늘은 저번 시간에 다뤘던 display에서 grid에서
item과 관련된 속성에 대해 알아보겠습니다.
저번 시간 내용을 정리해 보면
grid는 엑셀과 비슷하게 구성되어 있으며
행과 열을 지정해서 원하는 위치에 배치하는 형태로 디자인을 합니다.
grid는 겉에 container와 안에 item들로 구성되어 있습니다.
container와 관련된 속성으로 행과 열,
행과 열 간의 사이 값과 같은 박스를 만들어주고
item과 관련된 속성으로 원하는 위치에 태그라는 아이템을 배치해서
디자인할 수 있다는 것을 설명드렸습니다.
저번 시간에는 grid에 관련한 내용과
conainer와 관련된 기본적인 속성에 대해 알아보았었는데요.
오늘은 그중 item과 관련된 기본적인 속성에 대해 알아보겠습니다.
(1)
grid-row-start, grid-column-start
먼저 grid-row-start는 지정해둔 grid 영역에서
배치할 아이템이 행의 처음 위치로 배치되도록 지정해 주는 속성입니다.
이어서 grid-column-start는 지정해둔 grid 영역에서
배치할 아이템이 열의 처음 위치로 배치되도록 지정해 주는 속성입니다.
(2)
grid-row-end, grid-column-end
먼저 grid-row-end는 지정해둔 grid 영역에서
배치할 아이템이 행의 마지막 위치로 배치되도록 지정해 주는 속성입니다.
이어서 grid-column-end는 지정해둔 grid 영역에서
배치할 아이템이 열의 마지막 위치로 배치되도록 지정해 주는 속성입니다.
마지막으로 예시를 보여드리고 마치겠습니다.
(1)
grid-column-start
(2)
grid-row-end
작성하는 방식은
먼저 부모 태그에 grid를 지정해두면 원하는 아이템인 자식 태그에
속성을 적용한 후 속성 값에는 원하는 위치에 맞는
숫자를 작성하셔서 적용하시면 됩니다.
(예시로 다루지 않은 속성들도 똑같이 적용하시면 됩니다.)
원하는 위치에 맞는 숫자를 확인하는 방법에 대해
궁금하실 수도 있기 때문에 설명드리겠습니다.
grid에서 배치할 위치에 맞는 숫자를 확인하는 방법은
저번 시간에도 말씀드렸듯이 grid를 적용해도 눈으로는
직접적으로 보이지 않기 때문에
크롬에서 개발자 모드를 실행시켜서 grid를 적용한 태그 옆에
grid 버튼을 눌러 grid를 보시면서 원하는 위치에 배치를 하시면 됩니다.
마지막으로 row는 행을, column은 열을 의미한 다는 것을 기억하시고
진행하시면 원하는 위치에 배치하시는 데에는 문제는 없으실 겁니다.
오늘은 여기까지 해보겠습니다.
저번 시간부터 진행했던 grid에 대해 알아보았는데
너무 깊이 들어가지는 않았고 기본적으로 사용되는 것 위주로
설명드렸습니다. 더 디테일한 부분은 앞으로 진행하면서
실습하는 글을 통해 알려드리도록 하겠습니다.
감사합니다!
'CSS > CSS display' 카테고리의 다른 글
| CSS - display(4) flexbox, item (0) | 2022.07.29 |
|---|---|
| CSS - display(4) flexbox, container (0) | 2022.07.29 |
| CSS - display(2) grid와 container (0) | 2022.07.21 |
| CSS display (0) | 2022.07.20 |
댓글