[ANSI Escape Code] ANSI Escape Code로 터미널 예쁘게 출력하기

ANSI escape code

ANSI escape code

⸰ 텍스트 터미널에서 커서 위치, 색, 글꼴 스타일, 그 밖의 옵션을 제어하는 표준

console.log("\x1b[31mHello, world!\x1b[0m");

코드를 자세히 보자.

 

1.\x1b[31m

2.Hello, world!> 작성하고 싶은 문구

3.\x1b[0m

 

1번, 3번 -> ANSI escape code

 

⸰\x1b[숫자m

  - \x1b 는 16진수 1b, 즉 27이 아스키코드표에서 뜻하는 ESC

  - \x1b 대신 8진수인 \033을 사용하기도 함

⸰[

  - Control Sequence Introducer(CSI)

  - [ 뒤에 오는 코드에 따라, 여러 옵션을 수행

⸰m

  - Select Graphic Rendition(SGR)

  - m 뒤에 오는 글자에 각종 스타일을 제공

⸰[과 m 사이에 있는 숫자

  - 31은 빨간색, 0은 지금까지의 설정을 리셋
  - (0은 생략하여 \x1b[m으로 작성 가능)

 

0: 모든 속성 초기화

1: 볼드 or 색상 강도 증가

2: 볼드 해제 or 색상 강도 감소
3: 이탤릭체
4: 밑줄
5: 느리게 깜빡거림

6: 빠르게 깜빡거림
7: 반전
8: 숨김
9: 취소선
30 ~ 37,90 ~ 97: 더 어두운 글자색, 더 밝은 글자색 

40 ~ 47,100 ~ 107: 더 어두운 배경색, 더 밝은 배경색

 

⸰ 세미콜론(;)을 사용하여 동시 적용 가능

console.log("\x1b[1;3;33;106mHello, world!\x1b[0m");

> 볼드, 이탤릭체, 노란색 글자색, 하늘색 배경색 적용

 

⸰ 변수에 지정하여 사용 가능

const red = (strs) => {
  return `\x1b[31m${strs.join("")}\x1b[0m`;
};
console.log(red`Hello, world!`);

 

 

⸰m으로 스타일 지정 외 다른 옵션

  - n, m은 숫자를 의미

    ‣nA: Cursor Up (CUU)

      : 좌우이동 없이 커서를 위로 n만큼 이동

    ‣nB: Cursor Down (CUD)

      : 좌우이동 없이 커서를 아래로 n만큼 이동

    ‣nC: Cursor Forward (CUF)

      : 상하이동 없이 커서를 앞으로 n만큼 이동

    ‣nD: Cursor Back (CUB)

      : 상하이동 없이 커서를 뒤로 n만큼 이동

    ‣nE: Cursor Next Line (CNL)

      : 커서를 다음 n 줄로 이동

    ‣nF: Cursor Previous Line (CPL)

      : 커서를 이전 n 줄로 이동

    ‣nG: Cursor Horizontal Absolute (CHA)

      : 커서를 현재 줄에서 n에 해당하는 열로 이동

    ‣n;mH: Cursor Position (CUP)

      : 커서를 n행 m열로 이동

 

    ‣nJ: Erase in Display (ED)

      : 디스플레이를 지움

      - 0J , J : 커서부터 화면 끝까지 지움

      - 1J : 커서부터 화면 시작까지 지움

      - 2J : 화면 전체를 지움

      - 3J : 화면 전체를 지우고, 스크롤백 버퍼도 지움

 

    ‣nK: Erase in Line (EL)

      : 현재 줄 지움 (커서 위치는 고정)

    - 0K, K : 커서부터 줄 끝까지 지움

    - 1K : 커서부터 줄 시작까지 지움

    - 2K : 줄 전체를 지움

 

 

    ‣nS: Scroll Up (SU)

    ‣nT: Scroll Down (SD)

    ‣n;mf: Horizontal Vertical Position (HVP)

      : CUP와 비슷

    ‣nm: Select Graphic Rendition (SGR)

      : 스타일 지정

 

    ‣s: Save Current Cursor Position (SCP)

      : 현재 커서 위치를 메모리에 저장

    ‣u: Restore Saved Cursor Position (RCP)

      : 저장된 커서 위치로 복귀