티스토리에서 글을 작성하다 보면 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

    
  1. Commented by 쭌강사 at 2020.02.14 12:16 신고

    오~ 정말 좋은 꿀팁이네요! ㅎㅎ 감사합니다.

  2. Commented by 생존공부법 at 2020.02.14 15:30 신고

    완전 좋은 정보네요. 구독이랑 공감 누르고 갑니다!

  3. Commented by 아웃룩1000 at 2020.02.14 16:16 신고

    와웅,,,그렇게 어렵지 않네요..

  4. Commented by 바다야크 at 2020.02.14 16:51 신고

    어머나!! 매우 멋진 방법입니다. 감솨합니다!! ^^

  5. Commented by 투자를좋아하는지구별여행자 at 2020.02.14 18:54 신고

    오 이런 방법이 감사합니다 ^^