콘솔 로그에 CSS 스타일 적용하는 비밀 팁
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
프론트엔드 개발자, 디버깅을 자주 수행하는 개발자
핵심 요약
%c
플레이스홀더를 사용해console.log()
에 CSS 스타일을 적용 가능- 에러/경고 로그 강조, 디버깅 시각화 등 개발 효율성 향상
console.group()
과 결합해 로그 구조화 가능
섹션별 세부 요약
1. `%c` 플레이스홀더 사용법
console.log("%cStyled Text", "color: red;")
형식으로 CSS 속성 직접 입력- 텍스트, 배경, 폰트, 패딩, 그림자 등 다양한 스타일 적용 가능
- 예시:
"%cError:%c File not found!"
로 다중 스타일 적용
2. 스타일 적용 예시
- 에러 강조:
color: red; font-weight: bold;
- 성공 메시지:
background: #28A745; padding: 4px 8px; border-radius: 4px;
- 애니메이션:
@keyframes
사용해 움직이는 로그 생성 가능
3. 활용 팁
- 로그 레벨 색상 분리: 에러(빨강), 경고(노랑), 정보(파랑)로 구분
- API 요청/응답 로그 하이라이트: 별도 스타일 적용
- 디버깅 흥미 증대: 그라디언트 텍스트, 아이콘(예:
✨
) 활용
결론
%c
를 사용해console.log()
에 CSS 적용 → 디버깅 시각화 및 로그 구조화 가능console.group()
과 결합해 중첩된 로그 그룹 관리 권장- 배경색, 폰트, 그림자 등 다양한 스타일로 로그 개선 가능