반응형
html과 css를 다루기 어렵다면 부트스트랩을 이용하시면 됩니다.
html에 부트스르랩을 설치하는 방법을 설명하겠습니다.
일단 부트스트랩 홈페이지에 방문을 해보겠습니다.
Bootstrap
The most popular HTML, CSS, and JS library in the world.
getbootstrap.com
시작하는 방법은 아주 간단합니다.
사이트의 Docs에 들어가서 퀵스타트를 보시면 됩니다.
부트스트랩의 css와 javascript 파일을 자신의 html에 붙여넣기는 하면 끝납니다.
css cdn은 자신의 head 태그 안에 넣으면 됩니다.
|
<link
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
|
javascript cdn은 자신의 body 태그 끝나기 전에 넣으면 됩니다.
|
<script
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"
></script>
|
그럼 다 설치된 모습을 한번 살펴보겠습니다.
이 상태에서 코딩을 진행을 하시면 되겠습니다.
|
<!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" />
<title>Document</title>
<link
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
</head>
<body>
<script
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"
></script>
</body>
</html>
|
자 이제 코딩을 시작하며 됩니다.
부트스트랩 사이트 > 문서 > 컴포넌트 부분에 들어가서 원하는 것을 찾아보고
쇼핑하듯이 골라서 붙여넣기를 하면 되겠습니다.
마진이나 패딩이나 플랙스를 이용하고 싶다면
유틸리티에 찾아보시면 있습니다.
스패이싱, 플랙스 등등 전부다 있습니다.
이것을 이요하시면 css 작성없이 html에 클래스를 붙여넣기 하는 것만으로
코딩을 끝낼 수 있습니다.
반응형
'프로그래밍 스터디( 공부노트 ) > 부트스트랩(Bootstrap)' 카테고리의 다른 글
| 부트스트랩 Bootsrap / css margin, padding, font-size, 마진 패딩 폰트사이즈 (0) | 2021.12.29 |
|---|