I am developing person.

Media query - 반응형 디자인

https://tjdnjs.github.io/Web-practice/mediaquery.html

1. 화면의 width가 600px일 때 배경색 지정

아래의 코드는 with가 딱 600px일 때만 배경 색이 지정되므로, 효용은 없다. 이때 width를 max-width로 바꾸면 600px 이하, min-width로 바꾸면 600px 이상의 크기에서 배경색이 지정된다.

@media (width:600px){
    body{
        background-color: powderblue;
    }
}

2. 화면의 width를 ~600px, 601~800px, 801px~ 로 나누어 배경색 지정

이 때 주의해줘야할 점은 max-width:800px일 때와 max-width:600px일 때의 css 순서를 어떻게 배치하는가이다. 기본적으로 css는 같은 요소(이 코드에서의 body)를 선택할 때에는 나중에 오는 코드를 우선시하기 때문에, 선택 범위가 더 좁은 max-width:600px일 때의 코드를 더 뒤에 배치해야만 구상한대로 실현된다.

@media (max-width:800px){
    body{
        background-color: rgb(183, 230, 176);
    }
}

@media (max-width:600px){
    body{
        background-color: powderblue;
    }
}

@media (min-width:801px){
    body{
        background-color: rgb(196, 176, 230);
    }
}

3. mobile에서도 최적화된 웹 구현

head에 viewport 설정을 포함시킨다

<meta name = "viewport" content="width = device-width, initial-scale=1.0">

Media query - holygrail 레이아웃 기반 활용

https://tjdnjs.github.io/Web-practice/mediaquery1.html

width가 550 이하일 때를 모바일 환경으로 간주하여, 이에 최적화된 화면을 구현하였다. row로 되어있던 content의 flex-direction을 column으로 수정하고, nav 태그와 aside 태그의 border을 삭제하였다. 또한, flex-basis에 할당된 값이 정렬 방향을 column으로 바꾸며 세로 크기로 할당되어 불필요한 여백이 생기므로, auto로 설정해주어 내용의 크기만큼만 공간이 할당되도록 하였다.

aside의 경우 모바일 환경에서는 불필요하다 생각하여 display를 none으로 설정해주었다. 이 때 모바일 환경에서 미디어쿼리를 사용한 코드가 무조건 우선시 되어야하므로, css 코드의 최하단에 작성해주었다.

nav, main, aside의 순서를 바꾸는 부분도 수업에서 다루었으나 nav가 상단에 있는 것이 더 마음에 들어 수정하지 않았다. 수정하고 싶을 시, order 속성을 통해 순서를 다시 부여할 수 있다.

holygrail 레이아웃의 경우 기존에 작성해둔 코드를 활용하였기에 강의 코드와 다른 부분이 있어, container의 width도 추가로 조정해주었다.

@media(max-width:550px){
    
    .container{
        width: 90%;
    }

    .content{
        flex-direction: column;
    }

    .content nav, aside{
        border : none;
        flex-basis: auto;
    }

    aside{display:none;}
}

참고