A Joyful AI Research Journey🌳😊

현재 팀 프로젝트 (3)에서 만들고 있는 화면인데 Bootstrap ver.5를 이용해서 item을 상단으로 붙이려면 align-items-start을 사용한다. 사용한 코드) 입고 등록 물품명 분류 현재고 들어온 재고 재고 등록하기

다른 사이트들을 개발자 도구로 휴대폰 크기로 보면 햄버거 아이콘이라고 불리는 toggle bar가 우측으로 고정되어있었다. Bootstrap의 ms-auto class로 간편하게 우측 고정으로 만들 수 있다. 전체 코드) button에 ms-auto class를 추가했다. 결과) 토글 바가 우측으로 고정된다.

팀 프로젝트로 관리자 페이지를 만드는 데 휴대폰 같은 작은 화면으로 볼 때 아무래도 반응형이다보니 테이블의 글자가 세로로 나왔다. 가로형 스크롤바가 나오고 글자 라인이 안 바뀌도록 바꾸는 방법은 하단처럼 css에 white-space: nowrap을 쓰는 거다. /* Diagnosis.jsp 진단 테이블 칼럼 너비 조정 */ .DiagnosisTable{ table-layout:auto; white-space: nowrap; } 또 관리자 페이지의 칼럼 내용들이 왼쪽으로 쏠렸는데 아주 간단한 해결 방법은 bootstrap의 table class를 쓰는 것이다. 생략 table class를 사용하기 전) 왼쪽으로 쏠려있다. table class를 사용한 후) 자동으로 정렬됐다. 화면 너비를 줄인 뒤 하단에..

https://getbootstrap.com/docs/4.0/layout/grid/ Grid system Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes. getbootstrap.com https://getbootstrap.com/docs/5.0/layout/gutters/ Gutters Gutters are the padding between your columns, used to ..

230423 input에 자연스러운 공간 및 그림자 효과 주기 우연히 부트스트랩 템플릿들을 둘러보다가 발견한건데 input에 자연스러운 공간 그림자 효과를 줄 수 있다. .inputStyle{ background-color: #fafafa; box-shadow: inset 0 1px 3px 0 rgba(0,0,0,.08); } 코드는 위에 적었지만, 현재 부트스트랩 템플릿을 사용 중이므로 .form-control에서 수정했다. .form-control { display: block; width: 100%; padding: 0.375rem 0.75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; /* background-co..

230420 아래는 부트스트랩을 쓸 때 나오는 다운로드 아이콘 모양이다. bi bi-download me-2 아래와 신청 옆의 아이콘과 같다.

요약된 것을 편하게 볼 수 있다. https://getbootstrap.kr/docs/5.0/utilities/text/ 텍스트 Documentation and examples for common text utilities to control alignment, wrapping, weight, and more. getbootstrap.kr https://www.w3schools.com/cssref/css3_pr_text-justify.php CSS text-justify property W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular su..