부트스트랩 링크

지금껏 학교에서 html, css로 페이지를 만들어 본 적은 많지만, 부트스트랩같은 오픈 소스를 사용한 적은 없었다.
방학에 프로젝트를 하면서 알게 되었는데, 정말 빠르게 기능을 구현할 수 있었다!

✨bootstrap 사용법

css, js파일을 직접 다운받는 방식과 cdn링크를 활용한 방법이 있는데 내가 자주 사용했던 방식은 cdn링크를 통한 방식이다!

1. 부트스트랩에 들어간다!
   

2. html파일에 css, js 코드를 넣어준다
   
   css, js코드는 다음과 같다.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

3. bootstrap에서 원하는 기능의 코드를 가져와 붙여넣으면 끝!
   
   나는 가장 많이 사용했던 기능인 모달을 가져와 테스트를 해 보았고
   
   잘 뜨는 것을 확인할 수 있었다!

부트스트랩을 사용해보니 정말 빠르게 원하는 기능을 구현할 수 있었다! 가끔씩 사용하면서 기본 설정값을 바꾸고 싶었을 때도 있었는데, 그런 속성값들도 대부분 js를 이용해서 변경이 가능했다.
무엇보다도 사용법이 간단한게 좋았다.

비슷한 오픈 소스로 Semantic UI라는 것도 있는 걸로 아는데, 이것도 나중에 한 번 알아봐야겠다