부트스트랩 사용 방법(사이트 손 쉽게 꾸미기)

by 마켓플레이어, 마케터 봉 2024. 10. 4. 11:49

사이트를 만들 때 일일히 디자인을 그리기 어렵다.

그렇기에 부트스트랩을 사용해 css를 복잡하게 넣지 않고도 적용하는 것이다.

1. 그냥 아래 스크립트 복사, html 파일 만들기

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

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

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>

    <title>봉드로이드 | 부트스트랩 연습하기</title>
</head>

<body>
    <h1>텍스트</h1>
</body>

</html>

페이지를 열어보면, 아무것도 없는 아래와 같은 페이지가 나온다.

2. 부트스트랩에서 원하는 디자인 찾기.

나는 버튼을 여러개 넣을 생각이라 버튼을 찾았지만, 사이트를 뒤져보다보면 여러 레이아웃 스타일을 찾을 수 있다.

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

3. <body>안에 찾은 디자인 넣기.

부트스트랩 사이트에 보면, 위와 같이 copy 할 수 있는 스크립트가 있다.

어떤 형태의 버튼을 원하는지 찾고, 해당하는 스크립트를 복사한다. 그리고 해당 스크립트를 <body> 안에 넣는다.

4. 들어간 디자인이 제대로 적용되었는지 확인한다.

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

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

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>

    <title>봉드로이드 | 부트스트랩 연습하기</title>
</head>

<body>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-success">버튼1</button>
    <button type="button" class="btn btn-success">버튼2</button>
    <button type="button" class="btn btn-success">버튼3</button>

</body>

</html>

위와 같이 스크립트를 넣으면, 아래와 같이 이미지가 바뀐다.

이렇게 다양한 디자인을 원하는데로 가져와 사용할 수 있는 것이 스타일꾸러미, 부트스트랩이다.

'7. 봉드로이드_개발공부' 카테고리의 다른 글

특정 클래스 안에 있는 객체(버튼)만 수정하고 싶어요. (2)	2024.10.05
특정 영역 불투명도 조절하는 방법(linear-gradient) (0)	2024.10.04
css 파일 분리는 어떻게 해야하나요? (0)	2024.10.03
사이트에 내가 원하는 폰트 적용하는 방법(ft.구글 웹 폰트) (0)	2024.10.03
html, css, javascript 이게 뭔가요? (8)	2024.10.02