# console.delight - 브라우저 콘솔창에 CSS,SVG,HTML 사용하기

> Clean Markdown view of GeekNews topic #13015. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=13015](https://news.hada.io/topic?id=13015)
- GeekNews Markdown: [https://news.hada.io/topic/13015.md](https://news.hada.io/topic/13015.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2024-01-24T10:16:02+09:00
- Updated: 2024-01-24T10:16:02+09:00
- Original source: [frontendmasters.com](https://frontendmasters.com/blog/console-delight/)
- Points: 17
- Comments: 0

## Topic Body

- 콘솔창을 이쁘게 만들어서 호기심 많은 사용자들에게 브랜드 형성하기   
- 포토샵 온라인 버전은 콘솔에서 아이콘과 다양한 색상들로 버전을 표시함   
- console.log/info 에는 제한적이지만 CSS/SVG 및 data:image를 활용하여 이미지 표현도 가능   
### 콘솔에서 지원되는 기능들   
- SVG   
  - 기본 SVG 표현들 : circle,path 등   
  - Gradient, Clip Path, Mask, Filter, Transform, SMIL 애니메이션, foreignObject, Patterns   
- CSS   
  - CSS 애니메이션, CSS 변수, @media 쿼리, Viewport 유닛  
  - background-image: linear-gradient()  
- JavaScript   
  - SVG 내에서 DOM 레퍼런스, SVG DOM 변경   
  - Global 변수 및 CSS 변수 활용   
- HTML 렌더링   
  - SVG와 비슷한 제한이 있음. a 태그 활용 불가. 이벤트 리스너 불가 등   
  - SVG 의 foreignObject 안의 HTML은 3D Transform도 가능

## Comments



_No public comments on this page._