부트스트랩으로 navbar 만들기

[코딩애플 HTML/CSS All-in-one] 강의 수강 후 배운 것을 정리한 것입니다.
https://codingapple.com/course/html-basics/

 

 

 

1. 부트스트랩 소스 참조시키기

* codepen에서는 bootstrap 사용하려면  https://fe-j.tistory.com/entry/부트스트랩-사용하기  참조

 

2. 부트스트랩 사이트에 가서 navbar 맘에 드는거 긁어오기

+) 내가 쓰고싶은 navbar list도 긁어옴

 

 

3. 상단 고정 하고싶으면 부트스트랩 navbar 에  fixed-top 클래스를 추가하던가, 

 position:fixed 를 추가한다.

 

4. 리스트나 본문이 navbar에 가려지는 현상은 padding , margin 을 조정하여 해결하였다.

 

 

이것도 더 좋은방법이 있을 것 같지만 현재의 배움을 기록함..

 

코드펜에서 확인하기

See the Pen navbar by JEONG (@cona) on CodePen.