안녕하세요!
오늘은 HTML/CSS 공부 1일차입니다.
사실 몇개월 전에도 HTML/CSS 공부를 한 적은 있었는데,
그때는 항상 제 머리로 아이디어를 내어 코딩하려니
쉽지 않더라구요 ㅠㅠ
그래서 오늘은 강의에서 얻은 꿀팁인
부트스트랩
에 대해 알려드리려고 합니다~
부트스트랩이란?
각종 레이아웃, 버튼, 입력창 등의 디자인과 기능을
CSS와 JavaScript로 만들어 놓은 것입니다.
부트스트랩을 활용하면 굳이 직접 만들지 않아도
누군가 만들어 놓은 코드를 가져와 사용해도 되서
효율적입니다!
Bootstrap
강력하고 확장 가능하며 기능이 풍부한 프론트엔드 툴킷. Sass로 빌드 및 커스터마이징하고, 사전 빌드된 그리드 시스템 및 구성 요소를 활용하고, 강력한 JavaScript 플러그인으로 프로젝트에 생기
getbootstrap.kr
이 링크로 들어가셔서
문서에 들어가 원하는 코드를 찾아서 사용하면 됩니다.
사용 예시를 사진으로 이해하기 쉽게 보여드리겠습니다.
먼저 부트스트랩 사용을 위해 head 부분에
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
이 코드를 복사하여 붙여주세요!
제일 상단 왼쪽의 문서에 들어갑니다.
저는 컴포넌트의 버튼이 필요해 버튼을 클릭했습니다.
원하시는 다른 기능도 엄청 많으니, 필요하신 것을 찾아 사용하시면 됩니다!
저는 파란색 버튼을 사용하려고 하는데요,
보시면 그 밑에 다른 색의 버튼들을 포함한 코드가 쭉 있습니다.
그 중에서 첫번째 줄 코드를 복사하여 줍니다.
<div>
<button type="button" class="btn btn-outline-primary">Primary</button>
</div>
이런 식으로 body 부분에 입력해주시면 됩니다.
Primary라는 이름을 바꾸시려면
<div>
<button type="button" class="btn btn-outline-primary">클릭</button>
</div>
저 부분을 클릭으로 바꾼 것처럼 바꿔주시면 됩니다.
부트스트랩은 원하는 종류가 다 모여 있어
구글링보다 편할지도 모르겠습니다 ㅎㅎ
여러분도 부트스트랩 사용 꼭 해보시기 바랍니다!