데이터 분석가

Bootstrap을 이용한 HTML 사이트 만들기 본문

다양한 자료 정리

Bootstrap을 이용한 HTML 사이트 만들기

PlintAn 2023. 4. 24. 15:00

안녕하세요 ~

 

 

이번 시간에는 HTML 개발에 유용한 부트스트랩을 이용해서 HTML 사이트를 만들어보겠습니다 !

 

근데 부트스트랩이 뭐야 ??

 

부트스트랩(Bootstrap)은 HTML, CSS, JavaScript를 이용해 웹 페이지를 구성함에 있어

 

도움을 주는 프레임워크 입니다 

 

부트스트랩의 모바일, 데스크탑 등 모든 크기의 디스플레이에서 작동이 되는 장점이 있습니다

 

하지만, 웬만한 틀이 정해져 있기 때문에 맞춤형 웹 사이트 구성에는 맞지 않습니다

 

그럼에도 빠르게 웹 사이트를 제작할 수 있다는 점에서 인기가 높습니다 !

 

 

1. 부트스트랩 다운로드

 

https://getbootstrap.com/

 

Bootstrap

Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.

getbootstrap.com

해당 사이트에서 부트스트랩은 모든 소스가 오픈되어 있으므로 다운로드 하고 압축을 풀어 폴더를 만듭니다

 

2.HTML 문서에 부트스트랩 연결 !

 

HTML 문서에서 부트스트랩 CSS와 JavaScript 파일을 로드하려면 HTML 코드 head 태그 안에 코드를 추가

 

<head>
  <!-- 부트스트랩 CSS -->
  <link rel="stylesheet" href="path/to/bootstrap.min.css">

  <!-- 부트스트랩 JS -->
  <script src="path/to/bootstrap.min.js"></script>
</head>

3. 부트스트랩 컴포넌트 사용

 

부트스트랩은 다양한 UI 컴포넌트를 제공하는데, 이를 HTML 문서에 클래스를 사용해 추가합니다

 

<button class="btn btn-primary">Click me</button>

위 코드에서 "btn" 클래스는 버튼 요소에 부트스트랩 스타일 적용, "btn-primary" 클래스는 

 

버튼의 색상을 파란색으로 지정.

 

위와 같은 방법으로 부트스트랩을 사용해 UI 컴포넌트를 추가, CSS 적용하여 웹 페이지를 구성합니다

 

 

부트스트랩 사이트에 접속한다면 사용 방법과 함께 친절하게 설명과 연습을 할 수 있습니다 !

 

웹 페이지를 만드는 것 정말 어렵지 않네요 !

 

다음 시간에는 부트스트랩을 이용해 웹 페이지를 구현해보는 시간을 갖겠습니다!

'다양한 자료 정리' 카테고리의 다른 글

쇼핑몰 데이터 분석 시각화 프로젝트  (0) 2023.07.19
Google SMTP 프로토콜 설정  (0) 2023.04.20
유용한 사이트 정리  (0) 2023.04.18
테킬라 Tequila 항공권 정보 제공 API 플랫폼  (0) 2023.04.09
트윌리오 Twilio SMS 문자 보내기  (0) 2023.04.08
'다양한 자료 정리' Related Articles more
Comments