Products & Services/Tistory

Tistory - 글 작성시 Keypad 이미지 표시하기

TechNote.kr 2020. 2. 14. 11:50
728x90

 

티스토리에서 글을 작성하다 보면 keyboard key 조합에 대해 언급해야 할 경우가 있다. 

 

예를 들면 control 키와 R 키를 누르는 것을 표현해야 하는데, 이럴 경우 기존에는 Ctrl + R 로 표현하였다. 

 

티스토리 글작성시 <kdb> tag 와 css 를 이용해 좀 더 가독성이 높게 표현하는 법을 확인하여 정리해 보았다. 

 

[기존]

Ctrl + R

 

[개선]

Ctrl + R

 


1) CSS 설정을 추가

 

"티스토리 > 블로그관리 > 꾸미기 > 스킨 편집" 진입

"스킨 편집" 화면에서 "html 편집" 버튼 선택

 

이후 CSS 항목을 선택하고 임의의 위치에 하기 설정을 추가한다. 

kbd {
  border: 1px solid #aaa;
  border-bottom-width: 2px;
  border-radius: 3px;
  padding: 3px 5px;
  font-size: .85em;
  line-height: 20px;
  color: #333;
  background-color: #fcfcfc;
  font-family: monospace;
}

 

2) 에디터 내 HTML 모드로 변환 후 key 표현이 필요한 부분 앞뒤로 <kbd></kbd> 를 추가

<kbd>Ctrl</kbd> + <kbd>R</kbd>

 

 

 

참고문헌


https://dev.to/samanthaming/html-kbd-tag-8di

728x90