• 회원가입
  • 로그인
  • 구글아이디로 로그인

[Window_Console] JS - console.table() 메서드 - 콘솔에 테이블 쓰기 (= console.table메서드 = 콘솔테이블 메서드)

목차

  1. console.table() 예제 - 콘솔에 테이블 쓰기
  2. console.table() 정의
  3. console.table() 구문
  4. console.table() 예제 - 객체로 테이블 쓰기
  5. console.table() 예제 - 객체 배열로 테이블 쓰기
  6. console.table() 예제 - 특정 컬럼만 보이게하기

 

console.table() 예제 - 콘솔에 테이블 쓰기

※ 테이블 데이터에 배열 넣기

 

<script>

console.table(["홈짱닷컴", "Homzzang.com", "코딩강의"]);

</script>

 

결과값:

PS. 결과확인: F12키  >  Console탭

 

console.table() 정의

 

콘솔에 테이블 메시지 쓰기.

 


 

1.

첫 번째 매개변수 (= 테이블에 넣을 데이터가 담긴 객체/배열)은 필수.

 

2. cf.

console.clear() 메서드 - 콘솔창 청소

console.error() 메서드 - 콘솔에 에러 메시지 쓰기

console.info() 메서드 - 콘솔에 메시지 쓰기

console.log() 메서드 - 콘솔에 메시지 쓰기

console.table() 메서드 - 콘솔에 테이블 쓰기

console.table() 메서드 - 콘솔에 테이블 메시지 쓰기

 

2.

IE8 이상 주요 최신 브라우저 지원

 

 

console.table() 구문

 

console.table(tabledata, tablecolumns)

 


[매개변수]

 

tabledata

필수. 테이블 데이터. (Object 또는 Array 형태)

 

tablecolumns

선택. 테이블 컬럼명 포함하는 배열. (Array 형태)

 

 

console.table() 예제 - 객체로 테이블 쓰기

 

<script>

console.table({ site : "홈짱닷컴", host : "Homzzang.com" });

</script>

 

결과값:

PS. 결과 확인 방법: F12키 > Console탭

 

console.table() 예제 - 객체 배열로 테이블 쓰기

 

<script>

var html = { name : "HTML", role : "뼈대" }

var css = { name : "CSS", role : "디자인" }

var js = { name : "JS", role : "기능동작" }

console.table([html, css, js]);

</script>

 

결과값:

 

console.table() 예제 - 특정 컬럼만 보이게하기

 

<script>

var html = { name : "HTML", role : "뼈대" }

var css = { name : "CSS", role : "디자인" }

var js = { name : "JS", role : "기능동작" }

console.table([html, css, js], ["role"]);

</script>

 

결과값:

 


분류 제목
DOM_Element JS - accessKey 속성 - 요소접근키 (= accessKey속성 = 액세스키속성) ※ 요소접근단축키
DOM_Element JS - addEventListener() 메서드 ★ - 요소에 이벤트 걸기. (addEventListene…
DOM_Element JS - appendChild() 메서드 - 요소에 마지막 자식요소생성 (= 마지막 자식요소추가 = appe…
DOM_Element JS - attributes 속성 - 요소의 속성들 (= 요소속성모음 = attributes속성 = 어트리뷰…
DOM_Element JS - blur() 메서드 - 포커스 제거. (= blur메서드 = 블러 메서드) ※ 링크 클릭 잔상 제…
DOM_Element JS - childElementCount 속성 - 자식요소개수 (IE9 이상)
DOM_Element JS - childNodes 속성 - 자식노드리스트
DOM_Element JS - children 속성 ★ - 자식요소노드 (IE9 이상)
DOM_Element JS - classList 속성 ★★ - 요소의 클래스리스트. (= classList속성 = 클리스리스트속성…
DOM_Element JS - className 속성 ★★★ = 요소의 클래스명 반환/설정. (= className속성 = 클래스…
DOM_Element JS - click() 메서드 ★★★★★ - 마우스클릭간주 (= 클릭이벤트 = click메서드 = 클릭메서드…
DOM_Element JS - clientHeight 속성 - 요소높이 (= 요소가시높이) (padding 포함 / border,…
DOM_Element JS - clientLeft 속성 - 요소왼쪽테두리너비 (= 요소좌측테두리너비)
DOM_Element JS - clientTop 속성 - 요소위쪽테두리너비 (= 요소상단테두리너비)
DOM_Element JS - clientWidth 속성 ★ - 요소너비 (= 요소가시너비 = clientWidth속성 = 클라이…
DOM_Element JS - cloneNode() 메서드 - 노드복사
DOM_Element JS - compareDocumentPosition() 메서드 - 노드간 위치비교 (IE9 이상)
DOM_Element JS - contains() 메서드 ★ - 자손노드인지 판별 (= contains메서드 = 컨테인즈 메서드)
DOM_Element JS - contentEditable 속성 - 편집가능상태 설정/반환
DOM_Element JS - dir 속성 - 쓰기방향 (= 입력방향) 설정/반환
27/67
목록
찾아주셔서 감사합니다. Since 2012