우선 기본적인 레이아웃이 있어야 하므로 이전에 holy grail 레이아웃을 그대로 불러와서 media 를 500 이상일때 폰트크가, 헤드 배경색과, 500 이하일떄에 새로로 변경 폰트사이즈 14, 헤드배경 오랜지색등을 변경해 보았습니다.
이전에 모바일에서 반응형 홈페이를 만들기 위한 media 태그에대해서 알아보았으며 이제 직접 홈페이 레이아웃을 통해서 mediaquery 를 직접 적용하여서 반응형 디자인을 꾸며보도록 하겠습니다.
이전에 모바일에서 반응형 홈페이를 만들기 위한 media 태그에대해서 알아보았으며 이제 직접 홈페이 레이아웃을 통해서 mediaquery 를 직접 적용하여서 반응형 디자인을 꾸며보도록 하겠습니다.
아래의 예제와 같이 media 속성을 max-width 값을 500은 500px 크기 이하일떄 font-size는 14px, background 는 orange색, flex-direction 를 column 을 적용하세 서로로 변경을 하였습니다.
media 속성에서 500px 이상일떄 아래와같이 헤드는 노란색 폰트크기는 20px로 적용되 예제입니다.
media 속성으로 500px 이하로 화면을 줄였을때에 헤드는 노란색, 폰트크기는 14px, order 속성으로 main은 order을 0으로 가장위에 나타나고 nav은 order 1로 1번째에 나타나게 되며 마지막 aside 는 order 을 2로 하였지만 display 을 none로 변경하여 나타나지 않는것입니다.
medea 속성을 min-width 501 은 501px 이상일떄 font-size는 20px, background 는 yellow 를 적용하여 500 크기 이상일떄 폰트 크기는 20px, 해드 배경은 노란색으로 적용해 보았습니다.
media 속성에서 500px 이상일떄 아래와같이 헤드는 노란색 폰트크기는 20px로 적용되 예제입니다.
media 속성으로 500px 이하로 화면을 줄였을때에 헤드는 노란색, 폰트크기는 14px, order 속성으로 main은 order을 0으로 가장위에 나타나고 nav은 order 1로 1번째에 나타나게 되며 마지막 aside 는 order 을 2로 하였지만 display 을 none로 변경하여 나타나지 않는것입니다.
