[JavaScript]콘솔 로그 스타일 적용하는 방법

콘솔 로그 스타일 적용하는 방법

콘솔(console)은 애플리케이션 개발 프로세스에서 매우 유용합니다. 주로 변수에 할당된 값을 확인하거나 연산 결과를 확인하기 위한 용도로 사용합니다.

 

JavaScript에서는 console.log() 메서드를 사용하여 콘솔에 특정 데이터를 출력할 수 있으며, 출력 결과에 스타일을 적용할 수 있습니다.

 

예를 들어, 티스토리 접속 후 크롬 개발자 도구의 콘솔 탭을 들어가면, 스타일이 적용된 문자열을 볼 수 있습니다.

console.log() 메서드 출력 결과에 스타일을 적용한다고 개발 프로세스에 큰 영향은 없지만, 특정 웹 사이트에 대해 특별함을 각인시킬 수 있습니다. 물론, 개발자 한정이겠지만요...

 

이번 포스팅은 console.log() 메서드 출력 결과에 스타일을 적용할 수 있는 방법을 소개합니다.

---

형식 지정자

형식 지정자는 % 기호를 사용하여 출력하려는 데이터가 어떤 형태인지 컴퓨터에게 알려주는 문자입니다.

 

console.log() 메서드 출력 결과에 스타일을 적용하려면, CSS 형식 지정자를 적용해야 합니다.

 

다음 표는 CSS 형식 지정자입니다.

형식 지정자	출력 결과
%s	문자열
%i 또는 %d	정수
%f	부동 소수점
%o	DOM 요소로 형식화
%O	객체
%c	console.log() 메서드 두 번째 매개변수로 전달된 CSS Style을 적용

이번 포스팅은 console.log() 메서드 출력 결과에 스타일을 적용하는 방법에 대해 설명하므로 %c 형식 지정자를 사용합니다.

 

다음 예제는 console.log() 메서드의 첫 번째 매개변수로 %c 형식 지정자를 설정하고 두 번째 매개변수로 CSS Style을 전달하여 콘솔에 출력되는 문자열을 파란색으로 설정합니다.

console.log('%cHello', 'color:blue');

[실행 결과]

 

다음 예제는 콘솔에 출력되는 문자열에 다양한 색상을 적용합니다.

console.log('%cBlue', 'color:blue');
console.log('%cRed', 'color:red');
console.log('%cGreen', 'color:green');
console.log('%cYellow', 'color:yellow');

[실행 결과]

---

폰트 및 크기 변경

콘솔에 출력되는 텍스트 폰트 및 크기를 변경하고 싶은 경우 font-family, font-size를 설정합니다.

console.log('%c폰트 사이즈 30', 'font-size:30px');
console.log('%c폰트 sans-serif', 'font-family:sans-serif');
console.log('%c폰트 monospace, 사이즈 30', 'font-family:monospace; font-size:30px');

[실행 결과]

---

공식 문서

이번 포스팅은 console.log() 메서드 출력 결과에 스타일을 설정하는 방법을 소개했습니다. 더 자세한 정보는 아래 공식 문서에서 확인할 수 있습니다.

Format and style messages in the Console - Chrome Developers