오늘은 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;
}
그랬더니 짜잔~
아주 깔끔하게 잘 만들어 져서 만족스럽네요
ㅎㅎㅎ
오늘은 여기까지 포스팅 합니다.