부트스트랩이란?

2021. 6. 30. 21:45

* 부트스트랩이란?

부트스트랩(Bootstrap)은 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크이다. 하나의 CSS로 휴대폰, 태블릿, 데스크탑까지 다양한 기기에서 작동한다. 다양한 기능을 제공하여 사용자가 쉽게 웹사이트를 제작, 유지, 보수할 수 있도록 도와준다.

(출처: 위키백과)

부트스트랩은 예쁜 CSS를 미리 모아둔 것

(CSS를 다룰 줄 아는 것과, 미적 감각을 발휘하여 예쁘게 만드는 것은 다른 이야기이기 때문에,

현업에서는 미리 완성된 부트스트랩을 가져다 쓰는 경우가 많습니다.)

* 부트스트랩 시작하기 및 다운로드

https://getbootstrap.com/docs/4.0/getting-started/introduction/

Introduction

Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with BootstrapCDN and a template starter page.

getbootstrap.com

* 부트스트랩 컴포넌트

https://getbootstrap.com/docs/4.0/content/reboot/

Reboot

Reboot, a collection of element-specific CSS changes in a single file, kickstart Bootstrap to provide an elegant, consistent, and simple baseline to build upon.

getbootstrap.com

* 부트스트랩 시작 템플릿

아래 파일을 복사해서 새로운 HTML 파일을 하나 만들고, 시작해보아요

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>

    <title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
</head>

<body>
    <h1>이걸로 시작해보죠!</h1>
</body>

</html>

남이 미리 작성한 CSS를 내 HTML 파일에 적용한다는 점에서,

bootstrap 적용은 CSS 파일 분리와 원리가 동일합니다.

다만, CSS의 파일이 인터넷 어딘가에 있다는 점이 다를 뿐입니다.

'IT > 기타(ETC)' 카테고리의 다른 글

스크립트 언어와 컴파일 언어 (0)	2021.08.05
API에 대해 잘 정리되어 있는 사이트들 (0)	2021.07.05
배달의민족 CEO에게 뽑고 싶은 개발자를 물어보았다(유튜브 채널 EO) (0)	2021.06.21
코딩은 인터넷으로 배우면 다 된다? (1)	2021.06.11
뛰어난 프로그래머가 되고 싶다면 이거 한가지만 하세요!(영상내용 정리) (0)	2021.05.03

공부하는개미