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
부트 스트랩 사용 이유
: 모바일, pc 모두 적용되는 반응형 웹사이트 제작 위해
1)read the docs 클릭
2)css 부분을 긁어서 head에 넣어주기
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>이런식으로 이미 짜여진 코드를 자유자재로 이용할 수 있어서 시간을 아낄 수 있음!
3) button을 입력한 다음 이 중에서 네 번째(danger) 골라서 사용
<button type="button" class="btn btn-danger">시작하기</button>
grid 설명
1)부트스트랩을 사용하면 12개로 나눈 것 중 몇 칸을 차지하는지에 따라서 사용자가 늘리거나 줄여도
비율이 같게 나타남.(그래서 pc와 모바일 모두에 적용될 수 있는 것)
2) 사용자가 사용하고 있는 웹페이지의 크기에 따라 해상도 다르게 보여주기
웹 페이지가 최대로 열려있을 때는 라지 해상도를 보여줘라 col-lg -12,
중간으로 열려있을 때는 (md)-8, 작게 열려있을 때는 (sm)-2로 띄우겠다는 뜻.
3) grid를 사용할 땐 section들이 container 안에 있어야 함.
div.container 입력하면 <div class="container"></div> 나옴.
<div class="container">
<section id="main">
<h3>십이간지로 알아보는 연애유형</h3>
<img src="./img/main.png" alt="mainImage">
<p>
</p>
<button type="button" class="btn btn-danger">시작하기</button>
</section>
<section id="qna">
</section>
<section id="result">
</section>
</div>
'Html & Css' 카테고리의 다른 글
| [Html]Meta 태그 수정하기 , favicon 만드는 법 , netlify 로 배포하기 (0) | 2024.11.28 |
|---|---|
| [html&css&bootstrap] 구글폰트 웹사이트 전체 적용 방법, 웹사이트 모바일 버전 확인하기 (+ 테두리 둥글게 border-radius , 줄 간격 pt,pb,py,px ) (2) | 2024.11.25 |
| [html&css] 폭 width, 가운데 정렬 mx-auto, 크기에 맞게 이미지 조절img-fluid (0) | 2024.11.24 |
| [html] 십이간지로 알아보는 연애유형 사이트 project 초안 (1) | 2024.11.24 |
| [html] vs code에서 html 여는 방법/기본 세팅 하는 방법 (0) | 2024.11.24 |