[웹페이지 #01] 1.반응형 헤더 (HTML, CSS)

<header>
        <nav class = "navbar">
            <div class="nav_logo">
                <i class="fa-regular fa-thumbs-up fa-bounce fa-xl"></i>
                <a href="">nav태그에 대해</a>
            </div>
            <div class="nav_menu">
                <li><a href="https:">인원1블로그주소</a></li>
                <li><a href="https:">인원2블로그주소</a></li>
                <li><a href="https:">인원3블로그주소</a></li>
                <li><a href="https:">인원4블로그주소</a></li>
            </div>
            <div class="nav_link">
                <a href="#" class="nav-link px-2 text-white">현재 기온 : <span id="msg"></span></a>
            </div>
        </nav>
    </header>

<nav> 태그 

* 같은 페이지 / 다른 페이지 안에 다른 부분으로 이어주는 네비게이션 링크로 구성된 섹션

* <ul> <li> 태그를 <nav>태그 안에 사용하는 것이 일반적

 

.navbar a {  
    text-decoration: none; /*<a>태그 밑줄긋기 효과 없애기*/
    color : white;
}

.navbar {
    display: flex;/*아이템들 가로로 나란히 배치*/
    justify-content: space-between;/*같은 중심축 기준: 아이템 사이에 공백 넣기*/
    align-items: center; /*수직축 중간 배치*/
    background-color: #8EACCD; /*배경 색상*/
    padding: 8px 12px; /*양 모서리에서 8px 위에 12px 양옆 공간주기*/
    /*원하지 않은 여백은 body 태그에 margin:0 으로 처리 가능*/
}

.nav_logo{
    font-size: 24px;
    color: white; /*로고 문구 색상*/
}

.nav_logo i{
    color: #D7E5CA; /*로고 색상 변경*/
}

.nav_menu {
    display: flex; /*한줄에 나란히 배열*/
    list-style: none; /*리스트 모양(*)있는거 없애기 */
    padding-left: 0; /*패딩(공간)을 0으로 해서 없애기*/
}

.nav_menu li { /*이름끼리 공간마련*/
    padding : 8px 20px;
}

.nav_menu li:hover{ /*마우스 올리면 이름에 색상*/
    background-color: #D7E5CA;
    border-radius: 4px; /* 모서리가 약간 둥근모양으로 변경해주기*/
}

.nav_link{ /*기온 나오는 부분*/
    display: flex;
    padding-left: 0;
}


.nav_bar{ /*적용해보려다가 안함*/
    position: absolute; /*제일 끝에 아이콘 고정하고싶을때 */
    right: 32px;
    font-size: 24px;
    color :  #D7E5CA;
}

@media screen and (max-width: 768px){ /*화면이 작아지면 상단 메뉴 유동적으로 변경*/
    .navbar { 
        flex-direction: column; /*아이템 방향을 아래로 설정(row로 하면 가로로 나옴)*/
        align-items:flex-start; /*로고는 왼쪽으로 정렬하고싶음(중심축:수직)*/
        padding : 8px 12px;
    }
    .nav_menu { 
        flex-direction: column; /*아이템 방향을 아래로 설정*/
        align-items:center; /*메뉴는 중간에 정렬하고싶음(중심축:수직)*/
        width: 100%; /*너비 100%로 설정 안하면 align-items:center 기능이 안보임*/
    }
    .nav_menu li{
        width: 100%; /*마우스 호버되면 색상 입혀질때 한줄 길게 나오게 하기 위함*/
        text-align: center; /*너비를 100% 변경하면 텍스트는 왼쪽으로 가게 됨-> 중앙 위치*/
    }
}

 

 

 

 

 

[출처]

* 드림코딩 https://www.youtube.com/watch?v=X91jsJyZofw&t=1072s 

* 무료 아이콘 : https://fontawesome.com/