(html, css)자기소개 페이지 만들기 2일차

예흠·2020년 6월 17일
0

nav bar 만들기

오늘은 2시에 스터디 그룹 사람들끼리 만났습니다.
다들 너무 잘하셔서 참... 열심히 분발 하겠습니다 ㅠㅅㅠ
일단 좋은 소재들 공유해 주셔서 nav bar를 우여 곡절 끝에 만들수 있었네요 ㅎㅎ
https://unikys.tistory.com/333
링크텍스트

일단 이 곳에서 알려준 방법대로 열심히 활용해서 저만의 nav bar를 만들었습니다.

텍스트

<nav id="topMenu">
    <ul>
        <li><a class="menuLink" href="#first_area">main</a></li>
        <li><a class="menuLink" href="#second_area">hobby</a></li>
        <li><a class="menuLink" href="#third_area">college</a></li>
        <li><a class="menuLink" href="#final_area">plans</a></li>
    </ul>
</nav>

이렇게 코들르 짜서 만들고
css파일을 따로 만들어서 스타일들을 집어 넣었습니다.

텍스트

header{
    position:fixed;
    top:0;
    left:0;
    right:0;
}
#topMenu{
    text-align: center;
}
#topMenu ul li{
    list-style: none;
    color:black;
    line-height: 50px;
    vertical-align: middle;
    display:inline;
    text-align: center;
}

#topMenu li .menuLink{
    text-decoration: none;
    background-color: rgba( 255, 255, 255, 0.5 );
    color:black;
    display:inline-block;
    width:200px;
    height:50px;
    margin:0;
    font-size: 30px;
    font-weight:bold;
    font-family: cursive;
    border-left: 1px solid black;
}

#topMenu li:first-child .menuLink {
    border-left: none;
}

#topMenu .menuLink:hover{
    color:#2d2d2d;
    background-color: #6d6d6d;
}

그랬더니 짜잔~

아주 깔끔하게 잘 만들어 져서 만족스럽네요
ㅎㅎㅎ
오늘은 여기까지 포스팅 합니다.

profile
노래하는 개발자입니다.

0개의 댓글