안녕하세요!
여러분 웹 개발 해 보신적 있으신가요? ><
부투스트랩은 개발을 쉽게 할 수 있는 일종의 라이브러리인데요 누구나 쉽게 수정이 가능하고
여러분이 보는 네비게이션 바 (NAV) 를 쉽게 만들 수 있어요
원래 Vue, react 같은 js 프레임워크에서는 아래 npm을 복사해다가 쓰면 되지만
HTML 5로 생코딩 하는 경우에는 직접 소스 코드를 다운받아서 설치해야 하는데요
하지만 콘텐츠 전송 네트워크 CDN을 사용하면 설치 필요 없이 바로바로 처리가 가능합니다!
예제를 보여드리자면 원하는 IDE를 사용해서 index.html ( 이름 달라도 상관 x )
를 생성해줍니다
그 다음 (VSC) html:5를 쳐서 기본 템플릿을 불러와줄게요
저거 치고 탭 키 누르면 만들어져요!
위처럼 html이 만들어졌으면 이제 cdn 주소를 복사하러 가죠!
위의 링크로 가서 조금만 스크롤을 내리면 이런게 있습니다 바로 CDN 포함기능인데
주의할 점은 버전의 상승에 따라 조금씩 바뀌는데 그래서 적용 안 되면
아래 데이터 복사 말고 직접 가서 복사해보세요!
CDN 주소
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous"><!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>ver 5.2.2 기준
위 사진처럼 코드에 때려넣고 윈도우키 + s 눌러서 저장 후에 실행해줍니다
실행은 이거 대충 다운받아서 하면 됩니다
익스텐션 -> 라이브서버
우측 하단에 보면 이렇게 [Go Live] 버튼이 있는데 이거 누르세요!
그러면 아무것도 없는 새하얀(?) 창이 하나 뜨는데요
이제 nav bar 를 넣어보죠
상단의 막대( navbar )에서 [문서]로 간 다음에
컴포넌트 쭉 내리면 있는 [네비게이션 바]를 눌러서 열어줍니다.
이런거 나오면 그냥 복사 ㄱㄱ
이야 코딩 끝!
이제 윈도우키 + s 누르고 저장
짜란! 코딩 3번 복사해서 위에 바를 만들었네요!
이제 이거 무한 반복해서 애니메이션도 좀 넣고 그러면 됩니다 끝.