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

얼마전 티스토리 스킨 수정을 위해 이것저것 테스트하면서 자바스크립트 콘솔을 띄워놨었는데, 재미있는 걸 발견했다.

페이지를 새로 로드할 때마다 아래 캡처처럼 콘솔 메시지가 뜨는거다. 콘솔 메시지에 서식을 적용할 수 있는줄은 처음 알았다.

신기해서 방법을 찾아보니 메시지에 스타일을 적용할 수 있는 방법이 있었다. 아래 코드를 참고하면 된다.

스트링 앞에 %c 를 추가한 뒤 뒤에 콤마로 구분하고 스타일을 적어주면 된다.

코드

// 스타일 한번만 적용하는 경우
console.log("%c블로그에 오신 것을 환영합니다!","color:#FF5555;font-weight:700;font-size:20pt;");

// 여러 스타일을 적용하는 경우
console.log("%c첫번째문자열"+"%c두번째문자열"+"%c세번째문자열!","color:blue;","color:red;font-size:20pt;font-weight:700;","color:gray;font-size:15pt;")

결과

스타일 하나만 적용하는 경우

스타일을 하나 이상 적용하는 경우