콘솔에 스타일 지정하기

발생일: 2013.09.13

문제:
얼마 전에 데일이 크롬 개발자 도구의 콘솔에 움직이는 GIF 같은 걸 넣은 사이트를 보여줬다.

오. 콘솔에서 애니메이션이 돌아가는데, 정말 완전 덕스럽다. ㅎㅎ

그나저나, 크롬 개발자 도구 콘솔에 스타일을 지정할 수 있었던건가?

해결책:

아래처럼 `%c` 값으로 콘솔에 CSS 스타일을 적용할 수 있다.

console.log('%cHello, color log!', 'color:red');

이참에 나도 재밌는 걸 만들어봤다.

콘솔에 이미지를 출력하는 모듈이다~

http://ohgyun.github.io/console-text-image/example/example.html

나중에 이스터 에그로 쓰면 좋을 듯^^

# 참고

카나리 버전에서 스타일 적용이 가능하다는 애디 오사미의 포스트

(현재는 일반 버전에서도 가능하다)

https://plus.google.com/+AddyOsmani/posts/TanDFKEN9Kn

크롬 콘솔 API

https://developers.google.com/chrome-developer-tools/docs/console-api