console.log("CAPABLE");

Card 일반적인 콘텐츠 홀더이자 콘텐츠 컨테이너로 조합해서 활용할 수 있다. 종종 그리드 시스템과 카드 그리드를 만드는데 쓰인다. 제목, 부제, 상단 이미지를 추가할 수 있는옵션이 있다. 또 다른 컴포넌트인 list group을 추가할 수 있다. card를 사용해서 깔끔한 그리드를 만들고 콘텐츠를 표시할 수 있다. https://getbootstrap.com/docs/5.2/components/card/ Cards Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options. getbootstrap.com Carousel 사진 갤러리나 이미지 탐색의 슬라이더를 만드는데 쓰인다...

Border 테두리를 넣고 빼거나 모깎기를 하거나 디스플레이 속성을 변경하거나 여백을 추가할 때 편리하다. 이러한 유틸리티들은 요소에 클래스만 추가해 사용할 수 있다. 사방에 테두리를 만들려면 그냥 border을 추가하면 된다. border-top은 위쪽 border-bottom은 아래쪽 등 부트스트랩에서 테두리의 굵기를 조절할 수 없음으로 실제로 지정해야한다. 디폴트는 1px 또는 2px이다. 삭제 옵션을 통해 테두리의 일부, 위, 오르쪽 테두리를 없앨 수 있다. border-0-을 넣으면 모든 테두리를 없앨 수 있다. 테두리 색상또한 변경할 수 있다.(border-primary 등) 테두리 모깍기도 가능하다. 원을 만들때 유용하다. (사각형을 깎아서 원을 만든다.) Utilities Lorem ips..

SVG(Scalable Vector Graphics) 예술적인 웹사이트나 애니메이션 및 게임들을 만들 때 사용할 수 있는 훌륭한 도구 크기 조정 가능한 백터 그래픽이다. 복붙할 수 있고 앱처럼 텍스트도 가능하다. svg는 텍스트 색상 처럼 변경할 수 있다. 아이콘을 사용할 때 통상적으로 사용하는 요소나 컴포넌트는 입력그룹이다. 입력 그룹은 라벨, 텍스트, 버튼, 드롭다운 등으로 그룹화한것이다. Icons Delete Icons Delete 무료로 사용할 수 있는아이콘이다. 아이콘 라이브러리와 툴도 있다. https://icons.getbootstrap.com/ Bootstrap Icons Official open source SVG icon library for Bootstrap icons.getboot..

navbar 그리드 시스템을 제외하면 가장 대표적인 부트스트랩 컴포넌트인 내비게이션 바 navbar-brand 제목 같은 걸 생성할 때 쓰는 class. nav만 생성하면 된다. div로 대신할 수 있지만 nav 클래스를 넣은 nav가 더 낫다. navbar-light와 narbar-dark 중 선택해야 한다. 배경색도 골라야한다. Navbar Navbar h1클래스를 사용해 크기를 키울 수 있지만 앵커 태그로 두었다. navbar-dark를 사용하니 텍스트의 색상이 변경되었다. navbar-light와 nav-dark는 배경색을 바꾸는 게 아니라 내비게이션 바의 문자를 바꾼다. 앵커 태그인 navbar-brand 안에 이미지를 삽입하고 링크 여러개를 추가하면 된다. (내비게이션에서 흔한 일이다.) Na..

Grid System 그리드 시스템을 통해 부트스트랩을 사용할 때 웹페이지에서 콘텐츠를 배열할 수 있다. 공간 분배를 화면 크기에 따라 달라지게 하는 반응형 레이아웃을 만들 수 있게 도와준다. 그리드 시스템은 컨테이너 안에서만 작동한다. 그리드를 사용하려면 항상 컨테이너 클래스가 있어야 한다. 행(row)클래스를 사용해서 행을 만들어야 한다. 부스트트랩의 모든 행에는 분배될 공간이 12유닛씩 있다. 옆의 사진처럼 동일한 세 개의 열이 있는 경우 각각의 열에 4유닛씩 동일하게 분배된다. 행에다 열(Coloumn)을 만들어야 한다. 주어진 행에서 분배하려는 모든 부분이 행이 된다. 모든 열의 클래스는 col 클래스로 시작한다. 공간을 분배하는 방법: 클래스를 사용해 col- 뒤에 숫자를 사용하면 된다. Th..

Badges 카운트나 일종의 레이블을 보여주기 위해 사용된다. 그 용도가 전부라서 헤딩이나 버튼을 넣어 조합해 사용할 수 있다. 과 class=badge 그리고 색상으로 구성된다. badge 클래스는 구문에 들어가 있는 요소에 따라 크기가 달라진다. Buttons7 badge의 장점은 내비게이션 바에 사용할 수 있다. 경고가 필요하거나 보여줘야 할 버튼이 있는 경우에 편리하다. 알림이나 변경 사항의 수를 알려줄때도 마찬가지이다. Updates7 badge-pill 테두리 모깎는 기능 Buttons7 https://getbootstrap.com/docs/5.2/components/badge/ Badges Documentation and examples for badges, our small count an..

Typography (타이포그래피) Typography는 Component에 속하지 않는다. Typography는 문서 전체 걸친 변경 사항을 알려준다. (예를 들면, 변경된 글꼴, 정의된 전체 글꼴 크기 등등 보이는 모든것을 말이다. ) Display headdings 돋보이는 헤딩을 만들때 display heading을 사용하면 된다. (기본값은 반응형이 아니지만 바꿀 수 있다.) display 클래스는 4 종류가 있다. display-1,display-2, display-3, display4 Bootstrap Playholder Buttons Primary Success Success Disabled Info Warning Outline Danger Outline Info Outline Primar..

CDN 콘텐츠 전송 네트워크 혹은 배포 네트워크를 나타낸다. 이는 원격으로 접근할 수 있는 스타일 시트의 호스트 버전이다. 컴퓨터에 다운할 필요가 없다. 옆의 링크를 복붙하면 실제 웹사이트로 이동하는 href도 있는데 해당 URL로 이동할 수 있다. 매우 큰 스타일시트의 압축판이다. 공백을 포함한 모든것이 제거되어 있다. 복사한 내용을 헤드에 넣어보겠다. 이렇게 넣으면 부트스트랩이 원상태로 돌리거나 덮어쓰질 못한다. Placeholder Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias omnis excepturi aliquam ea ut earum officia illum eligendi tempore quam ab dignissimos, ..