반응형
[2025/08/12] css형식으로 한방에 추가하기
[2021-10-18] 처음시작
소나무 기운 , 전자제품 개발/생산
[MARK DOWN] 글씨 색깔 넣기.
mark down 파일에서 글씨에 색상 넣기.
글씨 색깔 넣기.
<span style="color:red">
빨강 글씨
Red Font
</span>
색깔 종류
red
yellow
blue
brown
orange
green
violet
black
yellowgreen
blueviolet
white
greenyellow
indigo
gray

CSS스타일 넣어 반영
CSS스타일 처럼 값을 넣으면 좀더 쉽게 작업할 수 있어요.
다크 스타일 예시
<style>
body { background: #181818; color: #f5f5f5; }
h1 { color: #90caf9; background: #212121; padding: 6px 12px; border-radius: 6px; }
h2 { color: #a5d6a7; background: #263238; padding: 4px 10px; border-radius: 5px; }
h3 { color: #f06292; background: #212121; padding: 3px 8px; border-radius: 4px; }
h4 { color: #ffb74d; background: #212121; padding: 2px 6px; border-radius: 3px; }
h5 { color: #4dd0e1; background: #212121; padding: 2px 5px; border-radius: 2px; }
h6 { color: #fff176; background: #212121; padding: 1px 4px; border-radius: 2px; }
p { color: #f5f5f5; font-size: 1.05em; line-height: 1.7; }
ul, ol { color: #e0e0e0; font-size: 1em; }
li { color: #eeeeee; margin-bottom: 4px; }
code, pre { background: #333; color: #ffd54f; border-radius: 4px; padding: 2px 6px; font-size: 0.98em; }
blockquote { color: #b0bec5; background: #263238; border-left: 4px solid #90caf9; padding: 6px 12px; margin: 8px 0; }
table { background: #212121; border-collapse: collapse; }
th { background: #263238; color: #90caf9; padding: 6px; }
td { background: #212121; color: #f5f5f5; padding: 6px; }
</style>
# 프로그램 정보
## 개요
이 프로그램은 전광판 업체의 M10모브와의 표준 프로토콜이 적용된 프로그램입니다.
## 부착 센서 정보
센서 두가지가 적용됩니다.
1. 산소
2. 질소
## LDM 연결 방법
두개의 LDM을 연결해서 1번 채널에 연결한다.
또 두개의 LDM을 연결해서 2번 채널에 연결한다.
## LDM 표시 내용.
두개의 LDM이 연결된 것에서 한개는 숫자. 다른 한개는 단위를 설정한다.
## LDM 표시 색각 정의
## 센서별 단위 표시 내용
### 센서 1 :
### 센서 2 :
VSCode에서의 미리보기 화면입니다.

화이트모드를 사용한다면
<style>
h1 { color: #1565c0; background: #e3f2fd; padding: 6px 12px; border-radius: 6px; }
h2 { color: #388e3c; background: #e8f5e9; padding: 4px 10px; border-radius: 5px; }
h3 { color: #ad1457; background: #fce4ec; padding: 3px 8px; border-radius: 4px; }
h4 { color: #6d4c41; background: #efebe9; padding: 2px 6px; border-radius: 3px; }
h5 { color: #00838f; background: #e0f7fa; padding: 2px 5px; border-radius: 2px; }
h6 { color: #fbc02d; background: #fffde7; padding: 1px 4px; border-radius: 2px; }
p { color: #212121; font-size: 1.05em; line-height: 1.7; }
ul, ol { color: #263238; font-size: 1em; }
li { color: #37474f; margin-bottom: 4px; }
code, pre { background: #f5f5f5; color: #d84315; border-radius: 4px; padding: 2px 6px; font-size: 0.98em; }
blockquote { color: #455a64; background: #eceff1; border-left: 4px solid #90caf9; padding: 6px 12px; margin: 8px 0; }
table { background: #fafafa; border-collapse: collapse; }
th { background: #bbdefb; color: #0d47a1; padding: 6px; }
td { background: #e3f2fd; color: #263238; padding: 6px; }
</style>
마무리
글씨에 색을 입혀 md파일을 좀더 명료하게 작성 가능하다.
참고문헌
틀린 부분이나 질문은 댓글 달아주세요.
즐거운 하루 보내세요. 감사합니다.
반응형
'Tips, Infomation > Coding Editor' 카테고리의 다른 글
| VSCode 파일이름 옆 숫자 의미 (2) | 2022.02.20 |
|---|---|
| [VSCode] How to change Menu font size in VS Code (0) | 2022.01.14 |
| 코딩에서의 캐리지 리턴(CR, \r), 라인 피드(LF, \n) (0) | 2021.08.25 |
| [VSCode] VS Code를 마우스 오른쪽 버튼에 등록 하기 (2가지 방법) (9) | 2020.12.28 |
| [VSCode 팁] 단축키 누르는 법 Ctrl + K W (0) | 2020.12.28 |
댓글