✅ 티스토리 블로그에 키보드 단축키를 시각적으로 표현하는 css코드

 

 

키보드 단축키 표현하기

 

블로그에 어떤 기능이나 프로그램을 소개할때 자주 사용하는 단축키를 설명해야할 때가 있습니다. 이럴때 이미지가 아닌 css코드를 적용해 간단하면서도 눈에 잘 띄는 단축키스타일을 지정해 사용해볼 수 있습니다. 여기서 어떤 모양의 디자인으로 단축키를 적용하고 단축키를 html 코드로 나타내는 방법은 어떤건지 알아봅시다.

 

 

 

단축키를 보여주는 코드 만들기

 

티스토리 블로그를 사용하면서 어느정도 조금이라도 사용할 수 밖에 없는 것이 html편집과 css편집입니다. 이 기능은 네이버블로그등과는 다른 코드편집을 통해 휠씬 자유로운 나만의 블로그를 운영할수 있다는 장점이 있습니다. 간단한 css코드와 함께 html코드를 적용해 필요할때마다 코드를 넣어서 표현해보세요.

 

제가 제시한 css코드를 그대로 복사해서 티스토리의 css편집창 가장하단에 넣어보세요. 아래의 코드를 복사해서 붙여넣기하면 되고 만약 코드가 복사되지 않는 환경이라면 메모장의 txt파일을 다운로드 받아서 코드를 복사해 넣으면 됩니다.

 

kbd {
    background-color: #f0f0f0; /* 배경색 */
    border: 1px solid #ccc; /* 테두리 색상 */
    border-radius: 3px; /* 모서리 둥글기 */
    padding: 2px 4px; /* 내부 여백 */
    font-family: 'Courier New', monospace; /* 글꼴 */
    font-size: 90%; /* 글자 크기 조정 */
    display: inline-block; /* 인라인 블록으로 표시 */
}

 

키보드단축키모양css코드.txt

0.00MB

 

---

 

아래와 같이 css편집창에 붙여넣기 하면 되겠습니다. 추후 키보드 단축키를 넣었는데 색상이나 스타일이 마음에 안든다면 이 코드를 변형하여 내가 원하는대로 수정해서 사용해도 되겠습니다.

 

 

---

 

css를 저장했다면 이제 실제적으로 본문안에 어떻게 삽입하는지 알아볼까요? 

 

예시)

복사하기의 단축키는 Ctrl + C 입니다. 그리고, 붙여넣기의 단축키는 Ctrl + V 입니다.

 

위와 같은 단축키를 표현하는 방법을 알려드릴께요. 이 코드는 html편집창에서 수정할 수 있는데 이를 서식화하여 간단하게 저장해두고 사용하면 편리할것 같습니다. 먼저 아래의 코드를 복사해주세요. 아래의 코드는 일반적인 티스토리 블로그의 <p>태그를 사용하면 한줄로 내용이 나오지않고 여러줄의 단축키설명문장이 되는것을 방지해주는 <span>태그를 사용한것이 특징입니다.

 

<span data-ke-size="size16">복사하기의 단축키는</span>
<span><kbd>Ctrl</kbd></span>
<span data-ke-size="size16">+</span>
<span><kbd>C</kbd></span>
<span data-ke-size="size16">입니다. 그리고, 붙여넣기의 단축키는</span>
<span><kbd>Ctrl</kbd></span>
<span data-ke-size="size16">+</span>
<span><kbd>V</kbd></span>
<span data-ke-size="size16">입니다.</span>

 

키보드단축키모양html코드1.txt

0.00MB

 

---

 

위의 코드를 html편집창에서 수정해서 사용해야 합니다. 이를 위해서 블로그의 서식페이지로 이동하여 새글을 작성합니다. 서식관리에서 서식 쓰기를 클릭해 새로운 글을 작성합니다.

 

 

---

 

서식 쓰기에서 html모드로 변경합니다.

 

 

---

 

위의 코드를 복사해서 그대로 붙여넣기 합니다. 그리고 적당한 이름을 정한뒤에 저장해주세요.

 

 

---

 

이제 아래와 같이 키보드단축키모양을 넣을 수 있는 html서식이 만들어졌습니다.

 

 

---

 

이제 글쓰기에서 글을 쓰다가 필요한 단축키를 설명하려면 서식메뉴에서 해당 단축키서식을 불러와 적당히 소개하는 문구를 바꾸거나 단축키의 키를 넣으면 완성됩니다. 

 

 

---

 

이 서식을 넣은뒤에 원하는 단축키 설명으로 수정하여 아래와 같이 나타내면 되겠습니다. 저는 프린트하기의 단축키는 PrintScreen이라는 예제로 표현해보았습니다.

 

예시)

 

프린트하기의 단축키는Print Screen입니다.

 

 

 

 

추천하는 쇼핑제품

 

살균과 제습으로 안전하게 사용하는 LG제습기 추천

 

 

400여개의 상품평을 직접 확인해보세요.

 

LG제습기 자세히보기

 

실내가 꿉꿉한데 제습력이 약한 작은 제습기를 사용하고 계시나요? 아니면 제습기가 없으신가요? 제습기는 에어컨만큼 집안에 있어야할 필수 가전이 되고 있습니다. 습기가 많아지면 냄새도 날 수 있고, 곰팡이가 자랄 수 있는 계기를 만들어주기도 합니다. 이 기회에 강력하고 성능좋은 제습기를 구매해보시는것은 어떨까요?

 

강력하고 빠른 제습에도 전기세 걱정없이 조용하게 사용할 수 있는 제품입니다. 1등급 에너지소비효율등급을 획득해 전기세만으로도 제습기 금액을 세이브할 수 있습니다. 제습된 바람을 살균하여 내보내니 실내 공기도 깨끗하게 만들어주니 제습기의 역할만 하는것이 아닙니다. 이동시에는 바퀴와 손잡이로 부드럽고 간편하게 이동하여 다른곳을 옮겨다니며 제습을 할 수 있습니다. 지금 가격을 확인해보고 상품평도 확인해보세요. 다른제품보다 만족스러운 후기를 확인할 수 있습니다.

 

* 이 글은 쿠팡파트너스 활동으로 수익금을 얻을 수 있습니다.

 

 

 

관련태그

 

키보드단축키, 단축키,단축키표현, 단축키css코드, 단축키html코드, 티스토리블로그에단축키표현

 

 

 

관련링크

 

*이 글의 썸네일처럼 나도 쉽게 썸네일을 만들어보고싶다 생각하면 여기를 클릭하세요.

*이 블로그에 쓰인 스킨 다운로드 받아서 내 블로그에 적용해보고싶다면 여기를 클릭하세요.

 

 

 

 

카테고리 더보기

 

이 글과 비슷한 관련 카테고리의 글을 함께 읽어보세요. 도움이 되는 정보가 많이 준비되어 있습니다.

 

티스토리 블로그 : 항상 따라다니는 링크버튼 스타일 3번

티스토리 블로그 : 항상 따라다니는 링크버튼 스타일 3번

 

🎉티스토리 블로그에 정리되지 않은 목록을 표로 쉽게 삽입하는 꿀팁

🎉티스토리 블로그에 정리되지 않은 목록을 표로 쉽게 삽입하는 꿀팁

 

티스토리 블로그에 넣을 구글, 네이버, 빙검색의 메타태그 재확인하는 방법

티스토리 블로그에 넣을 구글, 네이버, 빙검색의 메타태그 재확인하는 방법

 

 

 

참고하세요

 

· 블로그 상단의 구독하기버튼을 누르시면 제 블로그의 새글을 바로 받아볼 수 있습니다.
· 방문하시는 여러분의 ♥공감 하나와 댓글 하나가 저에게는 큰힘이 될 수 있습니다.
· 이 글에는 쿠팡, 알리익스프레스등의 파트너스 활동으로 인한 수익금을 얻는 링크가 있습니다.
· 이 블로그의 홈으로 가시려면 여기를 누르셔도 됩니다.

 

📣 LG제습기 자세히보기