더 나은 웹개발을 꿈꾸는 기술 블로그. 웹이즈프리.
총 17개의 일치하는 문서를 찾았습니다.
reactantd Table 컴포넌트 체크박스 사용 방법 및 예제
antd 라이브러리의 Table 컴포넌트를 사용하면 리스트 형태의 데이터를 테이블로 출력할 수 있습니다. 만약 테이블에 체크박스를 사용하려면 어떻게 하는지 방법을 알아봅니다.추가로 체크박스를 사용하여 전체 선택 및 전체 해제 방법도 함께 알아봅니다.# antd Table 컴포넌트 체크박스 사용하기테이블에 체크박스를 사용하여 선택하는 방법은 많이 사용됩니다. 원하는 row만 선택하거나 해제할 수도 있고 전체선택하거나 전체 해제하는 것 역시 가능하죠.! 만약 Table에 체크박스를 사용하려면?Table 컴포넌트는 기본 설정이 체크박스를 사용하지 않도록 되어 있으므로 만약...
Last Modified : 2020-12-19 14:41:48
Created : 2020-12-18 16:32:39
js자바스크립트 contentEditable 엔터 입력시 div를 p 태그로 변경
자바스크립트의 태그에 contentEditable 어트리뷰트를 적용할 경우 해당 태그 내부에 텍스트 입력 또는 엘리먼트 추가 등등 다양한 조작이 가능합니다. 이때 만약 엘리먼트 안에서 엔터키를 입력할 경우 입력된 내용이 div 태그와 함께 추가되죠.# 엔터 키 입력시 div를 p로 변경하기즉 contentEditable이 사용된 엘리먼트 내부에서 엔터를 입력하면 자동으로 div 태그가 입력된 영역에 랩핑되어 적용됩니다. 실제 코드를 보면 아래와 같이 적용되죠.<div> <br></div>...만약 기본값으로 사용되는...
Last Modified : 2020-11-19 16:13:49
Created : 2020-11-18 22:18:00- react
[react] antd table 컴포넌트 정보 및 예제
React UI 라이브러리 antd의 Table 컴포넌트에 대하여 알아봅니다. antd의 Table 컴포넌트는 테이블 형태의 Layout을 구현하는데 사용됩니다.<Table />그럼 간단한 사용 방법 및 예제를 먼저 알아봅니다.# antd Table 컴포넌트 정보 및 예제antd의 Table 컴포넌트를 사용하려면 기본적으로 아래의 props를 반드시 필요로 합니다.dataSource // 테이블에 출력할 리스트 정보columns // 테이블의 컬럼 정보를 표시합니다.rowKey // [String | Function] unique Key 값을 설정합니다.예...
Last Modified : 2020-09-10 10:52:52
Created : 2020-09-10 10:31:17 - webdevetc
타블렛 2in1 노트북에 필요한 악세서리, 장갑
요즘 사용되는 랩탑, 노트북은 대부분의 제조사에서 2in1 모델을 출시하고 있습니다.! 2in1 랩탑, 노트북 컴퓨터여기서 2in1은 말 그대로 두 가지 기능을 모두 수행하는 랩탑, 노트북을 얘기합니다. 즉 일반 컴퓨터로 사용할 수도 있고 동시에 태블릿처럼 사용하는 것 역시 가능합니다. 그래서 2in1은 아래와 같은 기능을 가지고 있습니다.- 디스플레이의 터치 기능- 화면이 완전히 접혀 키패드 없이 태블릿으로만 사용 가능이런 2in1을 사용하게 될 때 있으면 유용한 액세서리나 앱은 무엇이 있을까요?바로 드로잉 기능을 더 쉽고 편하게 사용할 수 있는 유용한 액세서리 몇...
Last Modified : 2020-08-06 09:01:24
Created : 2020-08-06 08:12:00 
js[자바스크립트] Object 객체 메소드 freeze(), isFrozen() 알아보기
자바스크립트에서 사용 할 수 있는 자바스크립트 obect, 객체 메소드 두 가지를 알아봅니다. 간단한 문법은 아래와 같습니다.Object.freeze()Object.isFrozen()그럼 이 둘의 사용 방법과 목적에 대하여 알아봅니다.# 자바스크립트 Object freeze(), isFrozen()자바스크립트의 객체에는 두 가지 함수 freeze()와 isFronzen()이 있습니다. 이에 대하여 각각 알아보려고 합니다. 먼저 freeze()에 대하여 알아봅니다.! Object의 freeze() 알아보기객체 타입인 값에 freeze()를 사용하면 값을 변경...
Last Modified : 2021-07-06 13:18:28
Created : 2020-06-08 20:44:01- html
[HTML] 테이블 태그에서 colspan 최대 값 설정하기, table colspan
HTML 테이블 태그를 사용하는 경우 만약 colspan 또는 rowspan의 최대값을 설정하는 방법에 대하여 알아봅니다.# HTML table 태그의 colspan 최대값 설정하기rowspan 역시 colspan 설정 방법과 동일하므로 colspan의 방법에 대하여 알아봅니다.! 먼저 rowspan, colspan은 무엇이고 언제 최대값이 필요할까요?테이블 태그는 여러개의 셀(cell) 단위로 구성되어 있습니다. 이때 각각의 셀을 병합하는 방법으로 rowspan, colspan이 사용됩니다. 두 개 모두 합치는 목적으로 사용되나 row, span 즉 행 또는 열을 ...
Last Modified : 2020-05-15 16:03:36
Created : 2020-05-11 17:25:43 
webdevetcbootstrap DataTable 사용시 sorting 정렬하는 방법
부트스트랩(Bootstrap)의 DataTable을 사용하는 경우 테이블 정렬, sorting 방법입니다. (참고로 데이터테이블은 ajax를 사용하여 불러온 데이터를 기반으로 손쉽게 테이블 UI를 그려주는 라이브러리, 툴입니다.)# DataTable 정렬하는 방법DataTable의 정렬 설정은 어떻게 할까요? 이 경우 설정값에 추가로 order 및 ordering를 추가하여 가능합니다. 아래와 같이 말이죠.{ order: [[3, 'desc']], ordering: true, ...}여기서 사용된 order와 ordering은 다음의 ...
Last Modified : 2020-12-09 08:18:45
Created : 2019-06-21 17:32:52
jscontenteditable 태그에 텍스트만 붙여넣는 방법
입력폼을 만들어 방문자에게 특정한 정보를 얻을 경우 <textarea>태그가 매우 많이 사용됩니다. 하지만 textarea는 태그를 추가할 수 없는데요... 이 경우 contentEditable 속성을 태그에 추가하여 많이 사용하죠.그런데 contentEditable에 모든 태그를 허용해야만 하는 건 아니죠. 때로는 허용 가능한 태그와 아닌 태그의 구분이 필요할 수 있습니다. 오늘 알아볼 내용은 복사해서 붙여넣기의 경우 어떻게 하면 태그를 제외한 텍스트만 추가할 수 있는지의 방법입니다.# contentEditable 붙여넣기시 텍스트만 추가하기텍...
Last Modified : 2019-08-07 20:38:59
Created : 2019-02-12 06:00:45- js
[자바스크립트] 테이블에서 해당 열의 인덱스 값 얻는 방법
웹페이지에서 테이블 또는 리스트 형태의 그리드를 UI로 구현하는 경우가 많습니다. 예를들어 어떤 어드민 사이트에서 회원 리스트를 보여주는 경우 이름, 나이 등의 정보를 리스트해 보여줄 수 있죠.# 만약 해당 row가 몇 번째 해당하는지 알려면?리스트에서 홍길동이란 이름을 가진 사람을 찾아야합니다. 해당하는 엘리먼트가 몇 번째인지 알려면 어떻게할까요? 엘리먼트가 부모로부터 몇번째 요소인지 확잊해야겠지만 table 태그를 사용하는 경우라면 rowIndex를 사용할 수 있습니다.! rowIndex 사용하여 해당 row index값 얻기table 요소의 tr 태그... 즉 ...
Last Modified : 2018-06-26 08:49:07
Created : 2018-06-20 19:39:16 
sql[sql] 인덱스(indexes) 테이블이란? 간단하게 설정하는 방법
인덱스 테이블에 대하여 알아보겠습니다. 인덱스 테이블(Indexes Table)이란 무엇일까요? 인덱스 테이블은 데이터베이스를 검색하기 위해 사용할 수 있는 특별한 테이블로써 데이터베이스 검색의 속도를 빠르게(?) 도와주는 역할을 합니다. 즉 데이터베이스를 사용하는데 있어 성능에 대한 문제 또는 개선을 위해 가장 먼저 확인하는 부분이 바로 인덱스 테이블입니다.인텍스 테이블은 테이블의 검색 속도를 빠르게 할 수 있는 별도의 테이블입니다. 이는 저절로 생성되지 않으며 관리자 또는 사용자에 의해 별도로 생성하거나 삭제할 수 있습니다. 이런 인덱스 테이블은 매우 간...
Last Modified : 2017-09-21 00:13:11
Created : 2016-07-08 11:12:11