바다는 비에 젖지 않는다

[CSS] Bootstrap 본문

IT Technical Note/HTML | CSS

[CSS] Bootstrap

Soroya 2022. 10. 7. 20:16
728x90

Bootstrap 이란?

부트스트랩이란? 예쁜 CSS를 미리 모아둔 것

CSS를 다루는 것과 미적감각은 다른 이야기이기 때문에 현업에서는 이미 완성된 bootstrap을 쓰는 경우가 훨씬 많다고 한다.

남이 미리 작성한 CSS를 내 HTML 파일에 적용한다는 점에서, bootstrap 적용은 CSS 파일 분리와 원리가 동일하다.

다만, CSS의 파일이 인터넷 어딘가에 있다는 점이 다르다.

 

Bootstrap 5.0

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

bootstrap의 여러 컴포턴트들을 찾아볼 수 있다.

 

Buttons

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

getbootstrap.com

Bootstrap 시작 템플릿

<!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>

 

728x90

'IT Technical Note > HTML | CSS' 카테고리의 다른 글

[CSS] Flexbox 적용  (0) 2022.10.07
[CSS] Flexbox  (0) 2022.10.07
[CSS] 웹페이지에 Google font 이용하기  (0) 2022.10.07
[CSS] margin을 이용한 중앙정렬  (0) 2022.10.07
[CSS] CSS기초  (0) 2022.10.07
'IT Technical Note/HTML | CSS' Related Articles more