분류 전체보기
-
Bootstrap 모달(Modal) 기본 사용법DEV/javascript 2022. 2. 22. 15:30
Bootstrap은 다양한 기능을 제공한다. 이번 프로젝트에서 많이 활용한 모달은 간단하게 정리했다. 우선 모달은 무엇인가? 팝업(Popup) : 현재 화면에 다른 화면을 하나의 창(Browser)으로 보여주는 기능 모달(Modal) : 화면 위에 하나의 작은 화면을 더 만들어 부가적인 일들을 처리할 수 있게 만드는 기능 https://7942yongdae.tistory.com/104 Javascript - 간단하게 CSS를 활용한 모달창 만들기 [Modal / Dialog] 화면을 개발할 때 자주 나오는 구성 요소 중 하나가 바로 모달(Modal) 창입니다. 팝업(Popup) 창과 약간 혼동해서 쓰는 경향이 있기는 한데 Modal과 Popup는 개념이 다릅니다. 팝업(Popup)은 현재 화면에 7942..
-
Bootstrap 알림, 경고(Alert) 기본 사용법DEV/javascript 2022. 2. 21. 17:56
부트스트랩은 다행이도 이쁜 Alert도 지원한다. 다음과 같은 기본적인 예시 또한 친절하게 알려준다. Holy guacamole! You should check in on some of those fields below. × 아주 훌륭하다. 나는 약간 수정하여 사용하였다. HTML 샘플 테스트 입니다! ALERT TEST Alert? test.js "use strict" // 실행 $(function(){ // ★ 방법 1 // alert이 없을 때 버튼을 누르면 alert을 띄움 // alert이 있을 때 버튼을 누르면 alert을 제거 $(document).on('click', '#tBtn', function(){ // if (alert에 d-none class가 있는 경우) if($('#tAlert..
-
Bootstrap 기본적인 버튼(Button) 사용법DEV/javascript 2022. 2. 21. 17:10
성격 급한 사람을 위한 코드! 버튼, 작게, danger 부트스트랩 버튼 사용법은 대단히 간단하다. 부트스트랩을 import한 상태라면 다음과 같이 사용이 가능하다. 샘플 HTML Button Primary Secondary Success Danger Warning Info Light Dark Button outline Primary Button large Large Button small Small 클릭하면 크게 보인다구요! class에 btn을 우선적으로 추가하고 더 필요한 요소가 있으면 해당 요소 class를 뒤에 추가적으로 작성해주면 된다. 부트스트랩 버튼! https://getbootstrap.com/docs/5.1/components/buttons/ Buttons Use Bootstrap’s ..
-
Bootstrap 기본적인 테이블(Table)사용하기DEV/javascript 2022. 2. 21. 15:36
Bootstrap은 다양한 컴포넌트를 제공한다. Table 기능을 쓸 기회가 있어 사용해보았다. 샘플 HTML Table 1 # 성 이름 나이 1 박 석봉 29 2 김 시봉 29 Table 2 # 성 이름 나이 1 박 석봉 29 2 김 시봉 29 3 이름 없음 ??? 4 이름 없음 5 --- Table 3 # 성 이름 나이 1 박 석봉 29 2 김 시봉 29 3 이름 없음 ??? 4 이름 없음 억지 예제를 만들다 보니 코드가 길어졌다. 사진을 클릭하면 크게 볼 수 있을지도...? Table 1 기본적으로 class에 "table"을 추가하여 Bootstrap table을 사용할 수 있다. 1번 테이블은 추가적으로 "table-sm"을 추가하여 작은 테이블로 사용하였다. 으로 비율을 조정하였다. Table..
-
Bootstrap 그리드 시스템 (Grid system : row, col)DEV/javascript 2022. 2. 21. 11:54
성격 급한 사람을 위한 빠른 코드! 작은 사이즈, 4/12 만큼 공간을 차지 작은 사이즈, 8/12 만큼 공간을 차지 HTML 화면을 배치하고 꾸미는 것이 참으로 난감하다. 특히 나처럼 미적 감각이 1도 없는 경우, 이러한 작업은 아주 어려웠다. Bootstrap을 이용하면 화면 배치가 쉬워지고 준비된 컴포넌트를 사용하여 간단한 화면 구성을 할 수 있다. 오늘은 그중 그리드(Grid) 시스템을 보려고 한다. 화면 구성을 어찌해야 할지 몰랐었는데 Bootstrap을 이용하여 쉽게 사용할 수 있었다. row, col 사용법을 간단하게 알아보자. 샘플 HTML TEST Left TEST Center TEST Right TEST Left TEST Center TEST Right 결과 (사진을 누르면 확대가 가능..