블로그에 키보드 효과, 강조문구 설명 효과 추가하기 How to add keyboard effect in blog post

특히 개발 관련한 글을 검색하다 보면, 심심치 않게 키보드 단축키, 키 입력값에 대한 글이 보입니다. 그런데 이 부분은 어떤 입력 값으로도 입력이 불가능하고, 이미지를 키 하나하나마다 삽입하는 것 역시 여간 귀찮은 일이 아닙니다. (이건 사실 불가능한 수준이겠지요...^^) 

 

물론 Stackoverflow 같은 대형 사이트.. 게다가 키보드 효과가 많이 필요한 경우, 이런 효과를 Custom Tag 를 만들어두고 그걸 사용하게 권장하는 것도 대부분입니다. 하지만 개인 블로그의 경우에는 이런 기능을 넣어주는 경우가 거의 없어요..(있으면 소개 부탁드립니다. 한번 사용해보려구요..)

 

이런 이유 때문에 키보드 효과를 넣을 수 없을까 고민했습니다. 물론 실력자(?) 분들이 미리 만들어둔 방식을 차용하게 되어 공유 드립니다. 아래에 출처를 명시해 두었으니 혹시 Syntax Highlight 기능이 필요한 분이라면 해당 블로그를 방문해보시는 것도 좋을 것 같습니다. 

 

여기서는 티스토리 블로그를 기준으로 설명합니다.

 

스킨 편집하기

관리 메뉴로 진입하여 스킨 편집 메뉴로 들어갑니다. 그러면 좌우로 분할된 화면이 보이면서 레이아웃 등을 수정할 수 있는데, 여기서 우측 상단의 CSS를 눌러 편집 화면으로 진입합니다. 그리고 맨 마지막에..사실 순서는 상관없지만..마지막에 아래 내용을 추가해주세요.

.key { 
    background-color: #f7f7f7; 
     
    border: 1px solid #ccc; 
    border-radius: 3px; 
     
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset; 
    color: #333; 
    display: inline-block; 
    font-size: 80%; 
    font-weight: bold; 
    line-height: 1.4; 
     
    margin: 0 0.1em; 
    padding: 0.1em 0.5em; 
    text-shadow: 0 1px 0 #fff; 
     
    white-space: nowrap; 
}

 

이 코드는 key라는 이름의 CSS class 를 생성합니다. 이제 스킨을 저장하고 빠져나옵니다.

글쓰기 화면으로 진입해서, HTML 모드에서 아래와 같이 입력합니다.

<span class="key">Shortcut</span> 설명

 

그렇게 하면 아래와 같이 나타나게 됩니다.

Shortcut 설명

 

서식 활용하기

위와 같이 사용하면 됩니다만, 이렇게 하면 매번 HTML 모드를 넘나들어야 하는 불편함이있어요.. 이럴땐, 티스토리의 서식 기능을 사용하면 됩니다. 

 

임의의 이름으로 서식을 만들고, 그 안에 위 코드를 한줄 넣어 둡니다. 그리고 나서 글쓰기할 때, 서식을 삽입하면, 해당 위치에 서식이 삽입됩니다. 단, 한가지 주의할 점은 서식을 넣은 뒤에 글을 적을 때 '미리보기'로 한번 확인하고 글 작성하세요.. 안그러면 몽땅 키보드가 되서.. 엉망이 되어버립니다.

 

 

 

출처 : https://itchipmunk.tistory.com/178