부트스트랩(Bootstrap)의 DataTable을 사용하는 경우 테이블 정렬, sorting 방법입니다. (참고로 데이터테이블은 ajax를 사용하여 불러온 데이터를 기반으로 손쉽게 테이블 UI를 그려주는 라이브러리, 툴입니다.)# DataTable 정렬하는 방법DataTable의 정렬은 설정에 옵션값 order를 추가하여 가능합니다. 이 때 값은 배열 안에 배열로 넣어주시면 됩니다. 즉 복수개의 설정이 가능하죠.$('#myTable').DataTable({ order: [[3, 'desc']], // asc 또는 desc ordering: true, serverSide: false});위 예제는 3번째 index 위치를 desc 오름차순으로 정렬한 설정 값입니다.! 알아둘 내용아래에 ordering: true, serverSide: false 값은 order 값 설정시 필요한 값입니다. 없는 경우 동작하지 않을 수 있으니 참고하세요.추가로 컬럼명의 이름으로 정렬하는 방법은 현
2019-06-21 17:32:52입력폼을 만들어 방문자에게 특정한 정보를 얻을 경우 <textarea>태그가 매우 많이 사용됩니다. 하지만 textarea는 태그를 추가할 수 없는데요... 이 경우 contentEditable 속성을 태그에 추가하여 많이 사용하죠.그런데 contentEditable에 모든 태그를 허용해야만 하는 건 아니죠. 때로는 허용 가능한 태그와 아닌 태그의 구분이 필요할 수 있습니다. 오늘 알아볼 내용은 복사해서 붙여넣기의 경우 어떻게 하면 태그를 제외한 텍스트만 추가할 수 있는지의 방법입니다.# contentEditable 붙여넣기시 텍스트만 추가하기텍스트만 추가하기 위해서는 paste 이벤트를 추가하고 이벤트객체의 clipboardData 프로퍼티가 필요합니다. 그럼 간단한 예제를 만들어보겠습니다. 먼저 contentEditable 태그를 추가합니다.<div id="contactForm" contentEditable="true"></div>이제 위 태그에 붙여넣기를 시도할 경우 이벤트를
2019-02-12 06:00:45웹페이지에서 테이블 또는 리스트 형태의 그리드를 UI로 구현하는 경우가 많습니다. 예를들어 어떤 어드민 사이트에서 회원 리스트를 보여주는 경우 이름, 나이 등의 정보를 리스트해 보여줄 수 있죠.# 만약 해당 row가 몇 번째 해당하는지 알려면?리스트에서 홍길동이란 이름을 가진 사람을 찾아야합니다. 해당하는 엘리먼트가 몇 번째인지 알려면 어떻게할까요? 엘리먼트가 부모로부터 몇번째 요소인지 확잊해야겠지만 table 태그를 사용하는 경우라면 rowIndex를 사용할 수 있습니다.! rowIndex 사용하여 해당 row index값 얻기table 요소의 tr 태그... 즉 row에 해당하는 엘리먼트에 적용할 수 있으며 rowIndex는 해당하는 Index값을 반환하게됩니다. 이때 위에서부터 0부터 1, 2, 3 ... 순서로 반환합니다. 그럼 아래에서 더 자세히 예제로 알아봅니다.회원 리스트를 예로 들어봅니다. 만약 아래와 같이 회원들의 이름이 존재하는 table 태그가 있습니다. 여기서
2018-06-20 19:39:16인덱스 테이블에 대하여 알아보겠습니다. 인덱스 테이블(Indexes Table)이란 무엇일까요? 인덱스 테이블은 데이터베이스를 검색하기 위해 사용할 수 있는 특별한 테이블로써 데이터베이스 검색의 속도를 빠르게(?) 도와주는 역할을 합니다. 즉 데이터베이스를 사용하는데 있어 성능에 대한 문제 또는 개선을 위해 가장 먼저 확인하는 부분이 바로 인덱스 테이블입니다.인텍스 테이블은 테이블의 검색 속도를 빠르게 할 수 있는 별도의 테이블입니다. 이는 저절로 생성되지 않으며 관리자 또는 사용자에 의해 별도로 생성하거나 삭제할 수 있습니다. 이런 인덱스 테이블은 매우 간단한 방법을 통해 생성할 수 있으며 이에 대한 방법은 아래에 다뤄보도록 하겠습니다.인덱스 테이블은 간단하게 예를들어 책의 목차를 만드는 과정과 동일합니다. 만약 책에 목차가 있다면 원하는 결과를 더 쉽게 찾을 수 있을 것입니다. 이처럼 유용한 인덱스(Index)를 간단하게 설명하겠습니다.# 인덱스(Index) 테이블이란 무엇인가-
2016-07-08 11:12:11안녕하세요. 마지막 업데이트가 무려 6개월 이전이군요... 초심으로 돌아가 다시 퍼블리싱 배우기를 연재를 해보려고합니다. 아무쪼록 재미있게 봐주셨으면 합니다. 뭐든 배우는 건 재미, 흥미를 가지는게 제일 중요하죠:)저번 시간까지는 이론적인 부분이 많았다면 앞으로는 좀 더 실전적인 부분 위주로 적어볼까합니다. 오늘은 table 태그를 사용하여 테이블을 만드는 방법에 대하여 알아보려합니다.! 테이블(table) 만들기를 배워보자테이블을 먼저 알아보려고 하는 이유는 테이블을 만들어 사용하는 빈도수가 매우 높기 때문입니다. 테이블 코드는 어딜가나 볼 수 있는데 가장 많이 볼 수 있는 형태가 바로 게시판이라 할 수 있습니다. 게시판 형태의 레이아웃을 만드는 경우 테이블 태그를 사용하는 것이 가장 쉬운 방법이라 생각됩니다. 가장 먼저 테이블을 만들기 위해서 어떤 태그를 사용할까요? 바로 <table> 태그를 사용합니다.table 태그와 같은 태그들은 레이아웃, ui 요소를 쉽게 구현할 수 있도
2016-07-07 10:44:31Table 태그는 테이블, 표를 만들 수 있는 가장 간단한 방법이다. 아래는 테이블 태그를 사용하여 표를 만드는 방법을 알아보고 table 코드를 사용했을때의 장점 및 단점 그리고 팁과 정보에 대하여 좀 더 자세하게 다뤄보려 한다.# Table 태그를 사용하는 방법먼저 테이블의 경우 표를 만드는데 사용하는 태그로 리스트 태그인 <ul> 태그와 구분할 수 있다. 이런 레이아웃을 구성하는 태그들은 그 쓰임과 목적에 따라 구분되어야 하는데 일반적으로 레이아웃 태그가 가진 기본적인 속성 때문에 이에 맞는 태그를 사용하는 것이 효과적이다. 예를들어 간단한 목록을 표현하는데는 리스트 태그인 <ul> 태그만으로 충분하여 <table> 태그를 사용하면 오히려 불필요한 속성들이 적용될 수도 있다.아래는 테이블에 사용될 수 있는 태그들을 적어보았다. 해당 태그들은 각각 <table> 안에서 쓰임을 갖는다.+ 태그의 쓰임 상세보기<table> // 표를 생성하는 가장 상위의 태그<thead> // 테이
2016-07-04 08:21:53테이블을 만들기 위해 사용하는 테이블 태그(table)에는 다양한 속성들이 사용된다. 그 중에서도 우리는 다음과 같이 summary 속성을 속성을 사용한 태그를 볼 수 있다. 과연 이 속성은 어떤 역할을 하는 태그인지 알아보겠다.summary 속성은 현재 테이블이 갖고 있는 내용을 요약한 부분으로 어떤 내용이 담겨있는지 간략하게 알려줄 수 있다. 이 태그를 사용하는 목적 중 가장 큰 이유는 웹접근성에 해당하는 이유이다. 시각 장애인의 경우를 예로 들면 리더기를 통해 테이블을 읽는 경우가 생길 수 있다. 이 경우 테이블이 어떻게 구성되었고 무엇을 보여주는지에 대하여 간략한 요약을 나타낸다.우선 이 속성의 쓰임을 아래의 예제를 통해 상세하게 알아보자. 만약 행사에 대한 스케쥴표가 아래와 같이 있는 경우를 예로 들어보자.! Summary 태그의 예제소스 코드보기<table summary="첫째줄은 시간을 나타내며 다른 컬럼들은 행사에 대한 장소 및 설명이다."><tbody> <tr>
2016-04-11 09:20:48email html을 사용해 사용자에게 메일을 발송하는 경우 테이블 태그를 많이 사용한다. 만약 테이블 태그를 사용했는데 아래와 같은 이슈가 나타난다면?? 나타나는 이슈는 다음과 같다. html 코드에 table 태그를 사용하여 코드를 작성하였고 이 테이블의 border 테두리를 둥글게 radius를 적용하였는데 정상적으로 적용되지 않는 이슈이다. 어떻게 수정해야 할까...문제는 table 태그에 함께 사용된 border-collapse: collapse; 속성 때문이다. 만약 기존 테이블 코드가 아래와 같은 경우....<table style="border-collapse: collapse; border-radius: 10px;" height="100">....</table>이 경우 테두리를 적용하려면 반드시 border-collapse를 제거해야만 가능하다.<table style="border-radius: 10px;" height="100">...</table>아마 정상적으로 b
2016-03-28 15:11:57html에서 테이블 태그는 가장 많이 쓰이는 태그 요소 중 하나죠. 특히 명단이나 리스트를 보여줄 때 가장 쉽게 구현이 가능한 방법입니다. 이런 테이블을 구성하는데 사용할 수 있는 태그는 참 많습니다.table, thead, tbody, tr, td 등등등 정말 많습니다. 오늘은 그중에 하나인 colgroup 태그에 대하여 알아보도록 하겠습니다.# colgroup 태그란 무엇인가이 태그는 뒤에 나오는 컬럼(td 태그)에 적용할 스타일을 해당 태그에서 미리 적용할 수 있게합니다. 특히 각 컬럼의 길이를 설정하는데 가장 많이 쓰입니다. 예를들어 아래와 같은 테이블에서 각각의 컬럼들이 width가 각각 다음과 같이 정하려 한다면...1. 첫번째 컬럼 : 번호 td - 20px2. 두번째 컬럼 : 제목 td - 100px3. 세번째 컬럼 : 이름 td - 30px코드는 다음과 같이 설정하게 됩니다.# colgroup 예제코드 보기아래는 테이블을 하나 만들고 width를 css가 아닌 col
2015-10-31 22:54:25textarea 태그에 이미지를 넣는다... 만약 textarea에 이미지를 넣어야한다면 왜 넣으려고 할까요? 가장 큰 이유는 아래일 것입니다.' textarea를 통해 텍스트만 보여주는 것이 아니라 중간에 삽입될 이미지도 함께 보여주고 싶다.'예를 들어 어떤 글을 작성할때 이미지를 함께 첨부하고 싶은데 현재 작성 중인 태그가 textarea 이라면 문제가 발생합니다. 왜냐면 textarea 태그안에 이미지 삽입은 불가능하죠... 방법이 없을까요?# textarea에 img 태그는 추가 불가결론부터 말하면 textarea에 이미지를 넣는 것은 불가능합니다. 이미지를 위한 img 태그뿐만 아니라 스타일을 변경하기 위한 모든 태그들을 넣을 수가 없습니다. 그래서 이 방법이 아닌 다른 방법을 찾아야합니다.'이미지 첨부가 가능한 div 태그를 사용하고 contentEditable 속성을 사용한다.' 이때 사용 가능한 방법은 태그에 contentEditable 속성을 사용하는 방법입니다. <
2015-09-18 10:15:49테이블(table) 태그를 사용해 표를 만든 뒤 각각의 셀, td 태그 간의 간격을 조정하는 방법에 대하여 알아봅니다.# Table 테이블에서 border-spacing 셀 간격 조절하기만약 테이블 셀 사이의 간격이 존재하거나 없는 경우 이를 변경하기 위해서 사용하는 css 속성 border-spacing입니다.을 사용하여 조정할 수 있습니다. 아래와 같이 사용합니다.table { border-spacing: 2px; border-collapse: separate;}위와같이 border-spacing 속성을 사용하면 셀 사이, 즉 테두리 사이의 간격을 원하는 값으로 조정할 수 있습니다. 위에는 border-spacing 아래에 border-collapse속성을 separate으로 지정하였는데 만약 spacing을 지정하였음에도 변화가 없다면 이 속성이 collapse로 설정되었는지 확인하시기 바랍니다. border-spacing은 separate일 경우에만 적용됩니다. 그럼
2015-05-28 14:43:04특정 태그를 정렬할 경우 가로 정렬은 쉽지만 세로 정렬은 쉽지 않죠? 이럴때 가급적 쉽게 적용이 가능한 방법입니다. 정해진 높이가 아닌 경우 height 값이 변하기 때문에 margin: auto 값으로 세로 정렬되지 않아 다른 방법을 찾아야하죠. 이를 해결하기 위한 방법은 자바스크립트를 이용할 수도 있지만 가장 간단한 방법은 역시 css를 사용하는 것입니다 .여기서는 display 속성의 table-cell 속성을 이용하는 방법입니다... # 세로정렬 예제 소스보기<style type="text/css">div {background: #f9f9f9;width: 200px;height: 200px;border: 1px solid #d1d1d1;box-sizing: border-box; }p {position: absolute;margin: 0;padding: 0;}</style> <div><p>Middle Alignment</p></div>보시는 것처럼 div 태그 안에 있는 p
2014-03-07 17:40:19
