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..

Forms form에는 다양한 컴포너트 form-control 태그 자체에 들어있다. 이메일 주소나 비밀번호를 입력하는 텍스트형 입력창이 있을 때 class에 form-control을 적용하면 더 보기 좋은 입력 형태를 만들 수 있다. form-gro up form-froup은 태그를 비롯해 다양한 태그를 그룹화할 때 쓰는 클래스이다. 기본적으로 여백을 준다. 그룹화할 때 사용한다. Forms Email placeholder가 이상하게 보이지만 form-control을 이용해서 어떤 요소이든 간에 화면의 너비를 차지하게 만들었다. 그리드를 사용해 더 나은 레이아웃인 한줄에 여러개의 입력창을 배치시킬 수 있다. Forms Email Password Password 창도 추가 했다. 이메일 주소나 비밀번호를..

Helper 클래스 콘텐츠를 정렬할 수 있는 좋은 유틸리티 부트스트랩은 flexbox 용어를 사용한다. flexbox 기반으로 만들어졌기 때문이다. flexbox, align-items 교차축에서 작동하며 flexbox를 만든다. 콘텐츠를 수직 정렬할 때 적용할 수 있는 옵션이다. Grid Aligment Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aperiam molestiae sit, tempore unde porro voluptates est fugit. Reiciendis exercitationem officiis aliquam minus corrupti quaerat omnis commodi dolore ipsum consequatur..

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..

버튼을 다루는 작업에서는 항상 btn 클래스가 사용된다. Primary Primary 오른쪽이 전형적인 버튼인게 부트스트랩 버튼과 다른 것을 파악할 수 있다. 기본 값으로 설정된 색상들이다. 중요한것은 시맨틱! 의미가 중요하다! (부트스트랩의 주요 컬러는 보라색 같은 의미가 중 요한 것이다.) 다 바꿀 수 있는 빌트인 옵션이다. 중요한것은 레이블과 용어 뒤에 있는 의미이다. Primary Primary Primary btn btn 뒤 시맨틱 컬러를 쓴 구문을 다양한 형태로 만들었다. Primary Success Info type="button" 속성은 제출이나 재설정 버튼이 아니라 그냥 기본값으로 지정된 동작이 없는 버튼이다. Outline 변형도 할 수 있다. 실제 클래스 이름은 다르다. btn은 같지..