웹브라우저 콘솔에 이미지 표시하기, CSS로 요소 꾸미기

이번에는 간단한 팁이다. 도움이 될 수도 있고 도움이 안될 수도 있다.

 

페이스북 같은 경우 콘솔을 보면 다음과 같이 뜬다.

페이스북 외에도 다양한 서비스에서 이렇게 콘솔에 스타일된 정보를 표시한 경우가 많은데, 브라우저에서 콘솔 텍스트를 CSS로 꾸밀 수 있는 방법을 제공하기 때문이다. 이미지 표시도 이를 이용한 일종의 트릭에 가깝다.

 

미리 스타일을 작성하고 포매팅으로 집어넣어주면 쉽게 텍스트를 꾸밀 수 있다.

이미지는 이렇게 넣을 수 있다.

일종의 편법이긴 하지만 문제는 없다.

코드는

https://gist.github.com/dlcjsdltlq/f079687dc6799ba7dae1924f23c93281

console-styled-log.js

여기에 올려놨으니 참고하시라.

 

참고:

https://stackoverflow.com/questions/26283936/stylized-console-logging

Stylized console logging