'tree-shaking'에 대한 정보를 찾아보던 중 한 외국인 개발자의 개인 블로그를 보다가 console 탭 에서 독특한 형태로 출력된 출력값을 볼 수 있었다. 출력값은 아래와 같았다.
🤨 OE!OE! 🤨
What are you doing?
위와 같은 형태로 디자인된 출력값이었다. 출력 메세지에 OE! OE! 라고 있고 빨간 글씨로 굵고 크게 강조된 글씨여서 순간 잘못하다 들킨 사람처럼 흠칫하며 움찔했다.
그러다가 궁금했다. 위와 같은 메세지는 어떤 방식을 사용해 어떻게 스타일링되어 출력되는지 말이다. 그래서 이번 글은 그 궁금증을 해결하고 어떻게 하면 console.log() 출력 메세지에 스타일을 적용할 수 있는지에 대해 알아보고 소개해보려 한다.
스타일 적용하는 방법
우선 참고했던 외국인 개발자의 블로그에 작성된 코드는 다음과 같았다.
console.log(
`\n %c 🤨 OE!OE! 🤨 \n What are you doing? \n`,
"background: #222; color: #ef4444; font-weight: bold; font-size: 48px"
)
독특했다. \n (개행문자) 를 활용해 줄바꿈을 해준 것과 스타일링을 위한 css 속성을 작성한 데까지는 이해하기 쉬웠다. 다만 모르는 표현이 하나 있었다. %c였다. %c란 무엇을 의미할까? 찾아봤다.
형식 지정자
형식 지정자란 % 기호를 사용하여 출력하려는 데이터가 어떤 형태인지 컴퓨터에게 알려주는 문자이다. console.log() 출력 결과에 스타일을 적용하려면, CSS 형식 지정자(%c)를 적용해야 한다.
다음 표는 형식 지정자 목록이다.
| 형식 지정자 | 출력 결과 |
| %s | 문자열 ( stirng ) |
| %i 또는 %d | 정수 ( integer ) |
| %f | 부동 소수점( float ) |
| %o | 값을 확장 가능한 DOM 요소로 형식화 |
| %O | 확장 가능한 JavaScript 객체로 값의 형식을 지정 |
| %c | console.log() 메서드 두 번째 매개변수로 전달된 CSS Style을 적용 |
%c 형식 지정자를 활용한 예시
다음은 console.log()에 대한 사용자 정의 CSS 스타일을 적용한 예시이다.
/* 출력 예시 1 */
console.log("%c This is a fancy message ", "color: white; background-color: orange; font-style: italic");
/* 출력 예시 2 */
console.log("%c Styled Text ", "color: white; background-color: skyblue; font-size: 32px;");
위 예시 코드들에서 볼 수 있듯이 console.log()의 첫 번째 매개변수로 %c 형식 지정자와 문자열을 설정하고, 두 번째 매개변수로 CSS 스타일을 전달하여 콘솔에 출력되는 문자열을 스타일링할 수 있다. 여러 CSS 스타일을 동시에 적용할 수 있다.
문자열 대체 형식 지정자를 활용한 예시
문자열을 허용하는 콘솔 개체인 log() 메서드에 문자열을 전달할 때 다음 대체 문자열을 사용할 수 있다.
%s–string%i or %d–integer%o or %O–object%f–float
for (let i = 1; i <= 4; i++) {
console.log(`Hello, %s. You\'ve called me %d times.`, 'Matthew', i);
}
💬 마치며
해당 정보가 크게 중요도가 높은 정보는 아니다. 하지만 알아두고 있는다면 나중에 무언가를 꾸미고자 할 때나 활용 가능한 부분이 생긴다면 충분히 활용해보면 좋은 기능이라 생각되어 좋았다. 알아보면서 재밌었다.
📎 참고
- https://developer-talk.tistory.com/824
- https://markodenic.com/use-console-log-like-a-pro/
- https://developer.chrome.com/docs/devtools/console/format-style/ - Chrome 공식문서 (⭐)
- https://medium.com/bom-i/console-api-e3b0ee4ddec5
'Javascript' 카테고리의 다른 글
| noscript 태그의 역할은 뭘까? (0) | 2023.12.10 |
|---|