console.log("CAPABLE");

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은 같지..

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

부트스트랩은 도구 라이브러리이다. 우리 코드에 활용할 수 있도록 여러 사람들이 작성한 CSS이다. 부트스트랩은 온갖 웹사이트에 대한 프레임워크나 시작점을 제공한다. 그러나 CSS와 관련은 있지만 CSS 코드를 타이핑하지 않을 것이다. 부트스트랩에서 중요한건 그리드와 반응형 부트스트랩 그리드이다. 부트스트랩은 유명한 CSS 프레임워크이다. CSS 프레임워크란 무엇일까? 현실에서 뭔가를 만들기 전에 세우는 틀이라고 생각하면 좋다. 예를 들면 실제 건물을 세우거나 조각을 하거나 할때 종이 장식품을 만들 때처럼 말이다. 컴포넌트 모음 앱에 넣어서 다양한 조각을 모아둔 컴포넌트 모음 ex 버튼, 네비게이션 바 그리드 시스템 웹사이트 레이아웃을 보조하는 것, 많은 양의 CSS가 미리 작성된것이다. 화면 크기에 따라..

responmsive design(반응형 디자인) 사용하는 기기의 화면 크기에 따라 반응하는 웹사이트를 만드는 것이다. media queries(미디어 쿼리) media queries를 통해서 이 작업을 할 수 있다. media queries는 CSS와 style sheet에서 작성할 수 있다. 스타일을 변경하고 매개변수에 따라 새로운 스타일을 넣을 수 있다. 보통 화면 너비나 기기 종류에 맞춰 움직이는 방향을 통해 스타일을 조정한다. 매우 작은 화면이면 내비게이션 바를 접어서 공간을 넓힌다. 브라우저 속성에 맞추는데 뷰포트 너비나 높이 화면 방향같은 속성이 있다. 다양한 특징 및 매개변수가 다양하다. 미디어 쿼리는 @media로 시작한다. 괄호안에 미디어 기능을 다양하게 넣을 수 있다. width를 클..

flex sizing properties 공간이 있을때/없을때 어떻게 늘어나고 줄어드는 지 알 수 있다. body { font-family: 'Merriweather', serif; } h1 { text-align: center; } #container { background-color: #6c757d; width: 90%; /* height: 500px; */ margin: 0 auto; border: 5px solid #6c757d; display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; } #container div { width: 200px; height: 200px; text-align: center; } fle..

align-content 행이나 열이 여러개일 때 교차축을 기준으로 정렬하는 것이다. 즉 열(행) 사이를 조정한다. align-content: space-between align-content: flex-start align-content: flex-end align-content: center 줄바꿈없이 단일 행/단일 열이라면 align-content는 아무것도 바뀌지 않는다. align-self align-self는 align-item과 비슷하지만 단일 요소에 사용하거나 플렉스 컨테이너에서 두 개 요소에 개별로 사용한다. 플렉스 컨테이너 자체에는 쓰이지 않는 특성으로 개벼 요소에 적용할 때 사용한다. 교차축을 기준으로 배열된 단일 요소의 위치를 바꿀 수 있다. align-self: space-betw..

align-items align-items는 교차축을 따라 아이템을 배열합니다. (justify-content는 메인 축을 따른다.) align-items: flext-start; 교차축의 시작점을 기준으로 한다. #container { background-color: #6c757d; width: 90%; height: 500px; margin: 0 auto; border: 5px solid #6c757d; display: flex; flex-direction: row; justify-content: center; align-items: flex-start; } #container div { width: 200px; height: 200px; text-align: center; } align-item: ..

flex-wrap flex-wrap은 메인 축이 수평일 때 새로운 행을 만들어 요소를 정렬하고 메인 축이 수직일 때 새로운 열을 만들어 요소를 정렬하는 속성이다. flex-wrap: wrap #container { background-color: #6c757d; width: 90%; height: 500px; margin: 0 auto; border: 5px solid #6c757d; display: flex; flex-direction: column; justify-content: space-evenly; flex-wrap: wrap; } 각각 위에서 아래로 정렬되었다. justify-conten:flex-start;로 설정하면 요소들 전부가 위로 촥! 붙는다. 왜냐하면 주축이 상에서 하 방향으로 한 ..