효투의 세상 로딩중...
효투의 세상 로딩중...
반응형

https://en.wikipedia.org/wiki/ANSI_escape_code#Colors

 

ANSI escape code - Wikipedia

From Wikipedia, the free encyclopedia Jump to navigation Jump to search Method used for display options on video text terminals ANSI escape sequences are a standard for in-band signaling to control cursor location, color, font styling, and other options on

en.wikipedia.org

 

위의 ANSI escape 코드를 이용하여 프리다 스크립트 동작 시 콘솔로그에 색상을 입힐 수 있다.

콘솔 로그 내용이 많다면 가독성이 훨씬 좋아지고 필요한 정보가 또렷하게 보일 뿐 아니라

멋있어서 스크립트 짤 때 같이 꾸며주면 여러모로 좋다

색상 코드는 아래와 같다.

	Reset                    = "\x1b[0m"
	Italics                  = "\x1b[3m"
	Underline                = "\x1b[4m"
	Blink                    = "\x1b[5m"
	Inverse                  = "\x1b[7m"
	ItalicsOff               = "\x1b[23m"
	UnderlineOff             = "\x1b[24m"
	BlinkOff                 = "\x1b[25m"
	InverseOff               = "\x1b[27m"
	Black                    = "\x1b[30m"
	DarkGray                 = "\x1b[30;1m"
	Red                      = "\x1b[31m"
	LightRed                 = "\x1b[31;1m"
	Green                    = "\x1b[32m"
	LightGreen               = "\x1b[32;1m"
	Yellow                   = "\x1b[33m"
	LightYellow              = "\x1b[33;1m"
	Blue                     = "\x1b[34m"
	LightBlue                = "\x1b[34;1m"
	Magenta                  = "\x1b[35m"
	LightMagenta             = "\x1b[35;1m"
	Cyan                     = "\x1b[36m"
	LightCyan                = "\x1b[36;1m"
	Gray                     = "\x1b[37m"
	White                    = "\x1b[37;1m"
	ResetForeground          = "\x1b[39m"
	BlackBackground          = "\x1b[40m"
	RedBackground            = "\x1b[41m"
	GreenBackground          = "\x1b[42m"
	YellowBackground         = "\x1b[43m"
	BlueBackground           = "\x1b[44m"
	MagentaBackground        = "\x1b[45m"
	CyanBackground           = "\x1b[46m"
	GrayBackground           = "\x1b[47m"
	ResetBackground          = "\x1b[49m"
	Bold                     = "\x1b[1m"
	BoldOff                  = "\x1b[22m"

 

실제 사용할 때는 

printf나 console.log 함수와 같이 쓰거나 하면 된다.

console.log("\x1b[30m" ," Black",       "\x1b[0m" );
console.log("\x1b[31m"  , " Red",     "\x1b[0m" );
console.log("\x1b[32m" ,  " Green",     "\x1b[0m" );
console.log("\x1b[33m"  , " Yellow",    "\x1b[0m" );
console.log("\x1b[34m" ,  " Blue",     "\x1b[0m" );
console.log("\x1b[35m" ,  " Magenta",    "\x1b[0m" );
console.log("\x1b[36m"  , " Cyan",    "\x1b[0m" );
console.log("\x1b[37m"  , " White",     "\x1b[0m" );
console.log("\x1b[30;1m" ," Bright Black",  "\x1b[0m" );
console.log("\x1b[31;1m" ," Bright Red",  "\x1b[0m" );
console.log("\x1b[32;1m", " Bright Green",  "\x1b[0m" );
console.log("\x1b[33;1m", " Bright Yellow", "\x1b[0m" );
console.log("\x1b[34;1m" ," Bright Blue",  "\x1b[0m" );
console.log("\x1b[35;1m", " Bright Magenta", "\x1b[0m" );
console.log("\x1b[36;1m", " Bright Cyan",  "\x1b[0m" );
console.log("\x1b[37;1m", " Bright White",  "\x1b[0m");
console.log("\x1b[31m"," T","\x1b[32m","E","\x1b[33m","S","\x1b[34m","T","\x1b[0m" );
console.log("\x1b[41m"," TEST",  "\x1b[0m");
console.log("\x1b[46m"," TEST",  "\x1b[0m");
console.log("\n");

 

한글자 한글자 색상을 줄 수도 있고 백그라운드 색상 블링크 볼드 해제 등등 다양한 옵션이 있다

실제 출력화면

 

cmd 커스터마이징 때문에 색깔이 잘 안나오는데 기본 cmd에서 하면 잘나오는 것을 볼 수 있다.

 

위 코드처럼 색상코드를 그대로 사용하는 방법도 있고

색상 설정을 많이해야한다면 var로 변수를 명명한뒤 사용하는것도 좋다.

var colors= {

	"reset": "\x1b[0m",
	"Black": "\x1b[30m",
	"Red":"\x1b[31m",
	"Green":"\x1b[32m",
	"Yellow":"\x1b[33m",
	"Blue":"\x1b[34m",
	"Magenta":"\x1b[35m",
	"Cyan":"\x1b[36m",
	"White": "\x1b[37m",
	"BrightBlack":"\x1b[30;1m",
	"BrightRed":"\x1b[31;1m",
	"BrightGreen":"\x1b[32;1m",
	"BrightYellow":"\x1b[33;1m",
	"BrightBlue":"\x1b[34;1m",
	"BrightMagenta":"\x1b[35;1m",
	"BrightCyan":"\x1b[36;1m",
	"BrightWhite":"\x1b[37;1m"
}
	    
console.log(colors.Black ," Black",       colors.reset );
console.log(colors.Red  , " Red",     colors.reset );
console.log(colors.Green ,  " Green",     colors.reset );
console.log(colors.Yellow  , " Yellow",    colors.reset );
console.log(colors.Blue ,  " Blue",     colors.reset );
console.log(colors.Magenta ,  " Magenta",    colors.reset );
console.log(colors.Cyan  , " Cyan",    colors.reset );
console.log(colors.White , " White",     colors.reset );
console.log(colors.BrightBlack ," Bright Black",  colors.reset );
console.log(colors.BrightRed ," Bright Red",  colors.reset );
console.log(colors.BrightGreen, " Bright Green",  colors.reset );
console.log(colors.BrightYellow, " Bright Yellow", colors.reset );
console.log(colors.BrightBlue ," Bright Blue",  colors.reset );
console.log(colors.BrightMagenta, " Bright Magenta", colors.reset );
console.log(colors.BrightCyan, " Bright Cyan",  colors.reset );
console.log(colors.BrightWhite, " Bright White",  colors.reset);
console.log("\n");

 

출력 화면

 

로그 출력 뒤 마지막에 디폴트 색상으로 변환해주는 이유는

저걸 하지않으면 그다음 로그 색상이 디폴트값이 마지막 설정된 색상으로 바뀌기 때문에

연속해서 색상 설정을 하지 않는 상황이라면 reset을 해주는 것이 가독성이 좋음

반응형
  • hyotwo7658@gmail.com

복사 완료 👍