키보드 버튼을 아이콘으로 표현하는 방법 CSS

키보드 버튼을 아이콘으로 표현

키보드 버튼을 아이콘으로 표현하는 것은 시각적인 효과를 높이고 사용자에게 직관적인 인터페이스를 제공할 수 있습니다. 아이콘을 사용하면 텍스트보다 더 간결하고 시각적으로 잘 구별되기 때문에 사용자들이 글을 더 쉽게 이해하고 읽을 수 있습니다. 특히, 기술적인 주제나 사용자 인터페이스 설명과 같은 경우 키보드 버튼 아이콘이 매우 유용하며, 사용자가 어떤 키를 눌러야 하는지 명확하게 알려줍니다. 또한, 키보드 단축키를 설명할 때나 튜토리얼을 작성할 때도 아이콘을 사용하면 작업이 더 간편해질 수 있습니다. 따라서 키보드 버튼을 아이콘으로 표현하는 것은 사용자 경험을 향상하고 글을 더욱 쉽게 읽히도록 만들어줄 수 있습니다.

키보드 아이콘 CSS

.keyboard {
	color: black;
	margin-right: 1px;
	margin-left: 1px;
	padding: 5px 10px;
	background: black;
	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;
}

span.keyboard:hover {
	opacity: 0.5;
	transition: .2s ease-out;
}

이 CSS 코드는 키보드 버튼을 스타일링하는 데 사용됩니다. 각 속성을 설명하겠습니다.

.keyboard: 키보드 버튼의 스타일을 정의하는 클래스입니다.
- color: 텍스트 색상을 지정합니다. 여기서는 검은색으로 설정되어 있습니다.
- margin-right, margin-left: 오른쪽과 왼쪽 여백을 지정합니다. 여기서는 각각 1px로 설정되어 있습니다.
- padding: 내부 여백을 지정합니다. 여기서는 위아래 5px, 좌우 10px로 설정되어 있습니다.
- background, background-color: 배경 색상을 지정합니다. 여기서는 밝은 회색(#f7f7f7)으로 설정되어 있습니다.
- border: 테두리 스타일을 지정합니다. 여기서는 1px의 회색 실선(#ccc)으로 설정되어 있습니다.
- border-radius: 테두리의 모서리를 둥글게 만듭니다. 여기서는 3px로 설정되어 있습니다.
- box-shadow: 요소 주위에 그림자 효과를 추가합니다. 여기서는 하얀색 그림자와 테두리 내부에 하얀색 그림자를 만듭니다.
- font-size: 글꼴 크기를 지정합니다. 여기서는 기본 크기의 80%로 설정되어 있습니다.
- font-weight: 글꼴의 굵기를 지정합니다. 여기서는 굵게(bold)로 설정되어 있습니다.
- line-height: 줄 간격을 지정합니다. 여기서는 텍스트 크기의 1.4배로 설정되어 있습니다.
- padding: 내부 여백을 재설정합니다. 여기서는 위아래 0.1em, 좌우 0.5em으로 설정되어 있습니다.
- text-shadow: 텍스트에 그림자 효과를 추가합니다. 여기서는 흰색 그림자를 적용합니다.
- white-space: 공백 처리 방법을 지정합니다. 여기서는 텍스트가 넘칠 경우 줄바꿈을 하지 않도록 설정되어 있습니다.
span.keyboard:hover: 키보드 버튼에 마우스를 올렸을 때의 스타일을 정의하는 클래스입니다.

opacity: 투명도를 조절합니다. 여기서는 0.5로 설정되어 있습니다.
transition: 요소의 변화가 일어날 때 애니메이션 속도와 타이밍 함수를 설정합니다. 여기서는 0.2초 동안의 ease-out 애니메이션 효과가 적용됩니다.

이 CSS 코드를 사용하면 키보드 버튼이 아름답게 스타일링되고, 마우스를 올렸을 때 부드러운 효과가 적용됩니다.

사용방법

<span class="keyboard">Ctrl</span> + <span class="keyboard">Shift</span> + <span class="keyboard">S</span>

CSS 입력 후 위와 같은 html소스를 사용하면 Ctrl + Shift + S이렇게 표현할 수 있습니다. 간편하게 인라인블록 같은 효과처럼 응용해서 사용하실 수 있으니 이쁘게 사용하도록 하세요. 클라스 이름은 자신이 사용하기 편한 이름으로 변경하셔도 괜찮습니다.

키보드 버튼을 아이콘으로 표현하는 방법 CSS