GRID2 화면에 내용이 너무 많아서 css로 하나씩 지정하기 번거로울 때 화면에 보여줄 내용이 너무 많은데 하나하나 css로 적용하기 번거롭지 않나요? 행에 내용이 8개 뿐이었으나 그 이상 추가될 수 있다면? 새로운 행에대해 자동적으로 설정해 주는 속성이 있습니다. grid-auto-flow 인데요. 값에 column, row 두가지를 지정해줄 수 있어요. 열 방향으로 내용을 이어가고 싶다면 .grid { ... /* default setting */ display: grid; height: 50vh; grid-template-columns: repeat(4, 100px); grid-template-rows: repeat(4, 100px); /* default setting에서 설정한 범위를 벗어날 경우 아래 코드로인해 자동으로 다음에 올 element들이 붙을 방향과 범위를.. 2020. 5. 24. grid로 웹 레이아웃 구성하기 CSS 그리드 레이아웃(Grid Layout)은 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 콘트롤 간의 관계를 정의하는 데 아주 탁월합니다. 테이블과 마찬가지로 그리드 레이아웃은 세로 열과 가로 행을 기준으로 요소를 정렬할 수 있습니다. 하지만, 테이블과 달리 CSS 그리드는 다양한 레이아웃을 훨씬 더 쉽게 구현할 수 있습니다. 예를 들어, 그리드 컨테이너 속 자식 요소를, 마치 CSS로 일일이 위치를 지정해 준 것처럼, 실제로 겹치게 층을 지면서 자리를 잡도록 각 요소의 위치를 지정해 줄 수도 있습니다. MDN, "CSS grid", https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Grid_La.. 2020. 5. 24. 이전 1 다음 LIST
