"블로그 가독성 치트키" 인라인 코드(Inline Code) 스타일 적용 방법

문장 중간에 특정 단어나 짧은 코드, 영어를 강조할 때 아주 유용한 '인라인 코드(Inline Code)' 스타일을 구현하는 방법을 알아본다. 이 스타일을 적용하면 글의 가독성이 확 올라가고, 훨씬 전문적인 느낌을 줄 수 있다.

인라인 코드 적용 방법

1. 인라인 코드용 CSS 추가

블로그스팟 [테마] > [맞춤설정] > [고급] > [CSS 추가] 또는 [HTML 편집]의 CSS 영역 맨 아래에 이 코드를 붙여넣는다.

- 둘 중 하나만 선택, 색상의 차이.

CSS

/* 문장 속 짧은 코드/영어 강조 스타일 */
code:not(pre code) {
  background-color: #f1f3f4; /* 아주 연한 회색 배경 */
  color: #d81b60;           /* 제미나이 스타일의 진한 핑크/자주색 (또는 원하는 색상) */
  padding: 2px 5px;         /* 위아래, 좌우 여백 */
  border-radius: 4px;       /* 둥근 모서리 */
  font-family: 'Roboto Mono', monospace; /* 코드 전용 폰트 */
  font-size: 0.9em;         /* 주변 글자보다 살짝 작게 */
  font-weight: 500;
  margin: 0 2px;
}
  

CSS

code:not(pre code) {
  background-color: #f0f2f5; /* 아주 연한 청회색 배경 */
  color: #1a237e;           /* 미드나잇 블루 */
  padding: 2px 5px;
  border-radius: 4px;
  font-family: 'Roboto Mono', monospace;
  font-size: 0.95em;
  font-weight: 500;
}
  

2. 글 작성 시 사용법 (HTML 모드)

글을 쓸 때 강조하고 싶은 단어(영어, 수치, 코드 등)를 <code> 태그로 감싸주기만 하면 된다.

HTML

줄 간격이 <code>line-height: 1.2;</code> 부분은 너무 좁아요.
  

오늘의 한마디

예를 들면, 아래처럼 이런 느낌.

❛줄 간격이 line-height: 1.2; 부분은 너무 좁아요.❜

unsplash@ava sol