holy grail 레이아웃의 경우에는 header 상단 , nav 왼쪽 main 중간, ad 광고, footer 하단 부분으로 웹브라우저에서 모든 공간을 활용하여 기본적인 홈페이지를 만드는데 기초가 되는 레이아웃이라고 할수가 있습니다.
body 부분에 전체 크기의 class 값으로 container 을 지정하고, header 부분의 로고, section 은 중앙부분으로 class 를 content 를 지정하고 nav는 메뉴, main 은 본문내용, aside 는 왼쪽의 광고부분이고 footer 는 하단 부분에 홈페이지 주소를 넣습니다.
디자인으로 head 부분에 style 에서 전체 레이아웃을 수직으로 만들기 위해서 flex-direction 태그를 column 속성을 넣습니다. 그리고 header, footer 에 border 값을 넣고 , content는 display flex 를 적용합니다.
화면이 움직임에 따라서 반응하기 위해서는 nav, aside 에 flex 태그로 basis 속성을 150px 넣고, shrink 를 0 으로 하게 되면 중간의 있는 main 만 화면이 줄어들면서 반응하게 됩니다.
기본적으로 head 부분의 style 와 body 를 분리하여 정리하였으며 여기서 flex 가 어떤기능을 발휘하는지 이해할수가 있으며 전체적인 이해로 레이아웃을 만드는데 크게 도움이 될수가 있습니다.
기본적으로 head 부분의 style 와 body 를 분리하여 정리하였으며 여기서 flex 가 어떤기능을 발휘하는지 이해할수가 있으며 전체적인 이해로 레이아웃을 만드는데 크게 도움이 될수가 있습니다.
