AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

콘솔 로그에 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()과 결합해 중첩된 로그 그룹 관리 권장
  • 배경색, 폰트, 그림자 등 다양한 스타일로 로그 개선 가능