프론트엔드/Bootstrap9 부트스트랩 - Optimize(필요한 기능만 가져와서 사용) 사이트 Optimize · Bootstrap v5.0 (getbootstrap.com) Optimize Keep your projects lean, responsive, and maintainable so you can deliver the best experience and focus on more important jobs. getbootstrap.com SCSS에서는 별도로 가져오는것보다 한번에 가져오는것이 권장된다. 따라서 SCSS코드는 수정을 하지않는다. 예제에서 dropdown 기능을 사용하기 때문에 popperjs를 설치해 주어야 한다. 에러 메시지 설치 명령어 npm i @popperjs/core 확인 예제 JS 코드 // bootstrap의 자바스크립트 기능 가져오기 (node_modul.. 2021. 6. 30. 부트스트랩 - npm 프로젝트(커스터 마이징 방법) 기존 링크로 가져오는 방식은 사용자가 임의로 수정이 불가능 하였지만 npm 프로젝트로 가져와서 사용하는 방식은 커스터마이징이 가능하다. 사용자가 색상을 변경하는 방법 사이트: Sass · Bootstrap v5.0 (getbootstrap.com) Sass Utilize our source Sass files to take advantage of variables, maps, mixins, and functions to help you build faster and customize your project. getbootstrap.com 필수 import 코드를 소스에 적용 컬러 가져오기 Color · Bootstrap v5.0 (getbootstrap.com) Color Bootstrap is supp.. 2021. 6. 30. 부트 스트랩 - npm 프로젝트 npm 프로젝트로 부트 스트랩을 만들면 사용자가 필요한 기능들만 가져와서 사용하는 것이 가능하고, 따라서 커스터마이징의 용이하다. npm 초기화 명령어: npm init -y package.json파일이 생성되었는지 확인 개발 소스 실행을 위해 parcel-bundler 설치: npm i -D parcel-bundler node_modules, package-lock.json 파일 생성된거 확인 package.json 파일을 수정 "scripts": { "dev": "parcel 띄워줄 html 파일명", "build": "parcel build 띄워줄 html 파일명" }, Boot Strap 파일 설치 사이트: Bootstrap · The most popular HTML, CSS, and JS lib.. 2021. 6. 30. 부트 스트랩 - Components 사용 방법 (Tooltips) Tooltip이란 설명이 팝업과 비슷하게 뜨는 것 Tooltips · Bootstrap v5.0 (getbootstrap.com) Tooltips Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-bs-attributes for local title storage. getbootstrap.com Tooltips는 성능상에 문제로 사용자가 자바스크립트로 초기화를 진행해야한다. 초기화 하는 방법 var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle=.. 2021. 6. 29. 부트 스트랩 - Components 사용 방법 (Modal) Modal 사용하는 방법 popup과 비슷한 기능 https://getbootstrap.com/docs/5.0/components/modal/ Modal Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content. getbootstrap.com 구현 방법 버튼을 만들어 주고 data-bs-toggle="modal" 을 선언해주면 modal 창을 띄워주고 기능을 하고 data-bs-target="#exampleModal" 띄워줄 모달창의 id값을 입력해주면 입력한 id값을 가지는 모달창을 띄워준다. 모달 구조 모달의 이벤트 처리 .. 2021. 6. 28. 부트 스트랩 - Forms 사용 방법 Forms(양식) 사용하는 방법 https://getbootstrap.com/docs/5.0/forms/overview/ Forms Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms. getbootstrap.com Form기능중에는 아래와 같은 기능을 골라서 사용할 수 있다. class 이름을 선언하여 각각의 기능을 구현할 수 있다. 2021. 6. 28. 이전 1 2 다음
