블로그에 keyboard 느낌 code 느낌 CSS로 살려주기

이곳 블로그는 티스토리 입니다. 티스토리는 마크다운 모드를 지원해 주고 있지요. 마크다운을 활요하면 글쓰기가 좀 더 편하고 태그를 중간 중간에 활용하기가 더 편해지지요.

 

그렇게 삽입된 태그를 좀더 예쁘게 꾸며주면서 전달력을 높이기 위해 kbd 태그와 code 태그를 활용합니다. 하지만 그냥 입력해서는 전혀 느낌이 오지 않죠. 안이쁘니까요.

 

그래서 예쁘게 꾸며줌과 동시에 가독성을 올리기 위해 css를 추가해 주기로 합니다.

/* 코드 span CSS 효과 */
code {
  color: #900;
  background-color: #ddd;
  padding: 0 0.5em;
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  font-size: 0.9em;
  display: inline-block;
}

pre>code {
  line-height: 1.4 !important;
  tab-size: 4;
  border: 1px solid #ccc;
  border-radius: 5px;
    padding: 15px !important;
}

/* 키보드 효과 css */
kbd {
  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;
  padding: 0.1em 0.5em;
  margin: 0 0.1em;
  text-shadow: 0 1px 0 #fff;
  white-space: nowrap;
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  font-size: 0.9em;
  display: inline-block;
}

그리고 kbd 태그를 입혀서 입력해 보면 이렇게 보이게 됩니다.

command + s

 

그리고 code 태그를 입혀서 입력해 보면 이렇게 보이게 되지요.
selectAll()

 

어떤가요? 쓸만한 정보였지요?