TIL#1 Navigation bar 만들기

1. 수평 내비게이션바 만들기

1. CSS display 값 이용

display: block(수직) inline(수평)

<style>
	li { display: inline; }
</style>

2. floating 속성 값 이용

li tag에 float 속성을 설정 후 속성값이 left/right에 따라 왼쪽 오른쪽 정렬

<style>
    li { float:left } // 왼쪽 정렬
</style>

---

2. 내비게이션바 위에 고정하기

스크롤에 영향을 받지 않도록 화면의 특정 지점에 고정될 수 있도록 Postion 속성을 fixed로 지정

화면상단에 빈틈없이 붙이기 위해 TOP 속성 또한 0으로 지정

<style>
    nav{
    	postion: fixed;
        top: 0;
       }
</style>

---

3. 내비게이션바 고정으로 가려지는 컨텐츠 보이게하기

내비게이션바 고정으로 원래 컨텐츠가 보이지 않을 경우 body 엘레먼트에 내비게이션 바 높이만틈 padding 지정

<style>
    body{
    	padding-top: 50px;
       }
</style>