CSS 그리드 반응형

Sohyun·2021년 7월 18일
0

21Summer

목록 보기
11/18

반응형 웹사이트로 만들기 위해서 CSS 그리드를 사용하기로 했음.
일단 행(세로)는 기본적으로 데스크탑에서는 12개의 컬럼을 사용하는 것이 기본 설정이라고 함.
→ grid-template-columns: repeat(12, 1fr)

미디어 퀴리 (Media Query)

  • PC ) @media (min-width: 1024px) { /*PC CSS*/ }
  • Tablet ) @media (min-width: 768px) and (max-width: 1024px) { /*Tablet CSS*/ }
  • Phone ) @media (max-width: 767px) { /*Mobile CSS*/ }

참고 자료
: 티스토리 > CSS 쉽게 배우기 | 그리드 레이아웃
:CSS 그리드(Grid) 반응형 레이아웃 미디어 쿼리
: CSS3 - 83 [ CSS GRID #7] 그리드와 플렉스를 활용한 반응형 레이아웃 구현하기 // 실제로 구현하는데 사용한 영상

profile
Majoring in Computer Science

0개의 댓글