자바스크립트 콘솔에서 색상 적용하기

콘솔 로그에 색상 적용하는 방법

자바스크립트에서 콘솔에 텍스트를 출력할 때, 단순한 텍스트보다는 색상을 추가하면 디버깅이나 테스트 과정에서 더 쉽게 정보를 파악할 수 있습니다. 여기에서는 %c 형식 지정자와 CSS를 사용해 콘솔 로그에 색상을 적용하는 방법을 알아봅니다.

console.log('%c이 텍스트는 빨간색이다!', 'color: red;');

위의 예시 코드를 실행하면 콘솔에서 “이 텍스트는 빨간색이다!” 라는 메시지가 빨간색으로 출력됩니다. %c는 색상과 같은 스타일을 적용하겠다는 신호입니다. 그 뒤에 오는 문자열 'color: red;'에서 실제 스타일을 지정합니다.

여러 가지 스타일 적용하기

단순한 색상 외에도 다양한 스타일을 적용할 수 있습니다. 예를 들어, 글자 크기, 배경색, 테두리 등을 조정할 수 있습니다.

console.log('%c이 텍스트는 크고 녹색이며, 밑줄이 있다!', 'font-size:20px; color: green; text-decoration: underline;');

조건에 따른 색상 변경

조건에 따라 색상을 다르게 표시하려면 조건문을 사용할 수 있습니다. 이를 통해 에러 메시지와 일반 메시지를 쉽게 구분할 수 있습니다.

if (error) {
  console.log('%c에러 발생!', 'color: red;');
} else {
  console.log('%c정상 작동 중', 'color: blue;');
}

그룹화와 함께 색상 사용

console.group()와 console.groupEnd()를 사용하면 로그를 그룹으로 묶어 표시할 수 있습니다. 이 때도 색상을 적용할 수 있습니다.

console.group('%c정보 그룹', 'color: blue;');
console.log('%c메시지1', 'color: green;');
console.log('%c메시지2', 'color: orange;');
console.groupEnd();

이러한 방법을 사용하면 개발자 도구의 콘솔 창에서 더 깔끔하고 정보를 쉽게 파악할 수 있는 로그를 확인할 수 있습니다.