웹개발기초

Bootstrap 사용방법

HangJu_95 2023. 5. 4. 11:27
728x90

 - Bootstrap이란??

예쁜 CSS를 미리 모아둔 라이브러리 같은 것이다.

 

- Bootstrap 시작하기

CSS 파일 분리와 원리가 동일하다.

<!-- style.css 파일을 같은 폴더에 만들고, head 태그에서 불러오기 -->

<link rel="stylesheet" type="text/css" href = "(css파일이름).css">

 

부트스트랩 시작 템플릿

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

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

        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>

    <title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
</head>
<body>
    <h1>이걸로 시작해보죠!</h1>
</body>
</html>

<link> 와 <script>를 통해 먼저 Bootstrap을 불러온다.

 

- Bootstrap 사용하기

https://getbootstrap.com/docs/5.0/components/buttons/

 

Buttons

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

getbootstrap.com

 

해당 웹에 들어간 후, 원하는 컴포넌트에 들어가 원하는 항목을 찾아본다.

 

왼쪽은, 해당하는 컴포넌트 항목을 찾아볼 수 있으며, 원하는 컴포넌트를 Copy 버튼 클릭

이후 원하는 부분에 붙여넣기 한 후, 자신이 원하는 것으로 조금씩 수정하면 된다.