Console.log에 CSS 스타일 적용하기
- Published on
개발 과정에서 콘솔 로그는 가장 기본적이면서도 중요한 디버깅 도구 중 하나입니다. 대부분은 코드의 동작을 확인하거나 문제를 진단하기 위해 console.log()를 자주 사용하며 기본 텍스트 출력용도로만 사용합니다. 이 글에서는 콘솔 로그의 출력을 더욱 돋보이게 만들 수 있는 방법, 바로 CSS 스타일을 적용하는 다양한 방법에 대해 알아보겠습니다. 이를 통해 로그의 가독성을 높이고, 로깅 정보를 시각적으로 구분하는 등의 이점을 얻을 수 있습니다.
1. 단순한 텍스트 색상 변경
console.log('%c이것은 빨간색 텍스트입니다.', 'color: red;');
2. 글꼴 크기와 굵기 변경
console.log("%c이것은 크고 굵은 텍스트입니다.", "font-size:20px; font-weight:bold;");
3. 배경 색상과 패딩 추가
console.log("%c이것은 배경이 있는 텍스트입니다.", "background-color: yellow; padding: 10px;");
4. 테두리와 반원형 모서리 추가
console.log("%c이것은 테두리가 있는 텍스트입니다.", "border: 2px solid blue; border-radius: 5px; padding: 5px;");
5. 그림자 효과 추가
console.log("%c이것은 그림자가 있는 텍스트입니다.", "text-shadow: 2px 2px 2px grey;");
6. 그라디언트 배경 적용
console.log("%c이것은 그라디언트 배경이 있는 텍스트입니다.", "background: linear-gradient(to right, red, orange); color: white; padding: 5px;");
7. 텍스트에 밑줄과 취소선 추가
console.log("%c이것은 밑줄이 있는 텍스트입니다.", "text-decoration: underline;");
console.log("%c이것은 취소선이 있는 텍스트입니다.", "text-decoration: line-through;");
8. 여러 스타일 조합
console.log("%c이것은 복합 스타일이 적용된 텍스트입니다.", "color: green; font-weight: bold; background-color: black; padding: 10px; border-radius: 5px;");
9. 글꼴 스타일 변경
console.log("%c이것은 이탤릭체 텍스트입니다.", "font-style: italic;");
10. 사용자 정의 글꼴 적용
console.log("%c이것은 사용자 정의 글꼴이 적용된 텍스트입니다.", "font-family: 'Comic Sans MS', cursive; font-size: 14px;");
11. 여러 색상의 텍스트 사용
console.log("%c오류 메시지: %c이것은 오류입니다.", "color: red;", "color: orange; background-color: black; padding: 2px;");
12. 아이콘 또는 이모지와 함께 사용
console.log("%c⚠️ 경고: %c시스템 메모리가 거의 가득 찼습니다.", "font-weight: bold;", "color: yellow; background-color: red; padding: 2px;");
13. 그림자와 배경의 조합
console.log("%c성공: %c데이터가 성공적으로 로드되었습니다.", "color: green; font-weight: bold;", "background-color: lightgreen; padding: 5px; box-shadow: 3px 3px 3px grey;");
14. 텍스트와 배경의 대비
console.log("%c정보: %c새로운 업데이트를 확인하세요!", "color: navy; font-weight: bold;", "color: white; background-color: navy; padding: 3px;");
15. 코드 스니펫 스타일링
console.log("%c코드 스니펫: %cfunction sayHello() { console.log('Hello!'); }", "font-weight: bold; color: blue;", "background-color: #EEE; color: #333; padding: 2px; border-radius: 4px;");