Blooger Website) 1. 메뉴 만들기

HTML & CSS & JAVASCRIPT 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');

    })

});

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

사진으로 보면

'HTML & CSS & JAVASCRIPT' 카테고리의 다른 글

Blooger Website) 6. footer 섹션 만들기 (0)	2021.01.09
Blooger Website) 5. sidebar 만들기 (0)	2021.01.09
Blooger Website) 4. 여러개의 게시글 작성하고 페이지 나타내기 (0)	2021.01.08
Blooger website) 3. blog post 섹션에 첫번째 글 작성하기 (0)	2021.01.08
Blooger Website) 2. 글목록 만들기 (0)	2021.01.08

ABOUT ME

합니다, 개발공부📝 합니다, 개발공부📝

'HTML & CSS & JAVASCRIPT' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'HTML & CSS & JAVASCRIPT' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바