반응형 웹 (간단한 예제 Header 만들기)

반응형웹 디자인(responsive web design, RWD)이란 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법을 말한다.

 

간단히 말하면 당신이 가로 10m 선에 맞춰서 가구나 예쁜 화분들을 정리해 놓았다고 치자. 물론 10m 짜리에 맞춰서 했을 때는 이쁘게 해놓았을 것이지만 주변에서 미안한데 5m 공간만 써라해서 공간이 줄어들었을 때도 이쁘게 정리가 되어있을 까 하는 것이다. 포인트는 5m 공간에 대비한 배치나 디자인도 신경을 써야 한다는 것이다.

 

 

반응형 웹을 구축하기 위해서는 CSS의 미디어 쿼리가 필요하다. 미디어 쿼리는 CSS3에 포함되어 있으며, 컨텐츠의 변경없이 주로 화면의 크기에 따라 스타일 시트를 달리하여 적절한 모양을 보여줄 수 있다.

 

사용법은 간단한 예제를 통해서 알아보자.

 

 

 

 

 // html 부분~~
 <section id="header">
        <div class="wrapper">
            
            <div class="title"><i class="fas fa-kiss-wink-heart"></i> DevilFront</div>
            <ul class="lists">
                <li>Commu</li>
                <li>Gallery</li>
                <li>QnA</li>
                <li>AboutUs</li>
            </ul>
            <div class="log">Log In</div>
        </div>
    </section>
    
    
    //ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ//
    
    //CSS 부분
    
    #header{
    font-weight: bold;
    background-color: brown;
    font-size: 30px;
    color: white;
}
.wrapper{
    width: 100%;
    min-height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.lists{
    display: flex;
    margin-right: 60px;
}
.lists li{
    margin-right: 20px;
}
.title{
    font-size: 40px;
    margin-left: 30px;
}
.log{
    margin-right: 30px;
}

    

 

간단하게 PC 화면 기준으로 헤더를 하나 만들어 보았다. 

 

 

이 사진은 그냥 모바일 기준으로 화면을 축소시켰을 때 화면이 꺠지는 모습을 보여준 것이다. 한번 미디어 쿼리를 이용해서 다른 모바일 기준 화면 넓이 일때 보여지는 다른 스타일을 입혀보겠다. 

 

 

 

 

 

 

 

#toggle{
    position: absolute;
    right: 20px;
    top: 10px;
    color: white;
    font-size: 40px;
    display: none;
} // 화면이 작아졌을 때 목록을 보기위한 버튼 생성 none 으로 숨겨두기!!


@media screen and (max-width: 768px) { 
    .wrapper{
        flex-direction: column;
        align-items: flex-start;
    }
    .lists{
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
    .lists li{
        padding: 5px 15px;
    }
    .log{
        display: flex;
        justify-content: center;
        width: 100%;
        text-align: center;
        padding-left: 30px;
    }
    #toggle{
        display: block;
    }

}

// 화면이 768px 보다 작아졌을 때에 해당할 스타일들 먹여놓기 

//ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ//
$("#toggle").click(function(){
    $(".lists").toggle(400);
    $(".log").toggle(400);
});

// 제이쿼리로 토클효과를 준 부분!!

 

간단한 정리!!

 

 

1. 미디어 쿼리를 이욯해서 모바일 화면 크기일 때 (768px) 일 때 해당하는 스타일들 작성!!

2. 모바일용 화면 까지 생각하고 싶다면 반응형 웹 필수!! (근래에는 모바일 비율이 더 높을 정도로 필수적인 요소);