블로그에서 포스팅을 하다보면 단축키 안내등을 할 때가 많은데요. 이 때 안내하는 단축키의 키를 실제 키보드의 키처럼 보이게하는 방법에 대해서 알아보겠습니다. 여기서 제공되는 소스는 인터넷 상에서 검색하다 긁어 온 것인데요. 오래되서 출처를 밝히지 못하는 점 양해부탁드립니다. 혹시 원작자가 계시면 댓글로 알려주세요.
예를 들면 이렇게 보이는 것이죠. 모두들 잘아시는 단축키, 복사하기(Ctrl+C)와 붙여넣기(Ctrl+V)입니다.
어떠세요? 실제 키보드의 키처럼 보이나요?
아래에 안내하는 방법을 따라하시면 누구나 쉽게하실 수 있습니다.
|
#블로그 꾸미기 |
|
키보드의 자판 효과내기 - CSS |
|
by 즈칸루하 |
CSS를 이용한 효과입니다.
아래의 내용을 숙지하셔서 여러분의 블로그에 적용하시면 누구나 쉽게 하실 수 있습니다.
이 포스트의 주요 내용
- CSS 소스 안내
- CSS 소스를 티스토리에 적용하는 법
- 실제 적용해보기
CSS 소스 안내입니다.
- 티스토리 관리화면에 적용시켜야 할 소스입니다.
티스토리 관리 > 꾸미기 > HTML/CSS 편집 > STYLE.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: 90%;
line-height: 1.4;
margin: 0 0.1em;
padding: 0.1em 0.5em;
text-shadow: 0 1px 0 #fff;
white-space: nowrap;
}
.indented {
text-indent: 1.5em;
margin-bottom: 1em;
}
- 티스토리 본문에서 사용 시 html 전환하여 적용시켜야 할 부분입니다.
CTRL
CSS 소스를 티스토리에 적용하는 법
우선 티스토리 관리화면으로 이동합니다.
티스토리 관리 > 꾸미기 > HTML/CSS 편집 > STYLE.CSS
첫번째 소스를 style.css에 자신에게 편안한 곳에 붙여넣기하시고 적용하시면 됩니다.
저는 제일 아래쪽에 붙여넣기 했습니다.
아래의 적용하기 버튼을 누르시면 모두 완료되었습니다.
실제 적용해보기
이제는 자신의 모든 포스팅에서 두번째 소스처럼 적용하면 됩니다.
두번째 소스를 적용하는 법은 조금 번거로운데요. 티스토리 에디터에서 상단의 HTML 체크박스를 활성화 시킨 후
html 모드에서 수정하셔야 합니다.
빨간 네모부분을 체크하시고, 키보드의 자판 효과를 내려는 부분에 코드적용해보세요.
단축키 : CTRL+V
적용하면 아래와 같겠죠
단축키 : CTRL+V
그런데 이렇게 키효과를 낼때마다 html모드와 에디터모드를 왔다갔다하며 사용하면 많이 번거롭습니다.
그래서 팁을 드리자면, 서식을 이용하는 방법인데요.
서식부분에 "키보드 자판 효과"라는 제목으로 위의 소스를 저장한 후, 필요할 때마다 오른쪽의 서식메뉴 클릭해서 꺼내쓰면 됩니다.
css를 활용한 키보드 키효과를 구현하는 방법에 대해서 알아보았습니다. 도움이 되셨는지 모르겠습니다.
댓글