블로그 키보드 자판 효과

블로그 키보드 자판 효과

안녕하세요.

오늘은 원래 어떤 프로그램의 단축키에 대해 설명하려고 했습니다.

그런데 생각해보니 키보드 단축키를 강조하면 보기 좋을 것 같다는 생각이 들어 찾아보았습니다.

(만들어볼까 하고 생각했는데 귀찮기도 하고 몇 번 검색하니 어떤 능력자분이 만든 코드가 있어서 가져왔습니다.)

• 키보드 자판 효과 코드(단축키 강조코드).
• 티스토리 블로그에 코드 적용하기.
• 잘 적용되었는지 확인하기.

키보드 자판효과 코드.

코드는 아래와 같습니다.

/*키보드 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;
}

블로그에 코드 적용하기.

css와 html을 사용할 수 있는 블로그만 가능합니다.

저는 티스토리를 사용하므로 티스토리로 설명하겠습니다.

먼저 블로그 관리로 들어갑니다.

블로그 관리--> 꾸미기--> 스킨 편집으로 들어가세요.

스킨 편집에서 html 편집으로 들어가세요.

html 편집에서 CSS로 들어가서 이곳에 키보드 자판 효과 CSS를 넣어줍니다.

(제일 아래에 넣으시는 것을 추천드립니다.)

확인.

이제 잘 되었는지 확인해보겠습니다.

F5를 누르면 새로고침이 됩니다.

--*수정 전*--

F5가 정상적으로 출력되기는 합니다.

위에서부터 에디터(기본모드)-->에디터(html)-->미리보기입니다.

하지만 중요한 문제가 하나 있네요.

에디터(html)-->에디터(기본모드)-->에디터(html)로 넘어가면 key태그가 사라집니다.

--*수정 후*--

span태그로 감싸고 class로 바꿔줬습니다.

잘 되네요. ㅎㅎ

[유용한정보/윈도우] - 윈도우10 갓모드 설정

[유용한정보/윈도우] - 윈도우10 캡쳐 도구 단축키

[유용한정보/윈도우] - 자주 사용하는 프로그램 단축키 지정하기