Bootstrap 이란?
이런 mbti 테스트같은 경우
pc, 모바일로도 접속할 수 있다.
가장 좋은 방법은
모바일버전, pc버전을 만드는 것이다.
'반응형 웹사이트'를
css로만으로도 가능하지만
코드가 길어지므로..
Bootstrap은
미리 만들어진 코드를 사용할 수 있는
프레임워크이다.
Bootstrap
Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.
getbootstrap.com
link로 import 해주기
부트스트랩 사이트 접속 후
Getting started - introduction 클릭
해당 링크 복사하기
강의에서는
해당 링크만 나와있지만
여기는 html 태그부터 나와있다.
강의와 동일하게 실행하기 위해
link 태그만 head 영역에 복사해준다.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
</head>
이렇게 해주면
bootstrap 에서 지정한 css를
마음대로 사용할 수 있다!!
부트스트랩 css 검색하기
강의 예시처럼 헤드부분을 어떻게 만드는지
heading 이라는 검색어로 검색해본다.
다음과 같은 검색결과가 나온다.
<h1> 이런식으로 사용할 수도 있지만
p 태그를 사용한 뒤 class에 h1 등을 넣어주어 바꾼다.
사이트 내에서도 이 방법을 추천하고 있다.
버튼모양 바꾸기
위에서와 마찬가지로
button으로 검색해본다.
class 명을 추가하는 것 만으로도
다양한 버튼을 사용할 수 있다.
위에 나온 css를 복사해서
button의 모양을 바꿔본다.
<button type="button" class="btn btn-danger">시작하기</button>
위와 같이 아주 잘 출력됨을 확인할 수 있다.
grid 시스템
부트스트랩을 사용하는 이유는
앞에서도 설명했듯이
pc, 모바일에서 모두 사용 가능한
'반응형 웹사이트'를 만들기 위해서이다.
이 것을 알기 위해서
bootstrap에서 제공하는 'grid system'에 대한 이해가 필요하다.
설명을 위해 잠시 아래와 같이 코드를 변경한다.
gird는 전체 화면을 12로 분할해주는데
col-6은 전체 화면에서 6/12를
col-4는 전체 화면에서 4/12만큼의
공간을 차지하겠다는 의미이다.
화면을 조절하면
반응형으로 자동으로 조절된다.
grid- 해상도에 따른 화면조정
위와 같이
해상도에 따른 조정도 가능하다.
위와 같이 화면 해상도(사이즈)에 따라서
비율이 변경되도록 설정할 수도 있다.
'MBTI 테스트 프로젝트' 카테고리의 다른 글
| [MBTI 테스트(6)] QnA 화면 구현하기 (innerHTML, createElement, addEventListner) (0) | 2023.04.13 |
|---|---|
| [MBTI 테스트(5)] 판다코딩 유튜브_화면전환하기 (애니메이션으로 화면 서서히 사라지기/나타나기) (0) | 2023.04.12 |
| [MBTI 테스트(4)] 판다코딩 유튜브_메인페이지 꾸미기 (0) | 2023.04.09 |
| [MBTI 테스트(2)] 판다코딩 유튜브_강의 주의사항 및 페이지 레이아웃, git hub에서 다운받기 (0) | 2023.04.09 |
| [MBTI 테스트(1)] 판다코딩 유튜브_ATOM 에디터 패키지 설치하기 > 실패 > replit으로 변경... (0) | 2023.04.09 |
