Bootstrap? 예쁜 CSS 모음집

CSS

Bootstrap? 예쁜 CSS 모음집

Spell 2022. 5. 6. 04:02

Bootstrap이 뭔데? 괜찮은 CSS를 미리 모아둔 것이라고 생각하면 된다. 마치 컨닝하는 기분이겠다.

(CSS를 다룰 줄 아는 것과, 미적 감각을 발휘하여 예쁘게 만드는 것은 다른 이야기이기 때문에, 현업에서는 미리 완성된 Bootstrap을 가져다 쓰는 경우가 많다고 한다. 그래.. 나의 미적감각이 어느정도 인지 모르잖아?)

누군가 미리 작성한 CSS를 내가 작성한 Html파일에 적용시킨다? 전에 나는 html과 CSS의 파일 분리를 배웠다.

Bootstrap의 적용은 CSS파일 분리와 원리가 똑같다고 생각하면 된다. 그저 CSS의 파일이 인터넷 어딘가에 있다는 점이 다르다.

새로운 것을 해볼테니 새로운 html작성을 해보자. 이름은 index.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>

좀 길어보인다?.. 하지만 <head></head>에 이런저런 코드가 있을 뿐이지 <body></body>란을 보면 아무것도 내용이 없다.

정말 아무것도 없다.

Bootstrap을 사용할 준비만 한 상태라고 보면 된다.

https://getbootstrap.com/docs/4.0/components/alerts/

이제 해당 링크에 들어가서 활용을 할 것이다.

왼쪽 카테고리에서 buttons를 들어가서 'Dark란 코드를 가져와서 써보자. (그냥 가장 무난한 색상을 골랐어..)

저 코드들 중에

<button type="button" class="btn btn-dark">Dark</button>

이 코드를 쓸거다.

<body></body>란에 넣어서 페이지를 확인해보자.

<body>
    <button type="button" class="btn btn-dark">Dark</button>
</body>

오 괜찮은데?

지금 나는 CSS를 한 줄도 적지 않았다. 그렇지만 남이 만들어 놓은 CSS를 임포트하고 class그대로 사용하니까 적용이 된 모습이다. 적용되는 원리는 <head></head>란에 있는데, 그래서 꼭 사용할 때 예시처럼 시작 템플릿이 필요하다.

조금만 살펴볼까?

<head></head>안에 있는 코드 중 다음 코드를 살펴보자.

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

href속성에 링크되어 있는 것을 확인해보자. 들어가볼까?

엄청나게 긴 코드들이 보인다. 살펴보기를 해본 저 라인을 읽는 순간, 누군가가 만들어 놓은 저 수많은 CSS들이 다 들어오게 되는 것이다. 이걸 하나씩 다 보고서 쓴다? 그게 힘들기에 bootstrap에서 홈페이지를 만들어 놓고 사용하게 도와주는 것이다.

이런식으로 가져와서 사용한 코드에.. 전에 배운 코드 또한 활용하고 싶다면?

예를들어 가운데로 옮기고 싶다면? 내가 새롭게 style을 만들고 class를 만들어서 중첩을 시키던지, 혹은 <div></div>로 묶어서 그 구역을 가운데로 가게 하던지 등의 활용도가 있다.

즉, 나만의 Custom CSS와 bootstrap의 CSS를 함께 사용하는 것이다.

저작자표시 비영리 변경금지

'CSS' 카테고리의 다른 글

Bootstrap 이용하여 페이지 꾸미기2 (feat. 추가작업) (0)	2022.05.07
Bootstrap 이용하여 페이지 꾸미기 (0)	2022.05.07
폰트, 주석, 파일분리 (0)	2022.05.06
CSS 연습하기 (feat. 로그인 페이지) (0)	2022.05.05
CSS 기초 (0)	2022.05.04

현재글Bootstrap? 예쁜 CSS 모음집

Spell