console.log에 스타일 입히기

콘솔에 스타일을 입혀보자

콘솔창에 스타일을 입힐 수 있다.
굳이 입혀야하나… 라고 생각할 수도 있고, 나도 그랬지만 몇몇 사이트 들을 보면서 나도 만들어야 겠다고 생각을 했다.
각 사이트에 접속해서 f12를 눌러보자.
놀랍게도 뭔가 멋있다…

쿠팡

티스토리

티몬

대부분의 홈페이지에는 없지만 위의 기업들을 보면 만들어보고 싶지 않은가 ?

콘솔에 스타일 입히기

기본적으로는 스타일을 입힐 부분을 지정하고, 스타일을 전달해주면 된다.

const style = {
  blackAndWhite: "color: white; background-color: black;",
};

console.log("%cI am Happy", style.blackAndWhite);

%c 부분부터 스타일이 들어간다. 만약 다른 지정한 부분이 없다면 해당 부분부터 쭉 들어가게 된다.

여러줄을 지정하는 것도 방법은 같다.

const style = {
  blackAndWhite: "color: white; background-color: black;",
  blueAndRed: "color: red; background-color: blue;",
};

console.log(
  "%cI am Happy %cAnd You also happy",
  style.blackAndWhite,
  style.blueAndRed
);

여러개의 스타일을 넣을 때는 %c에 각각 값을 넣어주면 된다.
즉 첫번째 %c는 console.log의 2번째 매개변수의 스타일이 적용되고, 두번째 %c는 세번째 매개변수의 스타일이 적용된다.
한땀한땀 열심히 맞추다보면 나름 재미있게 만들수가 있다.

그래서 완성한 작품이다.
회사 로고 까지 만들어 넣고 나니 너무 마음에 든다.