Javascript 시작하기 - console 객체 2

자바스크립트의 console 객체는 주로 디버깅과 개발 용도로 사용되며, 기본적으로 텍스트만 출력하지만 CSS 스타일을 적용하여 글자의 색상, 크기 등을 변경할 수 있습니다. 이를 통해 출력 메시지를 더욱 눈에 띄게 만들 수 있습니다. 스타일 적용은 console.log(), console.warn(), console.error() 등의 메서드와 함께 CSS를 사용하여 가능하며, 텍스트에 스타일을 추가하려면 %c 지시어를 사용해야 합니다.

스타일 적용 방법

기본 사용법

console.log() 등의 메서드에 스타일을 적용하려면, 출력할 메시지 앞에 %c 지시어를 추가하고, 그 뒤에 스타일 문자열을 전달합니다.

console.log("%cThis is a styled message", "color: red; font-size: 20px; background-color: yellow;");

위 예제에서, 메시지는 빨간색 글자, 20px 글자 크기, 노란색 배경으로 출력됩니다.

다양한 스타일 적용 예제

색상 및 배경색

console.log("%cThis is a red text on yellow background", "color: red; background-color: yellow;");

글자 크기 및 글꼴

console.log("%cThis is a large, bold text", "font-size: 24px; font-weight: bold;");

여러 스타일 결합

console.log("%cStylish Text", "color: blue; font-size: 18px; font-family: 'Comic Sans MS'; background: pink; padding: 5px;");

여러 부분에 스타일 적용

다른 부분에 다른 스타일을 적용하려면 각각에 %c를 사용합니다.

console.log("%cThis is red text%c and this is green text", "color: red;", "color: green;");

다양한 스타일 속성

다음은 콘솔 출력에 사용할 수 있는 다양한 CSS 스타일 속성들입니다:

• color: 텍스트 색상
• background-color: 배경 색상
• font-size: 글자 크기
• font-weight: 글자 굵기 (예: bold, normal, lighter)
• font-family: 글꼴 (예: 'Arial', 'Comic Sans MS')
• text-decoration: 텍스트 장식 (예: underline, line-through, none)
• font-style: 글자 스타일 (예: italic, normal)
• padding: 내부 여백
• margin: 외부 여백
• border: 테두리

예제

console.log("%cSuccess: Operation completed successfully!", "color: white; background-color: green; font-size: 16px; padding: 5px;");
console.log("%cWarning: Check your input!", "color: yellow; background-color: orange; font-size: 16px; padding: 5px;");
console.log("%cError: Something went wrong!", "color: white; background-color: red; font-size: 16px; padding: 5px;");

위 예제는 각각 성공, 경고, 오류 메시지를 콘솔에 스타일을 적용해 출력하는 예입니다.

결론

console 객체의 기본적인 출력 기능을 CSS 스타일을 통해 강화함으로써 디버깅 정보를 더욱 눈에 띄게 하고, 개발자가 원하는 형식으로 메시지를 표현할 수 있습니다. 이를 통해 디버깅 작업이 더 편리해지고, 중요한 정보가 쉽게 구분될 수 있습니다.