CSS GRID 마스터: FIGMA 디자인 웹구현 실전

아래와 같은 디자인이라면 여러분은 어떻게 스타일을 작성하시나요?

여러분은 아마도 float이용하거나, flex를 이용하여 요소들을 배치하시겠죠? 디자인과 같이 12컬럼 그리드에 맞춰 요소들이 가로, 세로 정렬이 잘 되어 있는 경우에는 float 이나 flex를 이용하여 배치하는 것이 효율적일 겁니다.

위 디자인은 float이나 flex를 이용하여 배치하기 쉽지 않습니다, 그렇다고 모든 요소들을 absolute로 처리하기에는 무리가 있고, 그렇게 처리하면 이후 유지관리도 불편하고 반응형으로 구현한다면 더욱더 유지관리가 힘든 사이트가 되어 버립니다.

위의 예시와 같은 디자인을 참조하여 구현할 때는 아래와 같이 그리드를 설정하고 설정된 그리드에 요소들을 배치하는 CSS GRID 를 활용해야 합니다.

주요 학습 내용

CSS 그리드의 다양한 속성을 학습합니다.

1. Grid Basic

   

2. Fraction

   

   
   

3. Positioning - 라인 번호 활용

   

4. Positioning - 그리드 셀 이름 활용

   
   

   

5. auto-fit, min-max 함수

   
   컨테이너의 너비에 따라 최대한 많은 요소를 배치하는 방법을 학습합니다.
   
   

6. 자동 행 배치
   별도의 높이를 지정하지 않은 행도 공간이 모자른 경우 자동으로 행높이를 설정할 수 있습니다.
   
   

7. 그리드 라인의 이름으로 배치하기

   

   
   

8. Grid에서만 사용 가능한 새로운 속성
   flex의 align-items과 비슷한 속성을 교차축 뿐만 아니라 주축에서도 활용할 수 있습니다.
   
   

9. Grid에서 사용 가능한 FLEX 속성
   display:grid가 적용된 요소에서도 다양한 flex 속성을 사용할 수 있습니다.
   
   

10. 자동으로 행 배치하기 - auto-fit, auto-fill
    가능한 한 많은 열을 배치하고, 남는 공간을 처리하는 방법을 학습합니다.

    
    
    

11. 웹사이트 구현하기 - article layout
    학습한 grid 속성을 활용하여 간단한 웹페이지를 구현합니다.

    

    
    
    

12. Grid와 flex활용
    css grid와 flex를 활용하여 웹페이지 스타일을 작성하는 방법을 학습합니다.

    
    

디자인 참조 웹사이트 구현 노하우를 학습합니다.

핵심정리 PDF를 제공합니다.

flex의 모든 속성에 대한 설명과 실습예제 파일을 제공합니다.

시작 예제를 제공합니다.

01_grid폴더에는 그리드 핵심 속성에 대한 예제 파일을 제공합니다. 강의를 보면서 학습하실수 있습니다.

완료 예제를 제공합니다.

완료본 소스를 제공합니다. 수업을 통해 완성한 예제와 비교해보세요.

다음 강의를 추천합니다.