본문 바로가기
Develope_Web_Programming/01_HTML&CSS&JS

[드림코딩 엘리] 웹사이트 따라 만들기

by 스타트업_디벨로퍼 2021. 2. 15. 
<!DOCTYPE html>
<html lang="en">
<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="style.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200&display=swap" rel="stylesheet">
    <script
        src="https://kit.fontawesome.com/2d323a629b.js"
        crossorigin = "anonymous"
    ></script>
    <script src="main.js" defer></script>
    <title>Nav bar</title>
</head>
<body>
    <nav class="navbar">
        <div class="navbar_logo">
            <i class="fas fa-archway"></i>
            <a href="">Jihyeon</a>
        </div>
        <ul class="navbar_menu">
            <li><a href="Home">Home</a></li>
            <li><a href="Academic">Academic</a></li>
            <li><a href="Graduate">Graduate</a></li>
            <li><a href="Career">Career</a></li>
            <li><a href="Community">Community</a></li>
        </ul>
        <ul class="navbar_icons">
            <li><i class="fab fa-youtube"></i></li>
            <li><i class="fab fa-github"></i></li>
            <li><i class="fab fa-tumblr"></i></li>
        </ul>
        <a href="" class = "navbar_toogleBtn">
            <i class="fas fa-list"></i>
        </a>
    </nav>
</body>
</html>

 

 

 

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: #232342;
    padding:8px 12px;
}

.navbar_logo{
    font-size:24px;
    color:white;

}

.navbar_logo i{
    color:#d23423;
}

.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_icons{
    list-style:none;
    color:white;
    display:flex;
    padding-left:0;
}

.navbar_icons li {
    padding: 8px 12px;
}

.navbar_toogleBtn{
    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;
    }
    .navbar_menu {
        display:none;
        flex-direction: column;
        align-items: center;
        width : 100%;
    }

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

    .navbar_icons {
        display:none;
        justify-content:center;
        width : 100%;
    }
    .navbar_toogleBtn{
        display: block;
    }

    .navbar_menu.active,
    .navbar_icons.active {
        display:flex;
    }
}

 

 

 

 

const toogleBtn = document.querySelector('.navbar_toogleBtn');
const menu = document.querySelector('.navbar_menu');
const icons = document.querySelector('.navbar_icons');

toogleBtn.addEventListener('click',()=>{
    menu.classList.toggle('active');
    icons.classList.toggle('active');
});

 

Uploaded by Notion2Tistory v1.1.0

youtu.be/X91jsJyZofw

 

반응형

'Develope_Web_Programming > 01_HTML&amp;CSS&amp;JS' 카테고리의 다른 글

[수림님 velog] Ajax란 무엇인가?  (0) 2021.02.18
[출처 tutsplus] jQuery란 무엇인가?  (0) 2021.02.18
CSS 선택자  (0) 2021.02.14
9. 유용한 10가지 배열 함수들  (0) 2021.02.14
8. 배열 제대로 알고 쓰자  (0) 2021.02.14

관련글

티스토리툴바