콘솔창 꾸미는법

안녕하세요 혹시 관리자 창에서 이런 콘솔 보신적 있나요

콘솔을 예쁘게 꾸미는 법을 알려드릴게요
자바스크립트를 해보신 분이라면 console.log() 이 함수 보신 적 있으시나요
이 함수의 역할은 콘솔 창에 (매개변수)의 내용을 출력하는 역할로
여기에 CSS를 적용시켜서 출력시킬 겁니다

지정자	설명
%s	값의 서식을 문자열로 지정합니다.
%i or %d	값의 서식을 정수로 지정합니다.
%f	값의 서식을 부동 소수점 값으로 지정합니다.
%o	값의 서식을 확장 가능한 DOM 요소로 지정합니다. Elements 패널 참조
%O	값의 서식을 확장 가능한 자바스크립트 객체로 지정합니다.
%c	두 번째 매개변수에서 지정한 대로 CSS 스타일 규칙을 출력 문자열에 적용합니다

 

두 번째 매개변수에서 지정한 대로 CSS 스타일 규칙을 출력 문자열에 적용합니다.

어렵나요 괜찮습니다 저희가 필요한 지정자는 % c 하나입니다

따른 자료는 참고하시라고 올려두었습니다.

 

console.log(매개변수 1, 매개변수 2)

매개변수 1 = 여러분이 띄우실 값

매개변수 2 = CSS 스타일

 

예시를 한번 보여드릴게요

예:) console.log('%c 컴공과의 IT 블로그', `color: red; font-size: 40px;`)

이렇게 하면 컴공과의 IT 블로그가 빨간색으로 40px 크기만큼 콘솔 창에 뜹니다