console.log 에 style 적용하기

# console.log 에 style 적용하기

개발자 도구를 열어 작업을 할 때, 우리는 종종 style이 입혀진 console.log를 발견할 수 있다.

예를 들자면 쿠팡이나 티스토리가 있을 수 있겠다. (괜히 이쁘고 부러움)

퍼블리셔로서 스타일이 입혀진 콘솔로그를 지나칠 수가 없지.

오늘은  console.log 에 style 입히는 방법을 알아보려 한다.

아주 간단하다.

메시지에 %c 플래그(flag)만 추가해주고, 원하는 스타일을 입력하면 끝. 

간단하게 예를들어,

console.log('%c Welcome!', 'background-color:green; color:#ffffff;');

결과물은 이렇다.

이렇게 하면?

console.log('%c You are so %c attractive ', 'background-color:#000000; color:#ffffff; font-size:23px;', 

'background-color:red; color:#ffffff; font-size:23px;');

요렇게 나오고!

조금 더 꾸며볼까?

var style = [

    'padding : 30px 20px',

    'margin : 20px 0',

    'background : linear-gradient(#98004C, #FFE8F3)',

    'font-size : 25px',

    'font-weight : bold',

    'text-align : center',

    'color : #ffffff'

].join(';');

console.log('%c #ARA NOTE', style);

결과는?

일단 사용해 본 결과, display 와 line-height 는 적용이 안되는것 같다. 

추후에 내 전용 로그를 만들 때, 하나하나 살펴봐야겠다.