Node.js 나만의 웹 사이트 만들기(2) - 웹페이지 개발을 도와주는 부트스트랩(BootStrap)

이전 내용

지난 시간에 Node.js 개발환경을 알아보고 간단하게 웹페이지에서 홈페이지를 접속하고 서버의 수정사항에 맞춰서 서버를 껐다가 키는 자동화 패키지까지 알아보았습니다. 아직 이전 내용을 모르신다면 아래 글을 참고하여 확인해 주세요

Node.js 나만의 웹 사이트 만들기(1) - 개발 환경 준비 & 웹 서버 접속

이전에는 Node.js에서 HTML과 CSS를 사용하는 방법에 대해서 간단히 알아봤는데 이번에는 부트스트랩이라는 프론트엔드 프레임워크를 활용하여 웹사이트를 제작해 보겠습니다. 

 

부트스트랩

웹페이지에 상단바(nav)도 만들고 버튼도 만들고 간단한 디자인을 직접 HTML언어로 처음부터 웹사이트 구조를 작성해도 되지만 부트스트랩(Bootstrap)이라는 프레임워크를 사용하면 이미 만들어진 버튼이나 텍스트바 nav 바를 사용할 수 있습니다.

 

부트스트랩 사용법

부트스트랩은 이미 만들어져서 제공되는 코드를 가져와 배치하고 재사용하기 때문에 웹사이트 디자인이 부족하거나 구조를 짜는 능력이 부족하더라도 복사와 붙여 넣기를 잘 활용하면 사이트하나가 금방 완성됩니다.

 

처음 부트스트랩을 사용하기 위해서는 부트스트랩에서 제공하는 css와 js코드를 HTML에 추가해야 합니다. 버튼을 만든 후 디자인을 입력할 때 CSS에서 디자인을 입히듯이 부트스트랩에서는 여러 디자인요소가 작성된 css를 제공합니다.

 

부트스트랩 시작하기 페이지(링크)를 접속하면 CSS와 JS코드가 나오는데 이를 HTML코드 내에 첨부하여야 합니다.

부트스트랩에서 제공하는 전체 코드를 복사하여 입력한 뒤 서버를 실행하여 홈페이지를 확인해 보겠습니다.

 

 

서버에 접속하니 Hello, world! 라는 글자가 나오며 홈페이지가 정상적으로 작동하는 걸 확인할 수 있습니다.

이제 부트스트랩을 사용하기 위한 준비는 모두 마쳤습니다. 본격적으로 부트스트랩 홈페이지에서 제공되는 스타일을 가져다 사용해 보겠습니다.

 

 

버튼 사용하기

부트스트랩 홈페이지 좌측에는 부트스트랩에서 제공하는 다양한 컴포넌트들이 있습니다.(버튼 링크)

일단은 버튼하나를 가져와 사용해 보겠습니다. 버튼의 미리 보기 디자인을 제공하며 원하는 버튼의 코드를 복사하여 body태그 안에 붙여 넣으면 됩니다.

 

저는 이 버튼이 마음에 들어서 가져와서 사용해 보겠습니다.

 

 

코드를 입력하고 페이지를 새로고침해보니 부트스트랩에서 봤던 디자인과 똑같은 버튼이 생성되었습니다.

버튼이 두 개씩은 필요 없을 거 같아서 한 개는 지우고 버튼의 이름도 바꿔보겠습니다.

 

Succes라는 버튼은 마우스를 오버할 때 초록색이 채워지는데 이 버튼의 효과가 마음에 들어 기존 버튼에 이 버튼의 스타일을 추가해 보겠습니다. 이럴 때는 기존의 btn btn-primary클래스 대신  Success버튼의 class만 가져와 사용하면 됩니다.

 

    <!--button-->
    <div class="d-grid gap-2 d-md-block" id="input-button">
      <button class="btn btn-outline-success" type="button">클릭</button>
  </div>

 

 

페이지를 새로고침하고 클릭 버튼에 마우스 커서를 올려두니 색이 채워지는 효과가 나타납니다.

 

이런 식으로 원하는 스타일을 선택하고 버튼의 배경이나 색상은 또 다른 스타일의 클래스 등을 가져와 사용할 수 있습니다.

 

 

NAV 바 추가하기

웹사이트에 버튼만 있으면 조금 허전할 수 있습니다. 대부분의 웹페이지 홈에는 상단에 위치하는 내비게이션 바(NAV)를 갖고 있습니다. NAV 바도 부트스트랩에서 지원을 하고 있기 때문에 가져다가 사용해 보겠습니다.

 

부트스트랩 내비게이션 바(링크)를 확인해 보면 다양한 스타일을 지원하고 있는데 저는 사진 속 스타일이 마음에 들어 복사해 사용해 보겠습니다.

 

 

버튼 위에 nav코드를 붙여 넣은 뒤 페이지를 새로고침 해봤습니다. 순식간에 웹사이트 상단에 nav 바가 만들어졌습니다.

 

nav 바의 배경색을 바꿔주고 싶어서 다른 nav스타일의 dark효과를 가져다가 추가하고 버튼도 마우스커서를 오버할 때 색상이 바뀌는 게 아닌 처음부터 색상이 지정된 버튼으로 수정해 보겠습니다.

 

처음에 가져다가 사용한 nav바 코드 최상단에 data-bs-theme="dark"만 추가하였습니다. 

 

그리고 Nav 바의 버튼을 부트스트랩 버튼 컴포넌트에서 다른 버튼스타일의 class를 사용하여 변경하였습니다.

 

 

페이지를 새로고침해 보면 조금 더 깔끔한 nav바가 완성된 걸 확인할 수 있습니다.

 

마무리

이렇게 부트스트랩을 사용하여 상단 nav 바와 버튼의 다양한 스타일을 만드는 방법에 대해서 알아봤는데 이를 활용하여 전체적인 웹사이트를 반응형으로 제작할 수 있습니다. 부트스트랩에서 제공되는 코드들을 사용하여 자신만의 웹사이트를 제작해 보세요.