석봉노트 석봉노트

분류 전체보기

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

  Read More
• 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 결과 (사진을 누르면 확대가 가능..

  Read More
• 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..

  Read More
• 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 공식 페이지에 아주 ..

  Read More
• Javascript Toast grid 예시

  DEV/javascript 2022. 2. 16. 17:28

  기존에 작성하였던 그리드 예시가 가독성이 좋지 못하여 새로 작성하였다. 사실 이 글이 이렇게 많이 볼 줄 몰랐다... 기존에 작성한 내용은 하단에 그대로 남겨 두었으니 옛날 글을 보고싶다면 스크롤을 내리면 된다. 간단한 Toast grid 예제는 다음과 같다. sample.html sample.js const initGrid = () => { // 그리드 객체 const Grid = tui.Grid; /** * Grid 테마 커스텀 * Grid.applyTheme('striped', {...}) : * @param {String} default : 프리셋 (기본) * @param {String} striped : 프리셋 (줄무늬) * @param {String} clean : 프리셋 (클린) * - pr..

  Read More