Practical Accumulation

1. maven 은 webjar을 지원하고 있는데, bootstrap과 jquery가 가장 많이 사용된다. 2. boostrap maven import를 찾아보면 아래의 코드가 들어가는데 mav repository에서 dependency를 찾아보면 2-1 아래와 같이 bootstrap이 jqeury와 popper가 의존하고 있음을 알 수 있다. 2-2 둘다 자동으로 dependency가 추가되어 별도의 webjar을 받을 필요가 없다. 2-3 받는다고 하더라도 version은 설정하지 않는 것이 좋다. 2-4 사용 전에 항상 의존성을 확인하여 어떤 버전을 사용하는지 확인 후 html에 반영해야 한다. org.webjars bootstrap 4.5.0 2-4 실제 의존 구조 캡처 3. pom 파일 4.0...

Flight Reservation Details Flight Information Operating Aline ${ flight.operatingAirlines } Departure City ${ flight.departureCity } Arrival City ${ flight.arrivalCity } Date Of Deaprture ${ flight.deteOfDeparture } Estimated Departure Time ${ flight.estimatedDepartureTime } Passenger Information First Name ${ passenger.firstName } Last Name ${ passenger.lastName } Email ${ passenger.email } Pho..

Locations ID Code Name Type Actions ${ location.id } ${ location.code } ${ location.name } ${ location.type } Delete | Edit Add Location

1. 개발용으로 귀찮아서 붙여 놓는다. 1-1 form:form을 사용 1-2 input text와 radio를 사용 Locations Code Name Type Urban Rural Add Location Edit Location View all locations 2. 사용자 등록화면 2-1 패스워드 검증 때문에 붙어 놓음 User Registration FirstName LastName Email Password Confirm Password

0. Grid layout은 부트스트랩의 기본적인 레이아웃 설계 도구이다. 0-1 grid layout은 무조건 .container안에 배치되어야 한다. 0-2 한 줄을 12로 나누어 필요한 만큼 배치를 한다. 0-3 값을 생략하면 나머지 공간을 공유하게 된다. 1. 기본적인 공간 설정 1-0 row, col class를 가지고 있다. 1-1 row는 하나의 행을 말하고 하나의 행안에 여러 개의 열이 배치된다. 1-2 열의 크기는 0번 항목의 12등분한 공간을 지정하여 설정한다. col-8 이면 8/12공간을 차지한다. 1-3 가장 기본적인 레이아웃의 예시는 아래와 같다. One of three columns One of three columns One of three columns 1-5 column의..

1. Responsive breakpoint는 부트스트랩에서 반응형 웹을 구현하기 위한 기본적인 도구이다. 1-1 5가지의 단계로 나누어져 있으며 xs, sm, md, lg, xl로 표현된다. 1-1-1 xs는 기본값이고 xs라고 쓰지 않는다. - 즉 0px이고 모든 경우에 다 적용된다. 1-1-2 sm은 576px 이상 1-1-3 md은 768px 이상 1-1-4 lg는 992px 이상 1-1-5 xl은 1200px 이상 1-2 위의 값은 언제 각 단계가 적용될지에 대한 min-width값이다. 즉 최소의 값들이다. 1-2-1 아래 값들은 모두 오버라이딩이되어 적용된다. 즉 현재 화면크기와 가장 가까운 미디어쿼리가 적용된다. body { background: red; } @media (min-width..

0. 나이가 들어가니 기억력이 떨어져서 이젠 뭐든지 적어놔야 한다. 1. Alert은 화면에 안내를 띄울 때 사용하면 편리하다. 2. x버튼을 우측 상단에 버치하여 수동으로 제거할 수도 있다. 2-1 alert-dismissible은 텍스트가 쓰여질 수 있는 범위를 우측에서 5rem정도 줄인다. 그곳에 close 버튼이 배치된다. 2-2 이거 쓰지 않아도 보기엔 별차이가 없는데, 이것 없이 킨 안내구문이 들어갈 경우 x를 덮어 써버린다. 2-3 fade, show는 쌍으로 다니고 사라지고 나타날 때 애니메이션 효과를 더해 준다. 2-4 data-dismiss 부분이 javascript를 작동하는 부분이라서 꼭 삽입해야 한다. 2-5 닫기 아이콘을 위한 버튼은 호환성을 위해 button 테그를 사용해야 한..

Hello, world! 0 부트스트랩은 2개의 js 라이브러리를 의존하고 있다. jQuery와 Popper.js이다. 0-1 순서가 중요하다. jQuery, Popper.js, Bootstrap 순서이다. 0-2 Popper.js는 툴팁 같은 것을 사용할 때 부트스트랩이 사용한다.