codeGray

react 에서 부트스트랩을 사용하는 방법 일반 부트스트랩 사용법과 react에서 부트스트랩을 사용하는 방법은 조금 다르다. react는 우선 npm으로 부트스트랩을 설치 해주어야 한다. npm install react-bootstrap bootstrap 설치 후 리액트 프로젝의 index.js 에서 부트스트랩 css를 import 해주어야한다. import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import 'bootstrap/dist/css/bootstrap.min.css' ; const root = ReactDOM.createRoot(document.getElementById('root..

bootstrap - grid 부트스트랩 grid는 row와 col을 이용해서 테이블을 생성 하는 것이다. html의 태그와 같다고 생각하면 된다. container와 마찬가지로 sm, lg, 등의 클래스를 주면 반응형으로 사용 가능하다. row클래스는 html의 과 같이 한 줄을 의미하고 col클래스는 html의 와 같이 한 칸을 의미한다. 기본적으로 한 row는 최대 12개의 col을 가질 수 있다. 그냥 class="col"로 한 줄을 만들어도 되지만 class="col-12"로 해도 한줄이 된다. 3칸으로 나누고 싶으면 class="col-4"로 세 번 사용하면 된다. 이걸 이용해서 하나하나 반응형으로 만들기는 꽤나 손이 많은 작업이기 때문에 아래 사이트에서 원하는대로 그리면 코드로 만들어주기 때..

bootstrap - container 부트스트랩 컨테이너는 가장 기본적인 레이아웃 요소이고 그리드(테이블) 형식의 시스템을 사용할 때 필요하다. html로 치면 table 태그라고 볼 수 있다. 자세한 내용은 아래 공식 홈페이지에서 알 수 있다. https://getbootstrap.kr/docs/5.1/layout/containers/ 컨테이너 컨테이너는 지정된 기기 또는 뷰포트 내에서 콘텐츠를 포함하고 채우고 정렬하는 Bootstrap의 기본 컴포넌트입니다. getbootstrap.kr 부트스트랩은 기본적으로 반응형을 지원하기 때문에 아래 표대로 원하는 클래스를 사용할 수 있다. 이 표를 쉽게 설명하면 container-sm 속성은 화면 크기가 576px 아래로 내려가면 화면에 100%맞게 그리고 ..

bootstrap - 설정하기 부트스트랩은 웹 디자인을 쉽게 해주는 툴킷이다. 웹디자인이 부담스러운 개발자들이 쉽게 사용해서 디자인 할 수 있다. 가장 좋은 점은 반응형 디자인도 가능하다는 점이다. 부트스트랩을 사용하려면 공식홈페이지에 접속해서 스타터 템플릿을 복사해서 사용하면 된다.https://getbootstrap.kr/docs/5.1/getting-started/introduction/ 시작하기 세계에서 가장 인기있는 프레임워크인 Bootstrap으로 반응형, 모바일 우선 사이트를 jsDelivr와 스타터 페이지 템플릿을 통해 시작해보세요. getbootstrap.kr 문서 > 시작하기에서 내려보면 스타터 템플릿이 있다. 그대로 복사해서 넣으면 사용 할 준비를 마친 것이다. See the Pen ..