크롬 브라우저 콘솔에 사진 출력하기

 

방금 클로저에 대한 글을 쓰면서 개발자 도구를 열어 콘솔을 좀 쓰고 있었다. VS Code에서 Node 띄우고 js 실행이 잘 안 되길래 콘솔을 쓰고 있었는데 글을 다 쓰고 나니까 콘솔에 이런 로그가 떴다.

근데 내가 이걸 처음에 이미지인 줄 알고 헐 이미지? 콘솔에? 어떻게 띄운거지 이러고 막 찾아봤다.

그래서 얻은 결과... 다음과 같이 콘솔에 입력하면 이미지를 출력할 수 있다.

 

console.log('%c ', 'font-size:400px; background:url(https://www.kanelov.com/wp-content/uploads/2019/06/1Print-1-24.jpg) no-repeat;');

font-size를 적절히 조절하고, url() 안에 원하는 이미지의 url을 입력하면 콘솔에 이미지를 출력할 수 있다. 바로 이렇게 말이다.

 

 

근데 사실 저건 이미지가 아니라 텍스트였다... ㅋㅋㅋㅋㅋㅋ

텍스트에 어떻게 스타일을 입힌 걸까 해서 찾아보니 위와 비슷하게 스타일을 처리해주면 된다. 

console.log('%cTISTORY', 'font-size:96px; color: orange; font-family: Arial; font-weight: bolder;');

'%c 바로 다음에 출력을 원하는 텍스트를 써주고, 두 번째 인자로 그 텍스트에 해당하는 스타일을 나열해 주면 된다.

 

 

색깔 빼고 제법 비슷하다. 😁

 

 

 

References

• google chrome console, print image
• How to Style console.log Contents in Chrome DevTools