부트스트랩이란?
트위터에서 개발한 무료 프론트엔드 프레임워크, 쉽고 빠른 반응형 웹 디자인을 만들 수 있다.
- 마치 위에서 스타일 태그의 내용을 CSS 파일로 분리해놓은 것처럼, 미리 정해진 클래스들을 다양하게 꾸며 CSS 파일로 정리한 것을 HTML에서 불러와 쓰는 것! 다만 이 CSS 파일이 로컬환경에 있는 것이 아니라 온라인에 있는 것을 가져오는 것이다.
- 같은 HTML 파일로 화면의 크기에 따라 다르게 보이도록 디자인할 수 있다. 모바일/태블릿/데스크탑 등 다양한 사용환경에 최적화되어 다르게 보이도록 하는 처리가 부트스트랩에서 미리 되어 있다.
부트스트랩 불러오기
부트스트랩을 사용하기 위해서는 아래 4개의 링크를 HTML 파일 head에 포함해야한다.
첫 번째 줄은 클래스들이 정의되어 있는 CSS 파일이고,
뒤의 줄은 버튼 등이 동작하게 하는 자바스크립트 파일이다.
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>실습: 부트스트랩 써보기
1. 새로운 HTML 파일을 하나 만들고 아래 코드를 붙여넣는다. head에 필요한 파일들이 이미 import 되어 있다.
2. <h1>~</h1> 자리 아래 코드를 대신 넣는다.
<button type="button" class="btn btn-primary">예쁜 버튼</button>
3. 브라우저에 띄워 버튼의 모습을 확인한다. 개발자도구에서 어떤 스타일 요소들이 적용되었는지 본다.
4. 다음 링크에서 다른 컴포넌트들도 찾아 넣어본다.
부트스트랩 컴포넌트: https://getbootstrap.com/docs/4.6/components/alerts/
[실습 코드]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<title>정글 | 부트스트랩 연습하기</title>
</head>
<body>
<h1>Hello, World!</h1>
<button type="button" class="btn btn-primary">예쁜 버튼</button>
</body>
</html>사실 이거 보고 이해가 안 되서 유튜브에 부트스트랩 관련 영상을 찾아봤다.
그랬더니 왕 이해 잘 됨.
흐름을 이해하기는 좋지만 직접 HTML과 CSS를 짜보는 것만큼 좋은건 없는거같다.
잘 이해하고 나면 사용하고 싶은 욕심은 있다.
일단 이해부터!
생활코딩 - 아름다운 웹사이트를 위하여! - Bootstrap [https://youtu.be/4o7FbB7hba0]
여담..
부트스트랩에 모든 기능을, 모든 문법을 다 익히고 숙련되야만 부트스트랩을 잘 사용할 수 있을까?
그렇지 않다.
부트스트랩 유무료 템플릿을 다운로드 받는 방법이 있고, 그 방법을 더 추천한다고 한다.
아무리 잘 사용하더라도, 전문가의 손길보다 뛰어나게 홈페이지를 작성할 수 없고, 기회비용을 고려하여, 2만원 ~ 3만원에 부트스트랩 템플릿을 다운로드 받은걸 수정하는 것도 좋은 경험이 될 수 있다.
'알아두면쓸데있는신기한잡학사전 > 고군분투흔적들' 카테고리의 다른 글
| [Web] FE - JavaScript 기초 (0) | 2022.08.19 |
|---|---|
| [Web] CSS 레이아웃 - Grid, Flex 차이 및 기본 개념 (0) | 2022.08.18 |
| [Web] HTML & CSS (0) | 2022.08.17 |
| [Web] FE - CSS 연습 (0) | 2022.08.17 |
| [Web] FE - CSS (0) | 2022.08.17 |
