단축키 글 이쁘게 적는법
간단한 HTML 문법을 활용해서 키보드 단축키 같은 글을 작성시
단축키를 이쁘게 작성하는 법을 알아 보겠습니다.
1. 글 작성시 앞뒤로 띄워쓰기
글을 먼저 작성해야하는데
키 단어 앞뒤로 띄워쓰기를 1칸씩 해줍니다
2. 배경색 지정
영영을 잡습니다
이후 상단 메뉴바에서 원하는 배경색을 지정해줍니다.
나머지 하나도 마져 배경색을 적용합니다
3.HTML 모드변경
상단 메뉴바에서 모드를 HTML 모드로 변경합니다
그럼 내가 작성한 키 부분이 보일 것입니다.
참고로   는 하나의 띄워쓰기 를 의미합니다
4. 스타일 추가
Ctrl 에 배경색을 지정했기때문에 자동으로 <span> 태그에 묶였고, 내가 설정한 배경색(background-color)도 지정된 것을 확인할 수 있습니다.
이제 background-color : #666666; 옆에다가
아래의 스타일을 추가하면됩니다.
border-radius: 5px; padding: 1px 2px; border: 1px solid white;예시
<span style="background-color: #666666; border-radius: 5px; padding: 1px 2px; border: 1px solid white;"> Ctrl </span>
하나의 스타일 속성마다 ;(세미콜론) 으로 반드시 구분해야합니다.
border-radius : 박스 모서리 둥근 정도를 뜻합니다.
padding : 박스내부 여백을 뜻합니다. 1px 2px 에서 1px은 위아래 2px은 양옆을 의미하며
padding : 2px; 과같이 하나만 적으면 위 아래 양옆에 모두 동일하게 적용되며
padding : 1px 2px 1px 2px; 과같이 적으면 첫번째순서부터해서 위 오른쪽 아래 왼쪽 순서로 적용됩니다
border : 1px solid white; 는 외곽선의 속성을 지정해주는건데,
1px은 외곽선의 굵기
solid는 외곽선의 타입 중 실선을 의미하고
white는 선의 색상을 흰색으로 하겠다를 의미합니다.
black blue 와 같이 다른 색상명으로 지정해주거나, 색상코드를 지정해줄 수 있습니다.
5. 완성
Ctrl + A
