Responsive Web Design(드림코딩)

FLUID LAYOUT: Flex grid, Flex box, %, vw, vh

media queries(mdn 찾아보기)

//스크린이 적어도 800px이상일때 width를 50%fh 표시해주세요
@media screen and (min-width: 800px){ 
	.container {
    	width: 50%;
        }
    }

responsive navBar css

body{
      margin:0;
      font-family:'Source Sans Pro';
  }
  a{
      text-decoration:none;
      color:white;
  }
  .navbar{
        display:flex;
        justify-content:space-between;
        align-items:center;
        background-color:#263343;
        padding:8px 12px;    
    }

    .navbar__menu {
        display:flex;
        list-style:none;
        padding-left:0;
    }

    .navbar__menu li{
        padding: 8px 12px;
    }
   
    .navbar__menu li:hover {
        background-color:#d49466;
        border-radius: 4px;
    }

    .navbar__logo i{
      font-size:24px;
      color: #d49466;
    }

    .navbar__icons {
        list-style:none;
        color:white;
        display:flex;
        padding-left:0;
    }
    
    .navbar__icons li {
        padding: 8px 12px;
    }

    .navbar__toggleBtn{
        display:none;
        position:absolute;
        right:32px;
        font-size:24px;
        color:#d49466;
    }


    @media screen and (max-width:768px){
        .navbar{
           flex-direction: column;
           align-items:flex-start;
           padding:8px 24px;
        }

        .navbar__menu{
            display:none;
            flex-direction: column;
            align-items: center;
            width:100%; 
            /*넓이 설정해줘야 align-items 적용됨*/
        }

        .navbar__menu li{
            width:100%;
            text-align:center;
        }

        .navbar__icons{
            display:none;
            justify-content: center;
            width:100%;
        }
        
        .navbar__toggleBtn{
            display: block;
        }

        /*toggle 버튼이 눌리면 active 상태로 */
        .navbar__menu.active,
        .navbar__icons.active {
          display: flex;
        }
    }