티스토리 키보드 자판 효과내기. 단축키 효과

여러 IT 블로그들을 보면 키보드 자판 모양으로 스타일링된, 단축키 안내들이 있다.

지금까지 필요는 없었지만 우연치 않게, 단축키를 설명해야 하는 포스팅을 올려야 했다.

CSS 삽입이야 금방 하는 작업이다.

티스토리 관리 페이지 ➡ 꾸미기 메뉴의 스킨 편집 ➡ html 편집 ➡ CSS 탭 선택

CSS Reset(초기화) 가 끝나고 아무 자리나 넣어 저장버튼을 눌러주자!

/* 키보드 효과 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 클래스를 넣어준다.

그러나 매번 글을 쓰면서, HTML 편집은 번거롭다.

티스토리 포스팅 시 우측 맨 아래에 '서식' 기능이 있다. 그 서식에 이 양식을 추가해주자.

티스토리 관리 페이지 ➡ 콘텐츠 메뉴의 서식 관리 ➡ 서식 쓰기 ➡ HTML 편집모드로 아래 소스를 넣어 저장하자.

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

< 티스토리 포스팅 시 나타나는 단축키 서식 >

글을 쓰는 화면에서 새로고침할 필요 없이, 작성중인 글 클릭하고 서식 클릭하면 업데이트가 된다.

단축키 소스 서식을 클릭하면 이처럼 나타난다. Shortcut 설명

'Shortcut' 부분을 수정하여 아래와 같이 단축키 조합을 설명할 수 있다.

command + shift + , 이런 식으로!

---

이번 포스팅부터 사용할, 인라인 코드를 삽입하기 위해 다음과 같은 스타일을 만들어봤다. inline-code

아래는 이 스타일 코드다.

/* 코드 span CSS 효과 */
.codespan {
    background-color: #eee;
    
    border: 1px solid #eee;
    border-radius: 2px;
    
    display: inline-block;

    font-size: 90%;
    font-weight: bold;
    color: crimson;
    
    margin: 0 0.1em;
    padding: 0.1em 0.3em;
    text-shadow: 0 1px 0 #fff;
    
    white-space: nowrap;
}

---

이제 키보드 자판 CSS 코드를 분석해보자.

background-color 속성은 '#색상코드' 로 요소의 배경 색상을 지정해주는 속성이다. 자세히 보기

border 속성은 요소의 테두리를 꾸며주는 속성이다. 'border-width border-style(required) border-color' 순으로 지정해준다. 자세히 보기

border-radius 속성은 요소 테두리에 라운딩 처리를 해준다. 'top-left top-right bottom-right bottom-left' 로 상단 좌측부터 시계 방향으로 값을 준다. 자세히 보기

box-shadow 속성은 요소의 그림자를 넣어준다. 자세히 보기

color 속성은 글씨 색깔을 지정, display 속성은 요소가 본문과 어떻게 구분을 할 건지 정해주는 속성이다. 예제를 보는게 이해하기 빠르다. 자세히 보기

font-size font-weight line-height 속성 각각 글자 크기, 글자 굵기, 줄간격을 의미한다. 글자 크기에 퍼센트로 넣어 현재 글자 크기에서 얼마 만큼의 배율로 조정을 할 건지 명시했다. 80%는 원래 글자 크기에서 80%로 '줄인' 크기다.

white-space 속성은 요소 안의 공백 처리를 어떻게 해줄지 정해준다. nowrap, normal, pre 세 가지의 값이 있다.

nowrap 은 창의 크기에 상관없이 가로 스크롤을 만들어내며 줄을 유지한다.

normal 은 창의 크기에 맞춰 넘어가지 않게끔 조정해준다.

pre 은 HTML 상에서 공백 처리한 것과 똑같이 표시해준다.

자세히 보기

---

단순히 단축키 CSS 효과만 포스팅하려 했는데, 어쩌다보니 또 코드를 inline 으로 꾸며주는 CSS 를 입혔다.

더불어, CSS 속성 공부도 해봤다. 프론트엔드 포스팅할 때 요긴하게 쓰일 것 같다.