오랜만에 블로그를 다시 시작하게 됩니다. 꾸준히 관리를 하고 싶었지만, 퇴근 후 집에서 침대와 한 몸이 되는 신기한 현상을 겪었습니다. 오늘은 BootStrap을 설정하고 간단하게 사용하는 방법을 포스팅하려고 해요. Language : HTML Tool : visual Studio Code Library / API : Bootstrap, JQuery 1. 부트스트랩(Bootstrap)이란? 부트스트랩(Bootstrap)은 트위터(Twitter)에서 개발한 UI 라이브러리입니다. 개인적인 UI 라이브러리를 사용하는 가장 큰 이유는 웹 사이트를 개발함에 있어 디자인 때문에 개발 시간이 길어지는 문제점을 해결할 수 있다는 점입니다. 어느 정도 규모가 있는 회사들은 웹디자이너와 퍼블리셔에게 맡겨 UI 라이브러리 없이 웹 사이트 디자인을 구축할 수 있지만, 스타트 업이나 개발자 혼자 개인 프로젝트를 진행할 때 웹 사이트 디자인을 구축하려면 엄청난 노력과 시간이 필요하고 품질 좋은 웹 디자인을 뽑아내기 어려울 것입니다. 2. 부트스트랩(Bootstrap) 공식 사이트 방문하기. 아래 부트스트랩 공식 사이트를 방문해주세요. https://getbootstrap.com/
 대표 홈페이지에서 Bootstrap 라이브러리를 원하시는 버전으로 다운로드해주세요.(현재의 최신 버전은 4.3.x) 3.부트스트랩(Bootstrap) 설정하기. 라이브러리를 다운로드했으면 다음은 설정할 차례입니다. 다운로드한 파일을 압축 해제한 후에 다음 그림과 같이 js와 css 폴더를 복사해주세요.
복사를 완료했으면 아래와 같이 HTML 문서를 작성해주세요. 아래 코드를 작성하면 부트스트랩 사용 준비를 마쳤습니다. 그리고 부트스트랩의 bootstrap.js는 순수 자바스크립트로 작성되어 있지않고, JQuery로 작성되어 있습니다. 그래서 bootstrap.js를 사용하기 위해서는 JQuery 라이브러리를 추가적으로 설치해 주어야 합니다. HTML 문서를 보면 "<scirpt src="https://code.jquery.com/jquery-3.3.1.js"></script>" 이 부분인데요. 직접 JQuery 공식 사이트에 가서 라이브러리를 받아 사용할 수도 있지만, 저는 CDN 방식으로 간단히 추가했습니다. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Bootstrap</title> <link rel="stylesheet" href="css/bootstrap.css"> </head> <body> <h2>Hello Bootstrap</h2> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script src="js/bootstrap.js"></script> </body> </html> 다음 포스팅에서는 Bootstrap을 사용해 간단히 회원가입 양식을 만들어보는 포스팅을 하려고 합니다. 궁금하신 점은 댓을을 달아 주시면 시간이 날때마다 확인 후 답변 드리겠습니다. 여기까지 제 허접한 글을 읽어 주셔서 감사합니다. 그럼 오늘은 여기까지!
사용방법에 대해 간략한 소개 Bootstrap 에서는 많은 무료 예제 Front end (Html + CSS)를 제공한다. 예제를 비쥬얼 스튜디어에서 실행해서 HTML을 즉각적으로 확인하면서 변경할 필요가 있다. 이를 위해 필요한 확장 툴 "Live Server"가 필요 하다. 다음은 설치 부터 사용에 대한 방법을 알려주겠다. 설치 순서 및 확인 1. 그림1과 같이 Visual Studio를 실행하고 왼쪽에 조각난 네모그림(확장)을 클릭하면 필요한 확장 툴을 찾을 수 있는 검색창이 나온다. 검색창에 "live server" 라고 검색한다. 2. 그림1처럼 설치가 완료 되면 오른쪽 하단과 같이 "Go Live"라는 텍스트가 생긴다. 3. 그림2와 같이 Bootstrap 예제 화면에 접속한다. (https://getbootstrap.com/docs/5.0/examples/). 그리고 Download examples 을 실행한다. 4. 받은 예제파일의 압축파일을 풀고 Visual Studio로 해당 폴더를 연다. 나는 그림3과 같이 Cover 예제 Index.html을 실행시킬 것이다. Index.html 파일 열고 오른쪽 하단에 "Go Live"를 클릭한다. 5. 그림4와 같이 멋진 예제 화면이 떴다. 6. Visual Studio 에서 html파일에 Cover your page 글 부분을 삭제하고 저장하니 아래 그림5처럼 바로 적용 됨을 알 수 있다. |
Vscode 부트스트랩 사용법 - vscode buteuseuteulaeb sayongbeob
저작권 © 2024 ko.paraquee Inc.
