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
인덱스 테이블에 대하여 알아보겠습니다. 인덱스 테이블(Indexes Table)이란 무엇일까요? 인덱스 테이블은 데이터베이스를 검색하기 위해 사용할 수 있는 특별한 테이블로써 데이터베이스 검색의 속도를 빠르게(?) 도와주는 역할을 합니다. 즉 데이터베이스를 사용하는데 있어 성능에 대한 문제 또는 개선을 위해 가장 먼저 확인하는 부분이 바로 인덱스 테이블입니다.인텍스 테이블은 테이블의 검색 속도를 빠르게 할 수 있는 별도의 테이블입니다. 이는 저절로 생성되지 않으며 관리자 또는 사용자에 의해 별도로 생성하거나 삭제할 수 있습니다. 이런 인덱스 테이블은 매우 간단한 방법을 통해 생성할 수 있으며 이에 대한 방법은 아래에 다뤄보도록 하겠습니다.인덱스 테이블은 간단하게 예를들어 책의 목차를 만드는 과정과 동일합니다
Last Modified : 2017-09-21 00:13:11웹페이지에서 테이블 또는 리스트 형태의 그리드를 UI로 구현하는 경우가 많습니다. 예를들어 어떤 어드민 사이트에서 회원 리스트를 보여주는 경우 이름, 나이 등의 정보를 리스트해 보여줄 수 있죠.# 만약 해당 row가 몇 번째 해당하는지 알려면?리스트에서 홍길동이란 이름을 가진 사람을 찾아야합니다. 해당하는 엘리먼트가 몇 번째인지 알려면 어떻게할까요? 엘리먼트가 부모로부터 몇번째 요소인지 확잊해야겠지만 table 태그를 사용하는 경우라면 rowIndex를 사용할 수 있습니다.! rowIndex 사용하여 해당 row index값 얻기table 요소의 tr 태그... 즉 row에 해당하는 엘리먼트에 적용할 수 있으며 rowIndex는 해당하는 Index값을 반환하게됩니다. 이때 위에서부터 0부터 1, 2, 3 .
Last Modified : 2018-06-26 08:49:07
테이블을 만들기 위해 사용하는 테이블 태그(table)에는 다양한 속성들이 사용된다. 그 중에서도 우리는 다음과 같이 summary 속성을 속성을 사용한 태그를 볼 수 있다. 과연 이 속성은 어떤 역할을 하는 태그인지 알아보겠다.summary 속성은 현재 테이블이 갖고 있는 내용을 요약한 부분으로 어떤 내용이 담겨있는지 간략하게 알려줄 수 있다. 이 태그를 사용하는 목적 중 가장 큰 이유는 웹접근성에 해당하는 이유이다. 시각 장애인의 경우를 예로 들면 리더기를 통해 테이블을 읽는 경우가 생길 수 있다. 이 경우 테이블이 어떻게 구성되었고 무엇을 보여주는지에 대하여 간략한 요약을 나타낸다.우선 이 속성의 쓰임을 아래의 예제를 통해 상세하게 알아보자. 만약 행사에 대한 스케쥴표가 아래와 같이 있는 경우를 예로
Last Modified : 2016-04-29 12:53:30email 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부트스트랩(Bootstrap)의 DataTable을 사용하는 경우 테이블 정렬, sorting 방법입니다. (참고로 데이터테이블은 ajax를 사용하여 불러온 데이터를 기반으로 손쉽게 테이블 UI를 그려주는 라이브러리, 툴입니다.)# DataTable 정렬하는 방법DataTable의 정렬은 설정에 옵션값 order를 추가하여 가능합니다. 이 때 값은 배열 안에 배열로 넣어주시면 됩니다. 즉 복수개의 설정이 가능하죠.$('#myTable').DataTable({ order: [[3, 'desc']], // asc 또는 desc ordering: true, serverSide: false});위 예제는 3번째 index 위치를 desc 오름차순으로 정렬한 설정 값입니다.! 알아둘 내용아래에 ordering:
Last Modified : 2019-08-05 23:03:32
입력폼을 만들어 방문자에게 특정한 정보를 얻을 경우 <textarea>태그가 매우 많이 사용됩니다. 하지만 textarea는 태그를 추가할 수 없는데요... 이 경우 contentEditable 속성을 태그에 추가하여 많이 사용하죠.그런데 contentEditable에 모든 태그를 허용해야만 하는 건 아니죠. 때로는 허용 가능한 태그와 아닌 태그의 구분이 필요할 수 있습니다. 오늘 알아볼 내용은 복사해서 붙여넣기의 경우 어떻게 하면 태그를 제외한 텍스트만 추가할 수 있는지의 방법입니다.# contentEditable 붙여넣기시 텍스트만 추가하기텍스트만 추가하기 위해서는 paste 이벤트를 추가하고 이벤트객체의 clipboardData 프로퍼티가 필요합니다. 그럼 간단한 예제를 만들어보겠습니다. 먼저 con
Last Modified : 2019-08-07 20:38:59레이아웃 중 구현하기 어려운 부분 중 하나로 세로 정렬이 있습니다.특정 태그를 정렬할 경우 가로 정렬은 쉽지만 세로 정렬은 쉽지 않죠? 이럴때 가급적 쉽게 적용이 가능한 방법입니다. 정해진 높이가 아닌 경우 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:50HTML 테이블 태그를 사용하는 경우 만약 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자바스크립트에서 사용 할 수 있는 자바스크립트 obect, 객체 메소드 두 가지를 알아봅니다. 간단한 문법은 아래와 같습니다.Object.freeze()Object.isFrozen()그럼 이 둘의 사용 방법과 목적에 대하여 알아봅니다.# 자바스크립트 Object freeze(), isFrozen()먼저 Object.freeze()에 대하여 알아봅니다.! Object의 freeze() 알아보기객체 타입인 값에 freeze()를 사용하면 값을 변경 할 수 없는(immutable) 값으로 바꿀 수 있습니다. 즉 상수처럼 변경할 수 없는 값이 됩니다.참고로 const로 선언된 객체의 값은 내부 프로퍼티 및 메소드의 값을 변경할 수 있습니다. 예를들어 const로 선언된 객체는 변경되나 freeze()를 사용한 경
Last Modified : 2020-06-08 20:59:07요즘 사용되는 랩탑, 노트북은 대부분의 제조사에서 2in1 모델을 출시하고 있습니다.! 2in1 랩탑, 노트북 컴퓨터여기서 2in1은 말 그대로 두 가지 기능을 모두 수행하는 랩탑, 노트북을 얘기합니다. 즉 일반 컴퓨터로 사용할 수도 있고 동시에 태블릿처럼 사용하는 것 역시 가능합니다. 그래서 2in1은 아래와 같은 기능을 가지고 있습니다.- 디스플레이의 터치 기능- 화면이 완전히 접혀 키패드 없이 태블릿으로만 사용 가능이런 2in1을 사용하게 될 때 있으면 유용한 액세서리나 앱은 무엇이 있을까요?바로 드로잉 기능을 더 쉽고 편하게 사용할 수 있는 유용한 액세서리 몇 가지를 알아보겠습니다.@ 드로잉 펜슬펜슬의 경우 자체 포함된 경우도 있지만 별도 구매해야 하는 경우도 있습니다. 필기나 메모, 드로잉 등을 위
Last Modified : 2020-08-06 09:01:24React 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:52