css grid 2

Grid 만들기 / grid area와 span 활용

Flexbox에 관한 내용 이후 다루는 것은 grid 이다. flex와 유사한 문법구조를 가지고 있다. grid를 설정하려면 flex와 비슷하게 display: grid; 혹은 display: inline-gird; 로 표현하면된다. 기본적으로 grid는 1개의 column을 가지고있다. 새로운 아이템을 추가할 때마다 새로운 row가 생성되게 된다. 그렇지만 이렇게 하면 당연히 공간이 부족하기 마련이고, 따라서 우리는 row와 column을 몇개로 할 것인지 지정을 해줘야만한다. column과 관련된 명령어 grid-template-columns 를활용하면 column의 갯수와 , 너비를 결정할 수 있다. grid-template-columns: 100px 200px ; 위의 예시를 보면 100px 너비..

Responsive Website 만들기 . 사용환경에 따라 달라지는 화면 적용/flex box에 관해서 + 쉽게 배우는 사이트 추천

Grids 우리말로 하면 격자라고 부를 수 있는데, 화면을 구획별로 나누어 놓는 것 자체를 의미하는 것 같다. 이렇게 구획으로 나누어서 얻을 수 있는 이점은 아래와 같다. 화면 배열이 용이해짐 디자인의 일관성에 도움이 됨(같은 간격의 배열) 따라서 유저가 웹사이트를 알아가는데 매우 도움이 됨(유저 친화적임) 우선 기본적인 개념이 크게 Colomn , Gutter , Margin 세가지가 있는데, 간단하게 도식으로 보면 다음과 같다. Column은 보통 12~16개 정도로 이루어져있고, 화면의 너비를 분할하는 수직형의 container라고 생각하면 된다. 각각의 칼럼을 부딪히지 않게 빈공간을 두는 것이 Gutter. 그리고 이용자의 환경에 따라 화면에 충돌하지 않게 공간을 남겨두는 것이 margin이라고 ..