직접 한번 만들어보면서 css grid를 연습해봅시다.실제로 만들어보면 앞에서 다뤘던 것을 금방 익힐수 있습니다. 페이지 보러가기 간단한 싱글 페이지입니다. 링크에 접속하시면 똑같은 화면을 볼 수 있습니다.예제를 만들 때 도움이 되는 사이트이용하시는 곳이 있다면 상관없지만 해당 사이트를 만들 때 아이콘 등을 어디를 이용할 지 모르겠다면 아래의 사이트를 이용하시면 됩니다. iconmonstr 바로 가기 저는 svg에서 embed를 통해 직접 삽입을 하는 편입니다. 이미지의 경우 저는 핀터레스트를 통해서 이미지를 찾고 이미지의 링크를 div태그의 배경에 삽입했습니다. 또한 css 리셋 등은 검색하면 바로 나오지만 아래에 링크를 첨부합니다. css reset 바로 가기분석해보기예제용으로 만든 것이기 때문에 모..
css flex 박스에서 아이템을 옮기는 속성들을 생각해보세요.주축 방향으로 옮기는 것은 justify-content, 교차축 방향으로 옮기는 것은 align-items 입니다. grid에서도 이와 같은 속성들이 있습니다. 하지만 차이점도 있죠. flexbox는 방향을 설정하는 것에 따라 주축이 달라지기 때문에, 당연히 그에 따라 옮기는 방향이 달라지지만 그리드에서는 justify-content는 항상 가로축으로 이동하고, align-content는 세로축으로 이동시킵니다. 또 그리드가 좀 더 세분화되어 있습니다. justify-items와 align-items 등 아이템들에게 적용되는 속성들도 있습니다.justify-content, align-content 더 알아보기fr과 같은 단위는 유동적입니다. ..
grid를 선언하는 방법그리드가 무엇인 지, 또 플렉스박스와 비교하는 포스팅을 작성할 때 그리드를 선언하는 방법과 트랙을 선언하는 코드를 작성했었습니다. 여기서 잠깐 다시 짚어보고 진행하도록 하겠습니다. display의 값으로 grid를 주는 것이 그리드를 선언하는 방법이고, grid-template-rows와 grid-template-columns로 트랙을 선언할 수 있다고 했습니다. 그럼 형태에 일단은 트랙에 의해 생겨난 "그리드 셀"에 아이템(자식 엘리먼트)들을 하나씩 놓아둔다고 했었습니다. 이까지 기억나시나요? 트랙은 여러가지의 값을 줄 수 있습니다. 지금은 픽셀을 주었지만 그리드에서 사용할 수 있는 새로운 단위인 fr을 다루고 속성들을 다뤄보도록 하겠습니다.새로운 속성 "fr" 배워보기 픽셀은 ..
그리드는 무엇이고, 어떨 때 사용될까요?grid는 display 속성의 값 중 하나입니다. 레이아웃을 짜는데 사용되기 위해 만들어졌습니다. .container {display: grid;} 위와 같은 형태로 선언하기만 하면 쉽게 사용할 수 있습니다. 왜 그리드가 만들어졌고, 레이아웃을 짜는데 사용하기 좋다고 할까요? 그러한 대답은 css의 flexbox와의 비교를 통해서 더 쉽고, 정확하게 알 수 있습니다. 이번 포스팅은 flex 박스와의 비교를 통해서 그리드에 대해서 좀 더 알아보고 미리 알아두셔야 할 용어와 개념들을 설명해보겠습니다. 그리고 그 다음에 그리드가 주어지는 부모에는 어떤 속성들이 따라오는지, 또 자식 엘리먼트에는 어떤 속성들을 줄 수 있는 지를 이어서 포스팅하도록 하겠습니다.flexbox..
간단한 게임으로 배워보는 css의 flex와 gridcss의 flex와 grid를 배워볼 수 있는 간단한 게임을 소개하겠습니다. Flexbox Froggy 바로가기 Grid Garden 바로가기 간단한 게임들로 css flex와 grid를 배워볼수도 있고, 이미 배웠던 분들은 귀엽게(?) 복습할 수 있습니다. 플렉스 박스의 경우 코드를 작성하는 곳 밑에 setting 키를 통해서 난이도를 조절할 수 있습니다. 당근을 키우고 개구리도 도와주세요.Flexbox Froggy 코드보기이 부분부터는 미리보지 마시고, 링크를 타고 간 후 한번 해본 뒤에 보시는 것을 추천드립니다. 난이도가 어려울 수 있는 부분에 대한 해설을 포스팅했습니다. 마지막 단계의 모습입니다. 개구리와 같은 색의 연잎으로 개구리를 보내야 합니..