CSS 그리드 정리

이 글은 작성자의 개인 공부를 위해 작성한 글입니다.
실제 이론, 실습과 다른 부분이 있을 수 있습니다.

 

CSS에서 그리드(Grid)는 웹페이지의 레이아웃을 구성하는 데 사용되는 강력한 레이아웃 시스템이다.

그리드를 사용하면 웹페이지를 행과 열로 나누어 유연하고 일관된 레이아웃을 쉽게 설계할 수 있다.

CSS 그리드는 CSS의 일부로서, 그리드 레이아웃을 정의하기 위한 다양한 속성들을 제공한다.

 

1. 컨테이너(Container)

- 그리드를 정의하기 위한 부모 요소를 컨테이너라고 한다.

- display: grid; 속성을 사용하여 해당 요소를 그리드 컨테이너로 지정한다.

.container {
    display: grid;
}

 

2. 행과 열 정의 

- grid-template-rows 및 grid-template-columns 속성을 사용하여 그리드의 행과 열을 정의한다.

.container {
    display: grid;
    grid-template-rows: 100px 200px 100px; /* 세로로 3개의 행 */
    grid-template-columns: 1fr 2fr 1fr; /* 가로로 3개의 열, fr은 비율을 나타냄 */
}

 

3. 그리드 아이템(자식 요소)

- 그리드 아이템은 그리드 컨테이너의 자식 요소이다.

- 각 그리드 아이템은 특정 행 및 열에 배치된다.

.item {
    grid-row: 2 / span 2; /* 2번 행에서 시작하며 2개의 행을 차지함 */
    grid-column: 2 / 4; /* 2번부터 4번 열까지 차지함 */
}

---

4. <div> 태그

- <div>(division) 태그는 블록 레벨 요소로, 웹페이지의 레이아웃을 그룹화하고 섹션을 나누는 데 사용된다.

- 주로 CSS 스타일링이나 JavaScript를 적용하기 위해 구획을 나눌 때 사용한다.

- 예를 들어, 여러 요소를 <div>로 감싸고 해당 <div>에 스타일을 적용하여 그룹 단위로 스타일을 지정할 수 있다.

 

5. <span> 태그

- <span> 태그는 인라인 요소로, 텍스트나 인라인 요소들을 그룹화하거나 스타일을 적용할 때 사용된다.

- <div>와 달리 블록 레벨이 아니라 문장 내의 특정 부분에 스타일을 적용할 때 유용하다.

- 주로 텍스트의 일부를 선택하여 스타일을 적용하고자 할 때 사용된다.