자기 소개

저는 순수라고 합니다. 관서를 거점으로 활동하는 전단 엔지니어입니다.
저는 HAL 오사카의 새 2기입니다.👍 (2016.7.18 기준)
스타트업과 행사 자주 가는데 오사카 쪽 사람들 만나요!
Twitter @konojunya
그럼, 당장.

console.너 그거 알아?

네.농담하지 마.
그곳의 전단 엔지니어가 자주 사용한다고 말하는 것 같다.
응, 서버도 사용할 백엔드 엔지니어래.
하지만 이번에는 전자, 전단을 향한 보도였다.console.log 말하지 않는 마법 주문.
이 마법 주문을 사용할 때 변수의 값을 확인하고 동작을 검사하며 디버깅을 할 때 사용한다.
대략적인 사용 방법.

console.log("Hello world");

그래, 알았어.안 해본 사람 지금 당장 이 브라우저 개발자 도구 복사 스티커와 오락!
그리고 사건이 일어났어요.

어느 날

나는 어느 날 굶으면서 쿡패드 뽕을 보고 있었다.
"아~ 맛있겠다~"
맛있어 보이는 식단을 볼 때 나는 습관적으로 개발자 도구를 열었다.(거짓말)
그리고 이건

정말?
콘솔에 css와 유사한 물건을 설치할 수 있습니까!?
네.착용 가능합니다.

console.log에 스타일 적용

응용 양식은 매우 간단하다.
예를 들어 Hello World를 빨간색으로 출력하고 싶습니다.
하면, 만약, 만약...

console.log("Hello world");

하지만 빨간 글자를 쓰려면

console.log("%cHello world","color:red;");

문자열에%c를 넣고 두 번째 인자에 css를 지정하면 됩니다!
간단하다!
그 외에 font-size 등 확대background-color도 사용할 수 있다.
이제 콘솔도 꾸미는 시대!능숙하게 사용하세요!