[자바웹프로그래밍] 네비게이션 바 (부트스트랩) 가져오기

네비게이션 바를 알아보기전에. 우리는 부트스트랩이란걸 알아볼 필요가있다.

 

부트스트랩이란 뭘까?

부트스트랩은 프론트엔드를 꾸밀 수 있는 툴킷 웹사이트이다.

https://getbootstrap.kr/

Bootstrap

각종 여러가지 html 코드들이 적혀져있는 사이트라 사이트를 만든다면 참고할만한 사이트이다.

 

네비게이션 바

그럼 네비게이션 바는 뭘까?

 

요즘 사이트를 보면 네비게이션 바가 없는 사이트는 찾아볼 수 없다.

롤 화면을 예시로들면 

맨 상단에 있는 창이다. 즉, 웹사이트에선 메뉴얼을 뜻한다. 

 

우리가 전에 썼던 코드들로 만들려면 만들수도 있겠지만 오늘은 부트스트랩에서 가져와볼 것이다.

 

부트스트랩 창으로 넘어가 문서를 클릭한다.

 

그럼 컴포넌트에서 네비게이션 바를 찾을 수 있을 것이다.

 

들어가서 가장 처음에 나오는 코드들을

헤더 태그에 넣어주면 

이런 결과가 나온다 왜 이럴까??

 

여기가 중요한데

비로 CSS와 JS를 가져오지 않아서이다.

 

• CSS - 스타일 즉, 디자인을 말함
• JS - 기능

다시 부트스트랩으로 넘어가서

 

문서 - 시작하기 아래로 내리다 보면

여기서 <link herf = ~~~~ 와 <script src = ~~~~ 를 복사에 헤더파일에 넣는다.

 

참고로!!! 스크립트 주소는 개발자마다 다르지만 나는 헤더파일에 넣어서 관리할 예정이다.

저렇게 붙여넣기를 해주면 이제 정확하게 실행된다. 난 저 빨간박스에 가운데 정렬 코드를 작성해서 가운데에 정렬되게 만들거다.

 

근데 저걸

이 순서로 바꿔줘야 적용된다.

 

그럼 이렇게 네비게이션바가 가운데에 이쁘게 생긴걸 볼 수 있다.

 

여기서 이미지까지 넣어주려면

이걸 넣어주면 된다.

 

그럼 이렇게 뜨는 모습을 볼 수 있다. 

(참고로 전에 우리가 손수 만들었던 네비게이션 바는 주석처리 했다.)

 

이렇게 드랍다운도 눌러보면

 

부트스트랩의 기능을 가져와서 저런 기능도 사용가능하다.

 

한글로 수정하는건 간단하다. 위의 이미지에 들어간 한글위치에 원하는 글을 넣으면된다.

그럼 이렇게 된다.

 

색상 변경은

다시 부트스트랩 웹사이트 - 문서 - 컴포넌트 - 네비게이션 바 로 가면

 

이 코드를 사용하면 된다.

 

나는 다크로 바꿔보겠다.

이렇게 잘 변경된걸 볼 수 있다.

 

하지만 저 글들은 다 링크가 비어있는 빈 상자들이다.

이렇게 링크가 들어갈 자리에 #이 되어있는걸 볼 수 있다.

이렇게 주소를 넣어주고 클릭하 주소로 이동하게된다.