CATEGORIES
html에서 <table>(테이블) 태그는 가장 많이 쓰이는 태그 요소 중 하나죠. 특히 명단이나 리스트를 보여줄 때 가장 쉽게 구현이 가능한 방법입니다.이런 테이블을 구성하는데 사용할 수 있는 태그는 참 많습니다. table, thead, tbody, tr, td 등등 정말 많습니다. 오늘은 그 중에서 colgroup 태그에 대하여 알아보도록 하겠습니다.# colgroup 태그란 무엇인가colgroup 태그는 사용되는 테이블의 컬럼(td 태그)에 적용할 스타일 width와 bakcground를 해당 태그에서 미리 적용할 수 있게 합니다. 특히 각 컬럼의 길이를 설정하는데 가장 많이 쓰입니다. 예를들어 아래와 같은 테이블에서 각각의 컬럼들이 width와 background를 각각 다음과 같이 사용하려고 한다
Last Modified : 2020-08-28 10:02:49
Table 태그는 테이블, 표를 만들 수 있는 가장 간단한 방법이다. 아래는 테이블 태그를 사용하여 표를 만드는 방법을 알아보고 table 코드를 사용했을때의 장점 및 단점 그리고 팁과 정보에 대하여 좀 더 자세하게 다뤄보려 한다.# Table 태그를 사용하는 방법먼저 테이블의 경우 표를 만드는데 사용하는 태그로 리스트 태그인 <ul> 태그와 구분할 수 있다. 이런 레이아웃을 구성하는 태그들은 그 쓰임과 목적에 따라 구분되어야 하는데 일반적으로 레이아웃 태그가 가진 기본적인 속성 때문에 이에 맞는 태그를 사용하는 것이 효과적이다. 예를들어 간단한 목록을 표현하는데는 리스트 태그인 <ul> 태그만으로 충분하여 <table> 태그를 사용하면 오히려 불필요한 속성들이 적용될 수도 있다.아래는 테이블에 사용될 수
Last Modified : 2020-05-11 17:25:37
테이블(table) 태그를 사용해 표를 만든 뒤 각각의 셀, td 태그 간의 간격을 조정하는 방법에 대하여 알아봅니다.# Table 테이블에서 border-spacing 셀 간격 조절하기만약 테이블 셀 사이의 간격이 존재하거나 없는 경우 이를 변경하기 위해서 사용하는 css 속성 border-spacing입니다.을 사용하여 조정할 수 있습니다. 아래와 같이 사용합니다.table { border-spacing: 2px; border-collapse: separate;}위와같이 border-spacing 속성을 사용하면 셀 사이, 즉 테두리 사이의 간격을 원하는 값으로 조정할 수 있습니다. 위에는 border-spacing 아래에 border-collapse속성을 separate으로 지정하였는데 만약 s
Last Modified : 2019-08-07 20:38:42textarea 태그에 이미지를 넣는다... 만약 textarea에 이미지를 넣어야한다면 왜 넣으려고 할까요? 가장 큰 이유는 아래일 것입니다.' textarea를 통해 텍스트만 보여주는 것이 아니라 중간에 삽입될 이미지도 함께 보여주고 싶다.'예를 들어 어떤 글을 작성할때 이미지를 함께 첨부하고 싶은데 현재 작성 중인 태그가 textarea 이라면 문제가 발생합니다. 왜냐면 textarea 태그안에 이미지 삽입은 불가능하죠... 방법이 없을까요?# textarea에 img 태그는 추가 불가결론부터 말하면 textarea에 이미지를 넣는 것은 불가능합니다. 이미지를 위한 img 태그뿐만 아니라 스타일을 변경하기 위한 모든 태그들을 넣을 수가 없습니다. 그래서 이 방법이 아닌 다른 방법을 찾아야합니다.'이미지
Last Modified : 2017-12-25 11:39:12웹페이지에서 테이블 또는 리스트 형태의 그리드를 UI로 구현하는 경우가 많습니다. 예를들어 어떤 어드민 사이트에서 회원 리스트를 보여주는 경우 이름, 나이 등의 정보를 리스트해 보여줄 수 있죠.# 만약 해당 row가 몇 번째 해당하는지 알려면?리스트에서 홍길동이란 이름을 가진 사람을 찾아야합니다. 해당하는 엘리먼트가 몇 번째인지 알려면 어떻게할까요? 엘리먼트가 부모로부터 몇번째 요소인지 확잊해야겠지만 table 태그를 사용하는 경우라면 rowIndex를 사용할 수 있습니다.! rowIndex 사용하여 해당 row index값 얻기table 요소의 tr 태그... 즉 row에 해당하는 엘리먼트에 적용할 수 있으며 rowIndex는 해당하는 Index값을 반환하게됩니다. 이때 위에서부터 0부터 1, 2, 3 .
Last Modified : 2018-06-26 08:49:07
인덱스 테이블에 대하여 알아보겠습니다. 인덱스 테이블(Indexes Table)이란 무엇일까요? 인덱스 테이블은 데이터베이스를 검색하기 위해 사용할 수 있는 특별한 테이블로써 데이터베이스 검색의 속도를 빠르게(?) 도와주는 역할을 합니다. 즉 데이터베이스를 사용하는데 있어 성능에 대한 문제 또는 개선을 위해 가장 먼저 확인하는 부분이 바로 인덱스 테이블입니다.인텍스 테이블은 테이블의 검색 속도를 빠르게 할 수 있는 별도의 테이블입니다. 이는 저절로 생성되지 않으며 관리자 또는 사용자에 의해 별도로 생성하거나 삭제할 수 있습니다. 이런 인덱스 테이블은 매우 간단한 방법을 통해 생성할 수 있으며 이에 대한 방법은 아래에 다뤄보도록 하겠습니다.인덱스 테이블은 간단하게 예를들어 책의 목차를 만드는 과정과 동일합니다
Last Modified : 2017-09-21 00:13:11
테이블을 만들기 위해 사용하는 테이블 태그(table)에는 다양한 속성들이 사용된다. 그 중에서도 우리는 다음과 같이 summary 속성을 속성을 사용한 태그를 볼 수 있다. 과연 이 속성은 어떤 역할을 하는 태그인지 알아보겠다.summary 속성은 현재 테이블이 갖고 있는 내용을 요약한 부분으로 어떤 내용이 담겨있는지 간략하게 알려줄 수 있다. 이 태그를 사용하는 목적 중 가장 큰 이유는 웹접근성에 해당하는 이유이다. 시각 장애인의 경우를 예로 들면 리더기를 통해 테이블을 읽는 경우가 생길 수 있다. 이 경우 테이블이 어떻게 구성되었고 무엇을 보여주는지에 대하여 간략한 요약을 나타낸다.우선 이 속성의 쓰임을 아래의 예제를 통해 상세하게 알아보자. 만약 행사에 대한 스케쥴표가 아래와 같이 있는 경우를 예로
Last Modified : 2016-04-29 12:53:30
부트스트랩(Bootstrap)의 DataTable을 사용하는 경우 테이블 정렬, sorting 방법입니다. (참고로 데이터테이블은 ajax를 사용하여 불러온 데이터를 기반으로 손쉽게 테이블 UI를 그려주는 라이브러리, 툴입니다.)# DataTable 정렬하는 방법DataTable의 정렬 설정은 어떻게 할까요? 이 경우 설정값에 추가로 order 및 ordering를 추가하여 가능합니다. 아래와 같이 말이죠.{ order: [[3, 'desc']], ordering: true, ...}여기서 사용된 order와 ordering은 다음의 의미를 가지고 있습니다.- order : <array> 정렬 기준과 오름차순, 내림차순 설정- ordering : <boolean> 정렬 사용 여부참고로 오름, 내림 차순
Last Modified : 2020-12-09 08:18:45email html을 사용해 사용자에게 메일을 발송하는 경우 테이블 태그를 많이 사용한다. 만약 테이블 태그를 사용했는데 아래와 같은 이슈가 나타난다면?? 나타나는 이슈는 다음과 같다. html 코드에 table 태그를 사용하여 코드를 작성하였고 이 테이블의 border 테두리를 둥글게 radius를 적용하였는데 정상적으로 적용되지 않는 이슈이다. 어떻게 수정해야 할까...문제는 table 태그에 함께 사용된 border-collapse: collapse; 속성 때문이다. 만약 기존 테이블 코드가 아래와 같은 경우....<table style="border-collapse: collapse; border-radius: 10px;" height="100">....</table>이 경우 테두리를 적용하려면 반드
Last Modified : 2016-03-28 15:18:06
입력폼을 만들어 방문자에게 특정한 정보를 얻을 경우 <textarea>태그가 매우 많이 사용됩니다. 하지만 textarea는 태그를 추가할 수 없는데요... 이 경우 contentEditable 속성을 태그에 추가하여 많이 사용하죠.그런데 contentEditable에 모든 태그를 허용해야만 하는 건 아니죠. 때로는 허용 가능한 태그와 아닌 태그의 구분이 필요할 수 있습니다. 오늘 알아볼 내용은 복사해서 붙여넣기의 경우 어떻게 하면 태그를 제외한 텍스트만 추가할 수 있는지의 방법입니다.# contentEditable 붙여넣기시 텍스트만 추가하기텍스트만 추가하기 위해서는 paste 이벤트를 추가하고 이벤트객체의 clipboardData 프로퍼티가 필요합니다. 그럼 간단한 예제를 만들어보겠습니다. 먼저 con
Last Modified : 2019-08-07 20:38:59React UI 라이브러리 antd의 Table 컴포넌트에 대하여 알아봅니다. antd의 Table 컴포넌트는 테이블 형태의 Layout을 구현하는데 사용됩니다.<Table />그럼 간단한 사용 방법 및 예제를 먼저 알아봅니다.# antd Table 컴포넌트 정보 및 예제antd의 Table 컴포넌트를 사용하려면 기본적으로 아래의 props를 반드시 필요로 합니다.dataSource // 테이블에 출력할 리스트 정보columns // 테이블의 컬럼 정보를 표시합니다.rowKey // [String | Function] unique Key 값을 설정합니다.예를들어 아래는 간단한 예제 코드입니다. 먼저 dataSource에 필요한 정보로 siteList 배열값을 생성합니다.const siteList = [ {
Last Modified : 2020-09-10 10:52:52HTML 테이블 태그를 사용하는 경우 만약 colspan 또는 rowspan의 최대값을 설정하는 방법에 대하여 알아봅니다.# HTML table 태그의 colspan 최대값 설정하기rowspan 역시 colspan 설정 방법과 동일하므로 colspan의 방법에 대하여 알아봅니다.! 먼저 rowspan, colspan은 무엇이고 언제 최대값이 필요할까요?테이블 태그는 여러개의 셀(cell) 단위로 구성되어 있습니다. 이때 각각의 셀을 병합하는 방법으로 rowspan, colspan이 사용됩니다. 두 개 모두 합치는 목적으로 사용되나 row, span 즉 행 또는 열을 합칠때 사용하는 속성이 다릅니다.colspan 최대값 설정은 언제 필요한가?colspan의 값을 최대값으로 설정하는 경우가 언제 있을까요? 테이
Last Modified : 2020-05-15 16:03:36
antd 라이브러리의 Table 컴포넌트를 사용하면 리스트 형태의 데이터를 테이블로 출력할 수 있습니다. 만약 테이블에 체크박스를 사용하려면 어떻게 하는지 방법을 알아봅니다.추가로 체크박스를 사용하여 전체 선택 및 전체 해제 방법도 함께 알아봅니다.# antd Table 컴포넌트 체크박스 사용하기테이블에 체크박스를 사용하여 선택하는 방법은 많이 사용됩니다. 원하는 row만 선택하거나 해제할 수도 있고 전체선택하거나 전체 해제하는 것 역시 가능하죠.! 만약 Table에 체크박스를 사용하려면?Table 컴포넌트는 기본 설정이 체크박스를 사용하지 않도록 되어 있으므로 만약 체크박스를 사용하려면 옵션 설정이 필요합니다. 이때 필요한 옵션값은 바로 rowSelection, rowKey니다.import { Table
Last Modified : 2020-12-19 14:41:48레이아웃 중 구현하기 어려운 부분 중 하나로 세로 정렬이 있습니다.특정 태그를 정렬할 경우 가로 정렬은 쉽지만 세로 정렬은 쉽지 않죠? 이럴때 가급적 쉽게 적용이 가능한 방법입니다. 정해진 높이가 아닌 경우 height 값이 변하기 때문에 margin: auto 값으로 세로 정렬되지 않아 다른 방법을 찾아야하죠. 이를 해결하기 위한 방법은 자바스크립트를 이용할 수도 있지만 가장 간단한 방법은 역시 css를 사용하는 것입니다 .여기서는 display 속성의 table-cell 속성을 이용하는 방법입니다... # 세로정렬 예제 소스보기<style type="text/css">div {background: #f9f9f9;width: 200px;height: 200px;border: 1px solid #d1d1d1
Last Modified : 2019-08-12 19:31:50
자바스크립트에서 사용 할 수 있는 자바스크립트 obect, 객체 메소드 두 가지를 알아봅니다. 간단한 문법은 아래와 같습니다.Object.freeze()Object.isFrozen()그럼 이 둘의 사용 방법과 목적에 대하여 알아봅니다.# 자바스크립트 Object freeze(), isFrozen()자바스크립트의 객체에는 두 가지 함수 freeze()와 isFronzen()이 있습니다. 이에 대하여 각각 알아보려고 합니다. 먼저 freeze()에 대하여 알아봅니다.! Object의 freeze() 알아보기객체 타입인 값에 freeze()를 사용하면 값을 변경 할 수 없는(immutable) 값으로 바꿀 수 있습니다. 즉 상수(constant)처럼 변경할 수 없는 값이 됩니다. 값을 바꿀 수도 삭제할 수도 없
Last Modified : 2021-07-06 13:18:28
자바스크립트의 태그에 contentEditable 어트리뷰트를 적용할 경우 해당 태그 내부에 텍스트 입력 또는 엘리먼트 추가 등등 다양한 조작이 가능합니다. 이때 만약 엘리먼트 안에서 엔터키를 입력할 경우 입력된 내용이 div 태그와 함께 추가되죠.# 엔터 키 입력시 div를 p로 변경하기즉 contentEditable이 사용된 엘리먼트 내부에서 엔터를 입력하면 자동으로 div 태그가 입력된 영역에 랩핑되어 적용됩니다. 실제 코드를 보면 아래와 같이 적용되죠.<div> <br></div>...만약 기본값으로 사용되는 태그를 div가 아닌 p가 사용될 수 있을까요? 네~ 가능합니다. 가장 간단한 방법은 아래처럼 document.execCommand()를 사용하는 방법입니다.document.execComman
Last Modified : 2020-11-19 16:13:49요즘 사용되는 랩탑, 노트북은 대부분의 제조사에서 2in1 모델을 출시하고 있습니다.! 2in1 랩탑, 노트북 컴퓨터여기서 2in1은 말 그대로 두 가지 기능을 모두 수행하는 랩탑, 노트북을 얘기합니다. 즉 일반 컴퓨터로 사용할 수도 있고 동시에 태블릿처럼 사용하는 것 역시 가능합니다. 그래서 2in1은 아래와 같은 기능을 가지고 있습니다.- 디스플레이의 터치 기능- 화면이 완전히 접혀 키패드 없이 태블릿으로만 사용 가능이런 2in1을 사용하게 될 때 있으면 유용한 액세서리나 앱은 무엇이 있을까요?바로 드로잉 기능을 더 쉽고 편하게 사용할 수 있는 유용한 액세서리 몇 가지를 알아보겠습니다.@ 드로잉 펜슬펜슬의 경우 자체 포함된 경우도 있지만 별도 구매해야 하는 경우도 있습니다. 필기나 메모, 드로잉 등을 위
Last Modified : 2020-08-06 09:01:24