✋ 한이음 블렌디드 러닝으로 제공하는 스파르타 코딩 클럽 웹개발 기초를 듣고 정리한 글입니다.
📍 Bootstrap이란?
- css Framework 중 하나이다.
- 반응형 웹 사이트 개발을 위해 필요하다.
📍 Bootstrap을 쓰기 위한 사전 템플릿
- 아래 코드를 html 문서의 head 태그에 붙여두고 시작하자.
<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>
</head>- 사전에 만들어진 css 파일을 불러와 사용하는 것으로
이는 https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.css 에서 확인할 수 있다.
📍 부트스트랩 컴포넌트 쓰기
1. 왼쪽의 컴포넌트 목록에서 자신이 원하는 것을 클릭한다.
2. 원하는 형태가 있다면, 그 밑 코드가 써진 곳에서 복사 후, html의 body 태그 안에 붙여 넣는다. 만약, 전체를 복사하고 싶다면 드래그 할 필요없이 copy를 누르자.
<body> <div class="card" style="width: 18rem;"> <img class="card-img-top" src="..." alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </body>
- 여기에 추가적으로 코드를 수정하고 싶다면, 직접 커스터마이징하여 변경하는 것도 가능하다.
개발자에서, IT Business 담당자로. BrSE 업무를 수행하고 있습니다.