CSS - display(2) grid와 container
CSS - display(2) grid와 container
오늘은 저번 시간에 다뤘던 display에서 grid에 대해
먼저 알아보겠습니다.
grid는 간단하게 엑셀과 비슷하다고
생각하셔도 좋을 것 같습니다.
이유는 특정한 영역 안에서 엑셀처럼 표와
같은 형태로 구성이 되어있기 때문입니다.
부모 태그에 grid를 지정해주면 안에 자식 태그들은
부모 태그 안에 표와 같은 형태로 배치가 됩니다.
그래서 grid를 지정해주면 표를 구성하는 것처럼
행과 열의 수를 지정해야 하며 행과 열을 지정해주면 자식 요소를
어떤 행에 배치할지 어떤 열에 배치할지 지정해야 합니다.
그럼 왜 grid를 사용하는지 설명드리면
저번 시간에도 말씀드렸듯이 웹을 디자인하면서
HTML 태그들이 내가 구성했던
위치로 정확하게 배치해야 하기 때문입니다.
grid를 사용하면 상단의 영역이나, 사진들을 배치하는 것처럼
코드를 작성할 때 깔끔하게 정리할 수 있고
눈으로 봤을 때도 웹디자인을 깔끔하게 정리할 수 있기 때문에 사용됩니다.
그래서 쉽게 설명해서 엑셀과 비슷하다고 한 것이
엑셀도 원하는 행과 열에 원하는 것을 배치하 듯이
grid도 원하는 행과 열에 원하는
태그를 배치할 수 있다는 공통점이 있습니다.
※
grid를 사용할 때 기본적으로 알아두셔야 할 점은
grid는 container와 item으로 구성이 된다는 것입니다.
container는 item을 감싸는 부모 요소,
item은 container 안에 있는 자식 요소라는 것입니다.
그래서 container에서 전체적인 행과 열, 크기와 간격 등을
적용할 수 있고
item은 container에서 작성된 값을 통해
HTML에서 작성된 태그를 배치하거나 정렬할 때 사용됩니다.
※
방금 전에 grid를 사용할 때
지정해야 하는 것들이 있다고 말씀드렸습니다.
그래서 값을 지정하기 위해
grid를 사용하면서 같이 사용되는 많은 CSS 속성이 있는데
그 속성들이 container에 필요한 속성과
item에서 필요한 속성들로 구성되어 있습니다.
오늘은 그중에서도 container에서 사용되는 속성 중
기본적으로 사용되는 속성을 알려드리겠습니다.
(1)
grid-template-rows, grid-template-columns
먼저 위에 속성들을 알기 전에 grid를 사용할 때 행과 열을 표시해야
한다고 말씀드렸습니다.
그래서 grid에서 행을 나타내는 row, 열을 나타내는 column라는
단위를 알고 grid를 진행하시면 좋을 것 같습니다.
이제 본격적으로 위에 속성을 설명드릴 것인데
먼저 grid-template-rows 속성은 grid를 사용할 때
필요한 행의 수를 지정할 때 사용됩니다.
사용 방법은 마지막에 한꺼번에 보여드리겠습니다.
다음은 grid-template-columns 속성은 grid를 사용할 때
필요한 열의 수를 지정할 때 사용됩니다.
(2)
row-gap, column-gap
먼저 row-gap 속성은 행과 행사이의 간격의 값을
지정해 줄 수 있는 속성입니다.
그래서 일반적으로 요소와 요소를 떨어뜨리는데
margin을 사용했다면 grid에서는 row-gap과 column-gap을
사용할 수 있습니다.
다음은 column-gap 속성으로 열과 열 사이의 간격의 값을
지정해 줄 수 있는 속성입니다.
마지막으로 예시를 보여드리고 마무리하겠습니다.
위에 예시를 설명드리면 넓이가 220px, 높이가 340px인 박스가 있습니다.
이 박스의 배경 색은 검은색이고 display 속성은 grid로 지정되었습니다.
박스 안에는 넓이 100px, 높이 100px의 색을 가진 작은 박스 6개가 있습니다.
큰 박스에서 grid는 열은 2칸, 행은 3칸으로 되어 있으며
열과 열 사이, 행과 행사이는 20px의 간격이 있습니다.
그래서 태그의 순서에 맞게 작은 박스가 grid에서 생성된 칸에
순서대로 배치가 되었습니다.
참고로 fr은 남은 부분을 가득 채우라는 의미를 가지고 있고
repeat는 반복하는 값을 지정해주는 속성 값으로
저것을 풀어서 설명드리면 1fr(grid 한 칸을 채워라)을
행으로 3번 반복하라, 열로 2번을 반복하라고 해석하고
코드로는
'{grid-template-rows: 1fr, 1fr, 1fr}'로
'{grid-template-columns: 1fr, 1fr;}'로
작성해도 같은 값이 적용됩니다.
오늘은 grid와 container와 관련한
속성에 대해 알아보았습니다.
grid를 사용할 때 직접적으로 보이지는 않지만
크롬에서 개발자 모드를 실행해서 지정한 태그를 눌러보시면
옆에 grid의 버튼을 눌러서 확인해 보실 수 있으실 겁니다.
그러한 방식으로 grid가 잘 적용되었는지 확인하시면 될 것 같습니다.
다음에는 grid에서 item과 관련한 속성에 대해 알아보겠습니다.
감사합니다!
