Console에서 메시지 서식 및 스타일 지정

제슬린 옌
제슬린 옌
Twitter GitHub 홈페이지

이 가이드에서는 Chrome DevTools 콘솔에서 메시지의 서식을 지정하고 메시지의 스타일을 지정하는 방법을 설명합니다. 콘솔에 메시지를 로깅하는 방법은 메시지 로깅 시작하기를 참고하세요.

이 가이드는 웹 개발의 기본 사항(예: 자바스크립트를 사용하여 페이지에 상호작용을 추가하는 방법)을 이해하고 있다고 가정합니다.

콘솔 메시지 형식 지정

형식 지정자를 사용하여 콘솔 메시지의 형식을 지정할 수 있습니다.

형식 지정자는 퍼센트 문자 (%)로 시작하고 데이터 유형 (정수, 부동 소수점 수 등)을 나타내는 '유형 문자'로 끝납니다.

예를 들면 다음과 같습니다.

  1. 콘솔 열기
  2. 다음 콘솔 명령어를 입력합니다. js const tools = 'Chrome DevTools'; console.warn('%s is awesome.', tools);
  3. 위 명령어는 Chrome DevTools is awesome. 메시지를 생성합니다. 형식 문자열 값

다음은 현재 Chrome DevTools에서 지원하는 형식 지정자 목록입니다.

지정자 출력
%s 값의 형식을 문자열로 지정합니다.
%i 또는 %d 값의 형식을 정수로 지정합니다.
%f 값의 형식을 부동 소수점 값으로 지정합니다.
%o 값의 형식을 확장 가능한 DOM 요소로 지정합니다.
%O 값의 형식을 확장 가능한 자바스크립트 객체로 지정합니다.
%c 두 번째 매개변수로 지정된 대로 CSS 스타일 규칙을 출력 문자열에 적용합니다.

여러 형식 지정자 적용

메시지 하나에 형식 지정자를 두 개 이상 사용할 수 있습니다.

  1. 다음 콘솔 명령어를 입력합니다. js console.info('The total weight of %i %s and %d %s is %f grams.', 3, 'apples', 2, 'oranges', 432.4);
  2. 위 명령어는 The total weight of 3 apples and 2 oranges is 432.4 grams. 메시지를 생성합니다. 여러 형식 지정자

유형 변환 이해

출력 메시지는 형식 지정자에 따라 변환됩니다.

  1. 다음 콘솔 명령어를 입력합니다. js console.log('I have %i apples and %d oranges.', 2, 3.5);
  2. 위 명령어는 I have 2 apples and 3 oranges. 메시지를 생성합니다. 정수 값 형식 지정
  3. 3.5 oranges를 로깅하는 대신 출력은 3 oranges입니다. %d는 값을 정수로 변환하거나 변환해야 함을 나타냅니다.

다음은 유형 전환이 유효하지 않은 경우 어떻게 되는지를 보여주는 예입니다.

  1. 다음 콘솔 명령어를 입력합니다. js console.log('Jane has %i kiwis.', 'two');
  2. 위 명령어는 Jane has NaN kiwis. 메시지를 생성합니다. 콘솔 메시지의 NaN
  3. %i는 값이 정수로 변환되어야 하고 변환될 예정임을 나타내지만 인수는 문자열입니다. 따라서 NaN (Not-A-Number)을 반환합니다.

콘솔 메시지 스타일 지정

DevTools에서 콘솔 메시지의 스타일을 지정하는 방법은 두 가지가 있습니다.

형식 지정자로 스타일 지정

%c 형식 지정자를 사용하여 CSS로 콘솔 메시지의 스타일을 지정할 수 있습니다.

  1. 다음 콘솔 명령어를 입력합니다. js const style = 'background-color: darkblue; color: white; font-style: italic; border: 5px solid hotpink; font-size: 2em;' console.log("%cHooray", style);
  2. 위 명령어는 CSS 스타일이 적용된 Hooray를 생성합니다. CSS로 스타일 출력

ANSI 이스케이프 시퀀스를 사용한 스타일

ANSI 이스케이프 시퀀스를 사용하여 콘솔 메시지의 스타일을 지정할 수 있습니다.

Node.js 개발자는 일반적으로 chalk, colors, ansi-colors, kleur와 같은 스타일 지정 라이브러리를 사용하여 ANSI 이스케이프 시퀀스를 통해 로그 메시지에 색상을 지정합니다.

라이브러리를 사용하지 않고도 ANSI 이스케이프 시퀀스로 메시지 스타일을 지정할 수 있습니다. 문법은 다음과 같습니다.

\x1B[𝘗1;…;𝘗nm

각 항목의 의미는 다음과 같습니다.

  • 𝘗1에서 𝘗n까지는 SGR (Select Graphic Rendition) 매개변수의 유효한 하위 시퀀스입니다.
  • 𝘗1에서 𝘗n까지의 매개변수 중 어느 것이든 생략할 수 있으며, 이 경우 값이 0으로 간주됩니다.
  • \x1B[m는 \x1B[0m의 약칭으로, 여기서 디스플레이 속성이 재설정됩니다.

예를 들면 다음과 같습니다.

  1. 다음 콘솔 명령어를 입력합니다. js console.log('\x1B[41;93;4mHello\x1B[m');
  2. 위 명령어는 빨간색 배경, 노란색 텍스트에 밑줄이 그어진 Hello 메시지를 생성합니다. 안녕하세요.

다음은 DevTools에서 지원되는 색상 코드 목록입니다.

포그라운드 배경 밝은 테마 어두운 테마
30 40
#00000
#00000
31 41
#AA0000
#ed4e4c
32 42
#00AA00
#01c800
33 43
#AA5500
#d2c057
34 44
#0000AA
#2774f0
35 45
#AA00AA
#a142f4
36 46
#00AAAA
#12b5cb
37 47
#AAAAAA
#cfd0d0
90 100
#555555
#898989
91 101
#FF5555
#f28b82
92 102
#55FF55
#01c801
93 103
#FFFF55입니다.
#ddfb55
94 104
#5555FF
#669df6
95 105
#FF55FF
#d670d6
96 106
#55FFFF
#84f0ff
97 107
#FFFFFF
#FFFFFF

다음은 DevTools에서 지원되는 스타일 지정 코드 목록입니다.

매개변수 의미
0 모든 표시 속성 재설정
1 font-weight: bold
2 font-weight: lighter
3 font-style: italic
4 text-decoration 속성에 underline 추가
9 text-decoration 속성에 line-through 추가
22 font-weight 속성 재설정
23 font-style 속성 재설정
24 text-decoration 속성에서 underline 삭제
29 text-decoration 속성에서 line-through 삭제
38;2;R;G;B color: rgb(𝑅,𝐺,𝐵)
39 color property 재설정
48;2;R;G;B background: rgb(𝑅,𝐺,𝐵)
49 background property 재설정
53 text-decoration 속성에 overline 추가
55 text-decoration 속성에서 overline 삭제

다음은 여러 스타일을 사용하는 더 복잡한 또 다른 예입니다.

  1. 다음 콘솔 명령어를 입력합니다. ```js const hello = '\x1B[41;93;4mHello'; const space = '\x1B[m '; const world = '\x1B[34;102;9mWorld';

    console.log(hello + space + world); ```

  2. 위 명령어는 3가지 스타일이 다른 Hello World 메시지를 생성합니다. Hello World