섹션 7: HTML & CSS 레이아웃 및 포지셔닝 이해 [19일차]

 

 

CSS 그리드를 활용한 웹 디자인 기법

웹 디자인의 세계에서 CSS 그리드는 페이지 레이아웃을 구성하는 데 있어 매우 강력한 도구입니다. 오늘은 CSS 그리드의 기본적인 사용법과 몇 가지 고급 기법을 소개하려고 합니다.

기본 설정

CSS 그리드를 사용하기 위해서는 먼저 그리드 컨테이너를 설정해야 합니다. 이를 위해 display: grid; 속성을 사용합니다. 예를 들어, 두 개의 열을 가진 그리드를 만들고 싶다면 다음과 같이 작성할 수 있습니다.

display: grid;
grid-template-columns: 1fr 1fr;
gap: 100px 200px;

여기서 grid-template-columns: 1fr 1fr;는 두 개의 열이 각각 동일한 크기를 가지도록 설정합니다. gap 속성은 열과 행 사이의 간격을 정의합니다. 위 코드에서는 열 간격을 100px, 행 간격을 200px로 설정했습니다.

그리드 아이템 조정

그리드 내의 특정 아이템에 대한 스타일링도 중요합니다. 예를 들어, 세 번째 아이템의 배경색을 노란색으로 설정하고, 두 열에 걸쳐 표시하고 싶다면 다음과 같이 작성할 수 있습니다.

li:nth-of-type(3) {
    background-color: yellow;
    grid-column: 1 / span 2;
}

이 코드는 리스트의 세 번째 아이템을 타겟으로 하며, grid-column: 1 / span 2;는 해당 아이템이 첫 번째 열부터 시작하여 두 열에 걸쳐 표시되도록 합니다.

마무리

CSS 그리드는 웹 페이지의 레이아웃을 다양하고 유연하게 구성할 수 있게 해주는 강력한 도구입니다. 이번 포스트에서 소개한 기본적인 사용법을 통해 여러분도 효과적인 웹 페이지 디자인을 시도해 보시길 바랍니다.

 

 

 

기본을 넘어서

이 모듈에서 우리는 position 속성을 살펴보고 플렉스박스와 그리드가 요소의 레이아웃을 쉽게 변경할 수 있는 훌륭한 기술임을 이해했습니다.

이 모듈에서 다루는 개념을 통해 여러분의 프로젝트에서 이러한 기술을 사용할 준비가 되었어요.

여기에서 더 자세히 알아보려면 아래에서 이 과정의 핵심 요점을 넘어서는 전용 리소스를 찾아서 자유롭게 탐색해 보세요.

---

위치 속성에 대한 추가 정보

=>https://academind.com/tutorials/the-position-property/

플렉스박스 - 플렉스 컨테이너 => https://academind.com/tutorials/flexbox-basics-container/

플렉스박스 - 플렉스 아이템 => https://academind.com/tutorials/flexbox-flex-items/

플렉스박스와 그리드 비교 => https://academind.com/tutorials/css-grid-vs-flexbox/