css 그리드로 간단한 페이지 만들어보기

직접 한번 만들어보면서 css grid를 연습해봅시다.

실제로 만들어보면 앞에서 다뤘던 것을 금방 익힐수 있습니다.

하늘 사진 사이트입니다.

페이지 보러가기

간단한 싱글 페이지입니다. 링크에 접속하시면 똑같은 화면을 볼 수 있습니다.

예제를 만들 때 도움이 되는 사이트

이용하시는 곳이 있다면 상관없지만 해당 사이트를 만들 때 아이콘 등을 어디를 이용할 지 모르겠다면 아래의 사이트를 이용하시면 됩니다.

iconmonstr 바로 가기

저는 svg에서 embed를 통해 직접 삽입을 하는 편입니다.

이미지의 경우 저는 핀터레스트를 통해서 이미지를 찾고 이미지의 링크를 div태그의 배경에 삽입했습니다.

또한 css 리셋 등은 검색하면 바로 나오지만 아래에 링크를 첨부합니다.

css reset 바로 가기

분석해보기

예제용으로 만든 것이기 때문에 모든 소스코드를 설명하지는 않습니다. 만드시고 나서 코드가 궁금하면 포스팅의 맨 아래의 깃허브에서 확인할 수 있습니다.

예제 페이지는 2가지 부분으로 나눠집니다. simple이라는 제목과 아이콘이 있는 네비게이션이 하나의 태그 안에 들어가 있고, 밑에 하늘 사진들이 있는 부분이 또 하나의 태그들에 들어가 있습니다. 

1차원적 레이아웃의 경우 플렉스박스가 아주 간단하고 좋은 답입니다. 즉 제목과 네비게이션이 있는 부분은 플렉스박스를 이용하면 아주 편리하게 배치할 수 있습니다.

 그리드를 이용하는 하늘 사진부분들은 총 5개의 아이템이 정의되어 있습니다. 공간을 어떻게 나누나요? 맨처음 트랙을 어떻게 설정할 지 고민하신 뒤에 만들면 간단합니다. column은 3개로, row는 2개로 하면 되겠죠? 그리고 그리드의 아이템들 사이의 공간은 gap을 통해 주어야 하는 것도 앞에서 배운 바 있습니다.

.content는 아이템들을 감싸고 있는 그리드가 선언된 div 엘리먼트입니다. 가장 어려운 부분이라고 생각해서 코드를 설명하겠습니다.

우선 calc은 계산하는 함수입니다. 그냥 높이 값을 100%주면 제목과 네비게이션 부분 때문에 스크롤이 생깁니다. 그래서 그 부분을 뺀 값을 높이로 지정하기 위해 calc 함수를 사용했습니다. 또 box-sizing 속성은 엘리먼트의 크기를 어떻게 설정할 것인 지 정하는 속성입니다. 좀 더 풀어 설명하면 "보더값을 포함한 것까지가 내가 지정한 크기여야 한다."라고 저는 정의했습니다. 내가 지정한 크기는 보더값을 포함하지 않아야한다 등 이런 엘리먼트의 크기를 정하는 것입니다. 보통 값으로 border-box를 줍니다. 테두리를 포함시켜야 레이아웃을 짤 때 좀 더 헷갈리지 않고 편하게 짤 수 있기 때문입니다. 나머지 그리드 관련한 코드는 위에서 설명한 것들을 그대로 적어넣은 것입니다.

어려우시면 이 링크를 클릭해서 깃허브에서 전체 소스코드를 확인해주세요.