Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
Tags
- Interceptor
- Deep Dive
- nestjs
- dfs
- winston
- OOP
- node.js
- 인접리스트
- Spring
- java
- 프로그래머스
- MySQL
- html
- typescript
- LifeCycle
- javascript
- logger
- JWT
- 코딩테스트
- 탐욕법
- 알고리즘
- TIL
- 인접행렬
- bean
- queue
- GraphQL
- 변수
- css
- 자료구조
- REST API
Archives
- Today
- Total
처음부터 차근차근
Bootstrap 사용방법 본문
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">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
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/
해당 웹에 들어간 후, 원하는 컴포넌트에 들어가 원하는 항목을 찾아본다.
왼쪽은, 해당하는 컴포넌트 항목을 찾아볼 수 있으며, 원하는 컴포넌트를 Copy 버튼 클릭
이후 원하는 부분에 붙여넣기 한 후, 자신이 원하는 것으로 조금씩 수정하면 된다.
'웹개발기초' 카테고리의 다른 글
jQuery 사용방법 (0) | 2023.05.04 |
---|---|
웹개발에 Javascript를 쓰는 이유 (0) | 2023.05.04 |
HTML 주석 (0) | 2023.05.04 |
구글 웹폰트 입히기 (0) | 2023.05.04 |
자주 쓰이는 CSS (0) | 2023.05.03 |