코드 블록이 읽기 좋은 블로그 UI를 만드는 기준

개발 블로그는 글보다 코드가 더 넓은 경우가 자주 있습니다. 그래서 코드 블록은 본문 흐름 안에 자연스럽게 들어오면서도, 긴 줄은 가로 스크롤로 안전하게 처리해야 합니다.

코드 블록에서 중요한 세 가지

• 본문과 구분되는 배경색
• 과도하지 않은 모서리 반경
• overflow-x-auto를 통한 안전한 스크롤

너무 화려한 스타일을 피하는 이유

강한 색 대비나 장식이 많아지면 오래 읽기 힘들어집니다. 문서형 블로그에서는 코드가 주인공이어야 하고, UI는 그 흐름을 방해하지 않아야 합니다.

pre {
  overflow-x: auto;
  border-radius: 1rem;
}