DEV/javascript
-
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 결과 (사진을 누르면 확대가 가능..
-
Bootstrap 설치 및 사용하기DEV/javascript 2022. 2. 21. 11:41
* 옛날 버전으로 인해 적용이 안되던 것을 수정함. (2022. 05. 03) Bootstrap은 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크이다. 다운로드는 하단 링크를 참조하자. 다양한 설치 방법을 제공한다. 1. "최소화된" 이라 그런가 적용 안되는게 있다. http://bootstrapk.com/getting-started/ (그냥 버전이 낮아서 그랬다... 아래 링크를 사용하자...) https://getbootstrap.com/docs/5.1/getting-started/introduction/ Introduction Get started with Bootstrap, the world’s most popular framework for building respon..
-
Toast grid 함수 및 이벤트 예시DEV/javascript 2022. 2. 17. 15:56
Toast grid를 사용하면서 가장 많이 쓴 이벤트와 함수를 남겨 두려고 한다. https://nhn.github.io/tui.grid/latest/Grid https://nhn.github.io/tui.grid/latest/Grid/ Occurs when the grid data is updated and the grid is rendered onto the DOM The event occurs only in the following API as below. 'resetData', 'restore', 'reloadData', 'readData', 'setPerPage' with 'dataSource', using 'dataSource' PROPERTIES nhn.github.io 공식 페이지에 아주 ..