국비지원 수업(menu bar)만들기

HTML

글로벌내비게이션바global navigation bar (gnb)

글로벌내비게이션바

<nav id="gnb">

                        <a href="index.html">홈</a>

                        <!-- 로그인 이전 -->

                        <a href="#">로그인</a>

                        <a href="#">회원가입</a>

                        <!--

                            로그인 이후

                            <a href="#">로그아웃</a>

                            <a href="#">회원정보</a>

                        -->

                        <a href="#">Contact</a>

                        <a href="#">관리자</a>

  </nav>

 

 

 

 

menu bar

 

 

header , div , nav , a ,ul, li, 

 

 

 

 

 

CSS

 

#headerTop {

    height: 40px;

    background-image: url(../images/top_bg.jpg);

    background-repeat: no-repeat;

    background-position: center;

    background-size: cover;

}

 

 

/*

.main에 마우스를 올렸을때

방금마우스올린그것 안에 있는 .sub를 보여주자.

*/

.main:hover>.sub {

    display: block;

}

.main:hover>a {

    color: #5b3b10;

}

 

연습해야 할 부분.

 

 

 

220125 화요일 수업