css grid
-
display: grid - 04. Grid Tracks / Cells /track-list 용어 정리, grid-template-columns /rows 사용법에 대해서html, css/css-display속성들 정리 2020. 7. 18. 11:12
지난 포스팅에 이어서 css display:Grid로 리스트 배열 하는 법에 대해서 포스팅을 하겠습니다. 1. 리스트들의 부모 Element 를 Grid Container로 만든다. 2. 몇 행 몇 열을 만들건지 정의 합니다. 몇 행 몇 열을 만들려면 grid-template-columns 와 grid-template-rows 속성을 사용 해야 됩니다. grid-template-columns 와 grid-template-rows 를 사용 해보겠습니다. https://www.w3.org/TR/css-grid-1/#grid-track-concept 에서 사용법을 확인 하면 아래의 이미지처럼 나오는데 빨간 박스 영역들의 용어들이 생소해서 이 부분들 부터 포스팅을 하려고 합니다. 먼저 trak-list 가 나오..
-
[css] display: grid - 01.gird 속성을 사용해야하는 이유 및 장점 / subgrid에 대해서 / 브라우저 지원 범위에 대해서html, css/css-display속성들 정리 2020. 5. 11. 22:34
01. display:grid에 대해서 (grid 소개) display: grid 라는 속성이 있습니다. (※ subgrid를 검색 해서 오신분은 본문 내용 하단 04번 내용을 바로 보시길 바랍니다.) display: grid를 처음 접하는 사람들에게 쉽게 이해를 할 수 있게 좀더 직관 적으로 설명을 해보면 grid는 다음과 같은 장점들이 있습니다. 1) grid를 사용 하면 아래의 형태의 레이아웃을 고민 안하고 쉽게 만들 수 있습니다. 2) 리스트 아이템 끼리 사이의 간격을 간단히 줄 수 있습니다. 보충설명을 하면 일반적으로 위에 이미지처럼 간격이 있는 카드 리스트 형태의 레이아웃을 코딩을 하기 위해서는 아래의 css 처럼 작성해야 합니다. float 속성을 사용한 css / grid 속성을 사용한 c..
-
책 - 새로운 CSS 레이아웃Book/새로운 CSS 레이아웃 2019. 2. 24. 13:22
레이철 앤드루 지음 / 이미령 역/ 웹액츄얼리코리아 일단은 작년 5월에 나온 최근 css 책이고 서점에서 우연히 봤는데, 좀 보다가 유용한 정보가 많아 바로 산 책 임. 짧은 후기를 쓰자면 이책에서 주로 다루는 내용은 css 속성중에 flex 와, grid에 대해서 설명 해 주고 있는데, 기존 float 과 absolute를 사용한 레이아웃들의 부족한점, 불편한점들을 보여주고, 똑같은 레이아웃을 flex와 grid드를 사용하여 기타 편하고 새로운 추가 기능 등을 보여줌으로써 좀 더 쉽고 유연하고 완벽한 레이아웃 만들 수 있는 것을 보여주고 있습니다. 각 각 해당 설명의 레이아웃의 예제들도 있어서 좀더 플렉스와 그리드를 배우는데 있어서 w3schools의 설명보다 쉽게 다가 왔고, 이 책을 보면서 내가 몰..