개발자들이나 웹퍼블리셔들은 크롬 콘솔창을 통해 확인 및 디버깅을 할때 자주 사용하는데요.
깨알 홍보를 위해 콘솔창에 사이트 로고를 표시하는경우도 많습니다.
이해를 돕기 위해 아래 스샷 이미지를 확인해보세요.
크롬에서 F12키를 누르면 개발자도구가 보이며, Console 탭을 보시면 위처럼 보여집니다. (맥은 option + command + i)
적용 방법은 사이트 <head>와 </head>사이에 script 소스를 넣으시면 됩니다.
<script>
var cssRule= "font-size:2em;"
var cssLogo1 ="color:#da6c37;" +"font-size: 60px;" +"font-weight: bold;" +"letter-space:-1px;" +"font-family:Tahoma,Arial,sans-serif";
if(window.console!=undefined){setTimeout(console.log.bind(console,"%cTISTORY", cssLogo1),0);setTimeout(console.log.bind(console,"%c 나를 표현하는 블로그",cssRule),0);}
</script>
문구와 스타일(색상, 폰트크기, 글자체)은 원하시는걸로 바꿔주시면 됩니다.
그리고 아래처럼 두가지 색상으로도 응용가능합니다. ex) http://www.webmini.net
<script>
var cssRule= "font-size:2em;"
var cssLogo1 ="color:#39549a;" +"font-size: 60px;" +"font-weight: bold;" +"letter-space:-1px;" +"font-family:Tahoma,Arial,sans-serif";
var cssLogo2 ="color:#231916;" +"font-size: 60px;" +"font-weight: bold;" +"letter-space:-1px;" +"font-family:Tahoma,Arial,sans-serif";
if(window.console!=undefined){setTimeout(console.log.bind(console,"%cweb%cmini", cssLogo1,cssLogo2),0);setTimeout(console.log.bind(console,"%c 1인 기업인들의 모임",cssRule),0);}
</script>
콘솔창에서 사이트 로고가 보이니까 색다르긴 합니다.
참고로 콘솔창 메소드에 대해 살펴보면 아래와 같습니다.
console.debug('디버그 메세지');
console.info('정보 메세지');
console.warn('경고 메세지');
console.error('에러 입니다.');
상황에 따라 응용해보세요~
728x90
