1_bs

구글에 영어로 bootstrap을 쳐서 들어가야됨 한글은 3.대 버전

1. css추가

bootstrap홈페이지에서 link 복사해서 해드에 붙여넣기

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" 

integrity="sha384Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" 

crossorigin="anonymous">

(integrity : 무결성, crossorigin : 다른화면에서 가져온거 넣는거허용)

2. js추가

바디태그 제일 아래에 3가지 bootstrap 홈페이지에서 가져온 3가지 복붙

그중 jquery 부분은 slim버전을 사용하지않기때문에 code.jquery에서 script 내용을 복사해서 치환

 <!-- js -->

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<!-- popper 팝업 등~ -->

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

<!-- bootstrap -->

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

3. 헤드에 반응형 메타 추가

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

viewport : 화면상의 표시영역, 화면 크기가 변할 시 페이지 너비나 화면배율을 조정

** 반응형 웹을 구현하기 위한 가장 기본적이면서 필수인 메타 태그

width : viewport 가로 크기(너비) 조정

일반적인 숫자 값 또는 device-width같은 특정 값으로 조정 가능

device-width : 웹 페이지의 기본 너비를 현재 접속중인 장치의 너비와 일치

initial-scale : 페이지가 처음 로딩될 때 줌(확대) 레벨 조정(1~10, 기본값1)

shrink-to-fit : 사파리11이전 브라우저에 문제발생방지를 위해 no 값을 선언

#사파리11이전 크기는 글씨크기가 같이줄어듬

4. https://layoutit.com/en (틀 제작) 복붙

5. (필요한거 가져오기)

부트스트랩 exmaple에서 다운로드 한다음 압축풀고

\bootstrap-4.4.1\site\docs\4.4\examples\pricing에 index.html을 vscode에 넣음

여기서 필요한거 찾아서 복붙

참고홈페이지

https://layoutit.com/en (틀)
https://startbootstrap.com/snippets/
https://www.bootstrapzero.com/
https://bootswatch.com

테마 : 전체

템플릿 : 한화면

스니펫 : 창