[Bootstrap] 부트스트랩이란 무엇인가?

부트스트랩(Bootstrap)은 Twitter에서 만든 오픈 소스 프론트엔드 프레임워크로, 웹 개발을 쉽게 하기 위한 도구이다. 부트스트랩은 HTML, CSS, JavaScript를 기반으로 하며, 반응형 웹 디자인을 쉽게 구현할 수 있도록 도와준다.

부트스트랩은 사전에 정의된 스타일, 레이아웃, 컴포넌트 등을 포함하고 있어, 개발자들은 이를 사용하여 일관된 디자인과 레이아웃을 쉽게 구축할 수 있다. 또한, 부트스트랩은 모바일 기기에서도 잘 동작하는 반응형 웹을 만들 수 있도록 지원하며, 브라우저 호환성도 고려되어 있다.

이렇게 말해서는 이해하기 어려울것이므로 예제를 한번 보자.

다음은 조건이다.

웹 사이트에 링크를 하나 걸어두고, 그 링크를 접속하면 위험하다고 표시하도록 링크에 밑줄을 걸어두고,  그 링크에 마우스를 올리면 빨간색으로 나타나야 한다.

 

먼저, vanila CSS로 위의 상황을 구현한다고 해보자.

 

a {
	color : red;
    text-decoration : underline;
   }
a:hover {
  color : rgb(185, 28, 28);
  }

 

이렇게 하면 우리가 위에서 말했던 조건대로 화면에 잘 보여질것이다. 그런데, 뭔가 가독성도 떨어지고 코드의 길이가 길어져 보이므로(지금은 간단한 조건이지만 훨씬 더 복잡한 일을 하려면 코드는 더 복잡해지고 길어진다.)

 

그렇다면 bootstrap을 사용한다면 어떨까?

<a href="..." class="link-danger">Dangerous Link</a>

 

훨씬 더 간단하게 표현 할 수 있다. 저 안에는 Dangerous Link라는 텍스트가 밑줄이 그어지고, 마우스를 올리면 빨갛게 변하도록 기능이 다 내장되어있다.

 

이러한것처럼 bootstrap은 프론트엔드 웹 개발에 있어서는 없어서는 안될 존재이며, 코드 작성을 훨씬 쉽고 간결하게 해준다. 부트 스트랩은 사실 너무 기능이 많아 블로그 포스팅만으로는 알고 넘어가기에 너무 부족하므로, 궁금하다면 bootstrap홈페이지를 들어가보는것도 추천한다!