[포스코x코딩온] 웹 풀스택 과정 2주차 회고 | 부트스트랩

2주차 마지막 날, 부트스트랩에 대해서 배웠다. 부트스트랩은 웹사이트를 쉽게 만들 수 있게 도와주는 공개 HTML, CSS, JS 프레임워크를 말한다.

1. 프레임워크 vs 라이브러리

프레임워크는 서비스 개발에 필요한 코드, 알고리즘, DB 연동과 같은 기능들을 위해 뼈대를 제공한다. 반면, 라이브러리는 특정 기능을 위한 코드와 함수들의 집합을 의미한다.

2. 부트스트랩 이용하기

• CDN으로 프로젝트에 포함시키기

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>

위의 CSS파일과 JS파일을 HTML문서에 포함시키면 부트스트랩을 이용할 수 있다.

2-1. 부트스트랩 문서

아래의 주소에서 부트스트랩에서 제공하는 구성요소들을 확인하고 가져와 이용할 수 있다.
https://getbootstrap.com/docs/5.3/getting-started/introduction/

2-2. 부트스트랩 예제

예제 보러가기

3. 아이콘

부트스트랩뿐만 아니라, 구글, FontAwesome 등을 이용할 수 있다.

• 대표적인 폰트 아이콘 종류

1. Bootstrap Icon
2. FontAwesome
3. Google Icon Fonts

마무리

부트스트랩은 알고 있었지만, 직접 이용해보는 건 이번이 처음이었다. 사용방법만 익히면 깔끔한 디자인과 원하는 기능을 쉽게 이용할 수 있을 것 같았다.

하지만 이미 만들어진 요소(모달, 슬라이드 보드 등)들을 이용하는 것이기 때문에 추후에 디자인이나 기능을 수정을 해야 된다면, 오히려 직접 디자인(클래스 이름 작성)하고 기능을 만드는 쪽이 관리하기 편할 것 같아, 얼마나 활용할 수 있을지 의문이 들었다.