미디어쿼리

반응형 디자인의 심장과도 같은존재라고 함!

<style>
    @media (width:500px){
        body{background-color: red;}
    }
</style>

-> 화면이 500px이 되었을때 배경색이 빨간색이 된다는 뜻

max-width는 그 해당 면적 이하일때를 의미하고
min-width는 그 해당 면적 이상일때를 의미한다.

만약 아래와 같은 내용을 원할때,
~500px : red
501~600px : green
601px~ : blue

<style>
    @media (max-width:600px){
        body{background-color: green;}
    }
    @media (max-width:500px){
        body{background-color: red;}
    }
    @media (min-width:601px){
        body{background-color: blue;}
    }
</style>

이렇게 코딩할 수 있다.
->즉 코드가 나중에 나오는 것이 우선순위가 높음!

지난 flex 수업에서 만든 양식을 활용하면

 <style>
        .container{
            display: flex;
            flex-direction: column;
        }
        header{
            border-bottom:1px solid gray;
            padding-left:20px;
        }
        footer{
            border-top:1px solid gray;
            padding:20px;
            text-align: center;
        }
        .content{
            display:flex;
             
        }
         
        .content nav{
            border-right:1px solid gray;
        }
         
         
        .content aside{
            border-left:1px solid gray;    
        }
        @media(max-width:500px){
            .content{
                flex-direction: column;
            }
            .content nav, .content aside{
                border:none;
                flex-basis: auto;
            }
            main{
                order:0;
            }
            nav{
                order:1;
            }
            aside{
                order:2;
                display: none;
            }
        }
        nav, aside{
            flex-basis: 150px;
            flex-shrink: 0;
        }
        main{
            padding:10px;
        }
    </style>

이렇게 코딩하면 500px 이하일때 flex-direction이 column으로 적용되고
nav와 aside의 테두리를 사라지게 할 수 있다.
또 order를 이용해 main의 순서를 최우선으로 불러올 수 있다.

float

본문안에서 이미지를 삽입할때 자연스럽게 삽입하기 위해 사용
텍스트가 이미지를 피해가게끔 할 수 있음.

<style>
img
{
float:left;
}
</style>

이런 식으로 사용한다

float 활용 holy grail layout

float는 주로 레이아웃을 잡을때 활용함,

<style>
        *{
            box-sizing: border-box;
        }
        .contaienr{
            width: 540px;
            border: 1px solid gray;
            margin: auto;
        }
        header{
            border-bottom: 1px solid gray;
        }
        nav{
            float: left;
            width: 120px;
            border-right: 1px solid gray;
        }
    
        article{
            float: left;
            width: 300px;
            border-left: 1px solid gray;
            border-right: 1px solid gray;
            margin-left:-1px;
        }
        aside{
            float: left;
            width: 120px;
            border-left: 1px solid gray;
            margin-left:-1px;
        }
        footer{
            clear:both;
            border-top: 1px soldi gray;
            text-align: center;
            padding: 20px;
        }
    </style>

이런식으로 holy grial layout을 잡을 수 있지만
flux를 사용하는것이 훨씬 간단하다.