Bootstrap(부트스트랩)예제 가져와서 Visual Studio에서 실행하고 웹브라우져에서 확인하기(browser)

사용방법에 대해 간략한 소개

 

Bootstrap 에서는 많은 무료 예제 Front end (Html + CSS)를 제공한다. 예제를 비쥬얼 스튜디어에서 실행해서 HTML을 즉각적으로 확인하면서 변경할 필요가 있다. 이를 위해 필요한 확장 툴 "Live Server"가 필요 하다. 다음은 설치 부터 사용에 대한 방법을 알려주겠다.

 

---

설치 순서 및 확인

 

1. 그림1과 같이 Visual Studio를 실행하고 왼쪽에 조각난 네모그림(확장)을 클릭하면 필요한 확장 툴을 찾을 수 있는 검색창이 나온다. 검색창에 "live server" 라고 검색한다. 

그림1

 

2. 그림1처럼 설치가 완료 되면 오른쪽 하단과 같이 "Go Live"라는 텍스트가 생긴다.

 

3.  그림2와 같이 Bootstrap 예제 화면에 접속한다. (https://getbootstrap.com/docs/5.0/examples/). 그리고 Download examples 을 실행한다.

그림2

 

4. 받은 예제파일의 압축파일을 풀고 Visual Studio로 해당 폴더를 연다. 나는 그림3과 같이 Cover 예제 Index.html을 실행시킬 것이다. Index.html 파일 열고 오른쪽 하단에 "Go Live"를 클릭한다. 

그림3

 

 

5. 그림4와 같이 멋진 예제 화면이 떴다. 

그림4

 

6. Visual Studio 에서 html파일에 Cover your page 글 부분을 삭제하고 저장하니 아래 그림5처럼 바로 적용 됨을 알 수 있다.

그림6