django로 내 웹페이지 만들기(2) - 반응형 웹, Navigation Bar 토글하기 + Header, Footer 꾸미기

반응형 웹에서 nav 관련된 사항을 만들어보자.

 

 

가로 폭이 768 pixel 이하일 때에

#nav_list 는 보이지 않게, #nav_btn 은 보이게,

가로 폭이 768 pixel 초과일 때에

#nav_list 는 보이게, #nav_btn 은 보이지 않게,

만들어보자.

 

(여기까지 만들면 static 한 부분은 다 구현한 것 같다. pycharm 으로 넘어가자)

 

1. css로 header, nav, footer 의 요소 디자인하기

768 pixel 기준으로 없어질 요소는 없어지도록, 보일 요소는 보이도록 하였다.

footer 는 마지막 리스트에는 버티컬바( | ) 같은 걸 보이지 않게 구현했다.

 

Header_nav_footer.css 코드 보기👇

/**
 * File     : header_nav_footer.css
 * Date     : 2022. 05. 31
 * Author   : Odin
 * Last Update  : 2022. 05. 31
 * Description:
 *      Design <header> and <nav> and <footer>
 */

nav a, footer a {
    /* make <a> area to whole <li> */
    display: block;
    /* remove <a> style */
    text-decoration: none;
    color: inherit;
}


footer .footer_wrap {
    text-align: center;
}
footer ul li {
    padding: 4px 8px;
    display: inline-block;
}
footer ul li:not(:last-child) {
    border-right: 2px solid black;
}

/* Common Settings on Mobile Devices */
@media screen and (max-width: 768px) {
    header {
        height: 24px;
    }
    header .header_wrap {
        height: inherit;
    }
    header img {
        height: 40px;
        position: absolute;
        left: 8px;
        top: 0px;
    }
    header span {
        color: black;
        margin-left: 44px;
        padding: 0 8px;
        height: 40px;
        line-height: 40px;
        display: inline-block;
        position: absolute;
        top: 0px;
    }
    header .introduce {
        display: none;
    }

    .nav_wrap > i {
        height: 24px;
        width: 24px;
        text-align: center;
        line-height: 24px;
        background-color: aliceblue;
        position: absolute;
        right: 0;
        top: 0px;
        font-size: 1.5rem;
        padding: 8px;
    }
    .nav_list {
        display: none;
    }
    .nav_list > li {
        font-size: 1.2rem;
        border-top: 1px solid black;
        padding: 8px;
    }
    .nav_list > li:last-child {
        border-bottom: 1px solid black;
    }

    footer li:first-child {
        margin: 4px 0;
    }
    footer li:last-child {
        margin-bottom: 4px;
    }
}
/* end Common Settings on Mobile Devices */


/***********************************************************************/
/***********************************************************************/
/***********************************************************************/


/* Common Settings on Computers */
@media screen and (min-width: 769px) {
    header {
        height: 40px;
    }
    header .header_wrap {
        height: inherit;
    }
    header img {
        height: 40px;
    }
    header a span {
        color: black;
        padding: 0 8px;
        position: absolute;
        line-height: 40px;
    }
    header .introduce {
        float: right;
        line-height: 40px;
    }

    #nav_btn {     
        display: none;
    }
    #nav_list {
        text-align: right;
    }
    #nav_list li {
        display: inline-block;
        text-align: center;
        margin-left: 4px;
    }
    #nav_list li > * {
        padding: 8px 12px;
        width: 60px;
        display: block;
    }
    #nav_list li > *:hover {
        background-color: black;
        cursor: pointer;
    }
}
/* end Common Settings on Computers */

 

 

2. Javascript로 요소 다자인하기

Javascript 에서는 window 의 가로 폭이 기준점(768px)에 따라서 element가 변화하도록 하자. (windows.addEventListener 로 annonymous 함수를 추가하였다.)

 

그리고 #nav_btn 을 클릭할 때에 #nav_list가 보이거나 안 보이게 하기 위해서

#nav_btn 에 onclick 이벤트를 추가하였다.

Onclick 이벤트와 관련된 함수 이름은 Toggle_Nav_List() 이다.

 

#nav_list의 스타일이 block 일 때에는 'none', 그 외 일 때에는 'block' 으로 변하도록 하였다.

 

About_nav.js 코드 보기👇

/**
 * File     :about_nav.js
 * Date     : 2022. 05. 31
 * Author   : Odin
 * Last Update  : 2022. 05. 31
 * Description:
 *      Visible and Invisible Navigation Bars on Mobile devices
 */

/**
 * Toggle_Nav_List
 * related onclick event, at #nav_list
 */
function Toggle_Nav_List() {
    const nav_list = document.querySelector("#nav_list");

    // Toggle #nav_list Style, HIDE, SHOW
    if (nav_list.style.display === 'block') {
        nav_list.style.display = 'none';
    }    
    else {
        nav_list.style.display = 'block';
    }
}   // end Toggle_Nav_list()
/////////////////////////////////////////////////////////


/**
 * resize windows, 
 * Change display attribute of #nav_list, none | block, by width of window
 */
window.addEventListener("resize", () => {
    const nav_list = document.querySelector("#nav_list");
    const width_point = 768;        // PIXEL

    const window_width = window.innerWidth;     // Get Windows Width, PIXEL

    // on Mobiles, HIDE
    if (window_width <= width_point) {
        nav_list.style.display = 'none';
    }
    // on Computers, SHOW
    else if (window_width > width_point) {
        nav_list.style.display = 'block';
    }
}); // end windows.resize Event Function
/////////////////////////////////////////////////////////

 

 

Index.html 코드 보기👇

<!--
-- File    : index.html
-- Date    : 2022. 05. 31
-- Author  : Odin
-- Last Update : 2022. 05. 31
-- Description:
--     index.html
-->

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="/reset.css">
    <link rel="stylesheet" href="/style.css">
    <link rel="stylesheet" href="/layout.css">
    <link rel="stylesheet" href="/header_nav_footer.css">
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


    
    <title>Document</title>
</head>
<body>
    


    <header>
        <div class="header_wrap">
            <a href="/"  title="To Home"><img src="FOOT.jpg" alt="Main Logo, To Home"><span>Odin's Web</span></a>
            <span class="introduce">aaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
        </div>
    </header>


    <nav>
        <div class="nav_wrap">
            <i class="fa fa-bars" id="nav_btn" onclick="Toggle_Nav_List()"></i>
            <ul class="nav_list" id="nav_list">
                <li><a href="about" title="About Odin">Odin</a></li>
                <li><a href="blog" title="To Odin's Blog">Blog</a></li>
                <li><a href="works" title="See What Odin Did">Works</a></li>
                <li><a href="notes" title="Odin's Notes">Notes</a></li>
                <li><a href="contact" title="Contact to Odin">Contact</a></li>
                <li><i class="fa fa-search" title="Search by Google"></i></li>
            </ul>
        </div>
    </nav>



    <div class="wrapper">
        <main>
            <section>
                section
            </section>
    
            <article>
                article
            </article>
        </main>
    
        <aside>
            aside
        </aside>
    
    </div>    




    <footer>
        <div class="footer_wrap">
            <ul>
                <li>© Copryright 2022 All Rights Reserved</li>
                <li><a href="/" title="About Odin">Odin</a></li>
                <li><a href="/" title="Privacy Policy">Privacy Policy</a></li>
            </ul>
            
            
        </div>
    </footer>
    
</body>
</html>


<script src="/about_nav.js"></script>

 

layout.css 코드 보기👇

/**
 * File     : layout.css
 * Date     : 2022. 05. 31
 * Author   : Odin
 * Last Update  : 2022. 05. 31
 * Description:
 *      Design Layout.
 */

body > *:not(nav) {
    padding: 8px 0;
}
main {
    padding: 8px 0;
}

/***********************************************************************/
/***********************************************************************/
/***********************************************************************/


/* Common Settings on Computers */
@media screen and (min-width: 769px) {
    body > * > * { 
        margin: 0 auto;		
    }
}
/* end Common Settings on Computers */

/* Small screens */
@media screen and (min-width:769px) and (max-width: 1024px) {
    body > * > * {
        width: 768px;
    }
}
/* end Small screens */


/* Desktop screens */
@media screen and (min-width: 1025px) and (max-width: 1200px) {
    body > * > * {
        width: 1024px;
    }
}
/* end Desktop screens */


/* Wide screens */
@media screen and (min-width:1201px) {
    body > * > * {
        width: 1024px;
    }
}
/* end Wide screens */

 

결과물 (화면보기)

Desktop 화면

Mobile 화면

 

 

 

 

 

 

 

(참고)

https://www.w3schools.com/howto/howto_js_mobile_navbar.asp