[McDonald] 맥도날드 홈페이지 클론코딩 | 그리드 레이아웃 반응형 웹

이번 맥도날드 크론코딩에서 핵심은 ' 그리드레이아웃을 이용한 반응형 웹 ' 을 구현하는 것이다.

 

 

 

 

 

 

 

 

주요코드 설명

 

#conteiner {

width: 100vw;

height: 100vh;

display: grid;

grid-template-rows: 0.5fr 1fr;

grid-template-columns: 1fr;

grid-template-areas:

"header"

"content";

}

웹의 전체 넓이와 높이를 각각 100vw, 100vh로 설정하여 전체를 사용하게했고

헤더와 컨텐츠를 그리드레이아웃을 이용해여 구획하였다.

 

header #nav {

display: flex;

justify-content: center;

align-items: center;

position: fixed;

background-color: #fff;

width: 100vw;

top: 0px;

}

헤더부분은 fixed를 사용해 스크롤을 내려도 붙어있게 했다.

 

#content > #main{

display: grid;

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

grid-gap: 3rem;

컨텐츠의 카드부분은 repeat을 사용해 반복되게 하여 반응형을 구현했다. 

 

 

 

새롭게 알게된 사실 

<img src="http://placehold.it/100x70" alt="" />

 

http://placehold.it/가로x세로

위의 주소로 img 태그를 사용하면 임시아이콘의 위치를 지정할 수 있다.