Blooger Website) 1. 메뉴 만들기

HTML & CSS & JAVASCRIPT

Blooger Website) 1. 메뉴 만들기

dodop 2021. 1. 6. 20:08

css 기본 프로젝트를 해야 자바 스크립트를 하는데에도 빨리 쉽게 쉽게 할 수 있을거 같아서,

기본적인 css 웹사이트를 만들어 보기로 했다.

유튜브에 나온 웹사이트만들기를 통해서 기본적인 사이트 따라만들기💁

유튜브 강의:

https://www.youtube.com/watch?v=CrSC1ZA9j0M

쉽고 따라할 수 있도록 해줘서 선택했다.

일단은 폰트설정, 카테고리, 기본 css정도만 정리했다.

1.fonts. css

/*font-family:Abel*/
@font-face{
    font-family: Abel;
    src:url('../font/Abel/Abel-Regular.ttf');
}

/*font-family:Anton*/
@font-face{
    font-family: Anton;
    src:url('../font/Anton/Anton-Regular.ttf');
}

/*font-family:Josefin_Sans*/
@font-face{
    font-family: Josefin;
    src:url('../font/Josefin_Sans/JosefinSans-VariableFont_wght.ttf');
}

/*font-family:Lexend_Deca*/
@font-face{
    font-family: Lexend;
    src:url('../font/Lexend_Deca/LexendDeca-Regular.ttf');
}

/*font-family:Livvic*/
@font-face{
    font-family: Anton;
    src:url('../font/Livvic/Livvic-Regular.ttf');
}

2. style.css

@import url('../css/fonts.css');

html, body{
    margin: 0%;
    box-sizing:border-bos;
    overflow-x:hidden;
}
:root{

    /*     Theme colors*/
    --text-gray: #3f4954;
    --text-light: #686666da;
    --bg-color:#0f0f0f;
    --white:#ffffff;
    --midnight:#104f55;

    /* gradient color*/
    --peach: linear-gradient(to right, #ffecd2 0%, #fcb69f 100%);

    /*    theme font-family      */
    --Abel:'Abel',cursive;
    --Anton:'Anton',cursive;
    --Josefin:'Josefin',cursive;
    --Lexend:'Lexend',cursive;
    --Livvic:'Livvic',cursive;   
}

/*------Global Classes----------*/
a{
    text-decoration: none;
    color:var(--text-gray);
}


.flex-row{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

ul{
    list-style-type: none;
}
/*----x--Global Classes----x-----*/

/*-----------navbar-------------*/
.nav{
    background: white;
    padding: 0 2rem;
    height: 0rem;
    min-height:9vh;
    overflow:hidden;
}
.nav .nav-menu{

    justify-content:space-between;
}

.nav .toggle-collapse{
    position: absolute;
    top:0%;
    width:90%;
    cursor:pointer;
    display:none;
}

.nav .toggle-collapse .toggle-icons{
    display: flex;
    justify-content: flex-end;
    padding:1.7rem 0;
}
.nav .toggle-collapse .toggle-icons i{
    font-size: 1.4rem;
    color: var(--text-gray);
}

.collapse{
    height: 230rem;

}
.nav .nav-items{
    display: flex;
    margin:0;

}
.nav .nav-items .nav-link{
    padding:1.6rem 1rem;
    font-size: 1.1rem;
    position: relative;
    font-family: var(--Abel);
    font-size: 1.4rem;

}
.nav .nav-items .nav-link:hover{
    background-color: var(--midnight) ;
}
.nav .nav-items .nav-link:hover a{
    color:var(--white);
}

.nav .nav-brand a{
    font-size: 1.6rem;
    padding: 1rem 0;
    display: block;
    font-family: var(--Lexend);
    font-size: 1.6rem;
}

.nav .social{
    padding: 1.4rem 0;
}

.nav .social i{
    padding: 0.2rem;
}

.nav .social i:hover{
    color:#a1c4cf;

}



/*-------x---navbar------x------*/


/*         Viewport less then or equal to 750px         */
@media only screen and (max-width:750px){
    .nav .nav-menu, .nav .nav-items{
        flex-direction: column;
    }

    .nav .toggle-collapse{
        display: initial;
    }

}


/*     x    Viewport less then or equal to 750px     x    */

3. index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blooger</title>

    <!--Font Awesome Icons-->
    <link rel ="stylesheet" href="./css/all.css">
    <!--Custom Style -->
    <link rel = "stylesheet" href = "./css/Style.css">
</head>

<body>
    
    <!-- -----------------Navigation--------------------- -->


    <nav class="nav">
        <div class="nav-menu flex-row">
            <div class="nav-brand">
                <a href="#" class="text-gray">Blooger</a>
            </div>
            <div class="toggle-collapse">
                <div class="toggle-icons">
                    <i class="fas fa-bars"></i>
                </div>
            </div>
            <div>
                <ul class="nav-items">
                    <li class="nav-link">
                        <a href="#">Home</a>
                    </li>
                    <li class="nav-link">
                        <a href="#">Category</a>
                    </li>
                    <li class="nav-link">
                        <a href="#">Archive</a>
                    </li>
                    <li class="nav-link">
                        <a href="#">Pages</a>
                    </li>
                    <li class="nav-link">
                        <a href="#">Contact Us</a>
                    </li>
                </ul>
            </div>
            <div class="social text-gray">
                <a href="#"><i class="fab fa-facebook-f"></i></a>
                <a href="#"><i class="fab fa-instagram"></i></a>
                <a href="#"><i class="fab fa-twitter"></i></a>
                <a href="#"><i class="fab fa-youtube"></i></a>

            </div>
        </div>
    </nav>


    <!-- -----x-----------Navigation----------x---------- -->
<!-- Jquery LIbrary file-->
<script src = "./js/jquery3.5.1.min.js"></script>


<!-- CUstom Javascript file-->
<script src = "./js/main.js"></script>
</body>

</html>

4. jquery 를 이용해서 toggle (css공부 😭 이부분 그냥 따라하기만 했다.->이부분 꼭 다시 보기!)

$(document).ready(function(){

    $nav=$('.nav');
    $toggleCollapse =$('.toggle-collapse');

    /*click event on toggle menu*/
    $toggleCollapse.click(function(){
        $nav.toggleClass('collapse');

    })

});

오늘 완성한 부분은 여기까지!

사진으로 보면