[꿀팁] Velog 글씨를 내 마음대로 바꿔보자! (색상, 형광펜) 🔆

서쿠·2021년 9월 15일
174
post-thumbnail

💌 Velog를 열심히 작성하던 도중 문뜩 UI에서 제공되는 기능말고 글자 색이나 형광펜 기능은 사용할 수 없을까 고민하던 중 좋은 방법을 찾게 되어 꿀팁🐝 한번 작성해보았습니다.

글자 색상 바꾸기

  • 글자의 색상을 바꿔주고 싶을땐 아래와 같이 바꿔줄 수 있습니다.

💡 <예시> 아래와 같이 사과를 빨갛게 물들이고 싶다면!

오늘 아침에 먹은 사과는 빨갛고 맛있었어요~! 🍎

오늘 아침에 먹은 <span style="color: red">사과</span>는 빨갛고 맛있었어요~! 🍎
  • 색상명은 아래 두 가지 중 하나로 지정해줄 수 있는데요.
  1. red라고 직접 색상명을 넣어줄 수 있습니다.
  2. #ff0000라고 hex code를 넣어줄 수 있습니다.

📢 여기서 잠깐! hex code란?
hex code는, RGB 방식 색상 코드 표기법으로, #과 뒤에 붙는 여섯 자리 또는 세 자리의 숫자로 색상을 표기하는 방식입니다.

글자 형광펜 칠하기

  • 특정 문장에 형광펜처럼 칠해주고 싶을땐 아래와 같이 바꿔줄 수 있습니다.

💡 <예시> 아래와 같이 카레를 노랗게 칠하고 싶다면!

오늘 아침에 먹은 카레는 노랗고 맛있었어요~! 🥣

오늘 아침에 먹은 <span style='background-color: yellow'>카레</span>는 노랗고 맛있었어요~! 🥣

(참고) 색상표

  • hex code의 대표 색상들을 아래 표에서 확인할 수 있습니다.
ColorRGBHex ColorExample
Black(0, 0, 0)#000000ㅤㅤㅤㅤㅤ
White(255, 255, 255)#FFFFFFㅤㅤㅤㅤㅤ
Gray(128, 128, 128)#808080ㅤㅤㅤㅤㅤ
Red(255, 0, 0)#FF0000ㅤㅤㅤㅤㅤ
Blue(0, 0, 255)#0000FFㅤㅤㅤㅤㅤ
Green(0, 128, 0)#008000ㅤㅤㅤㅤㅤ
Yellow(128, 0, 128)#ffd33dㅤㅤㅤㅤㅤ
SkyBlue(76, 201, 254)#4CC9FEㅤㅤㅤㅤㅤ
  • 몇 가지 이쁜 색상들을 더 소개해드릴까요? 🥰
    (색상 이름은 임의로 지정해주었습니다)
ColorRGBHex ColorExample
연한회색(246, 248, 250)#f6f8faㅤ연한회색ㅤ
연한하늘(241, 248, 255)#f1f8ffㅤ연한하늘ㅤ
연한노랑(255, 245, 177)#fff5b1ㅤ연한노랑ㅤ
연한빨강(255, 220, 224)#ffdce0ㅤ연한빨강ㅤ
연한초록(220, 255, 228)#dcffe4ㅤ연한초록ㅤ
연한보라(245, 240, 255)#f5f0ffㅤ연한보라ㅤ
연한주황(247, 221, 190)#F7DDBEㅤ연한주황ㅤ
연한파랑(209, 235, 249)#d1ebf9ㅤ연한파랑ㅤ

냥냔얀양

감사합니다^~^

profile
Always be passionate ✨

24개의 댓글

comment-user-thumbnail
2021년 9월 15일

감사합니다. 블로그 작성이 좀 더 재밌어지겠네요 :)

1개의 답글
comment-user-thumbnail
2021년 9월 15일

감사합니다 ! 오늘부터 바로 적용해봐야겠네요 ㅎㅎ

1개의 답글
comment-user-thumbnail
2021년 9월 17일
<mark style="background-color: skyblue;">asdfasdf</mark>

mark 태그가 절절하겠네요

1개의 답글
comment-user-thumbnail
2021년 9월 17일

연구원님 안녕하세요 트렌딩 게시물에서 뵙네요 ㅎㅎ 꿀팁 감사합니다👍

1개의 답글
comment-user-thumbnail
2021년 9월 18일

좋은 정보 감사합니다 ㅎㅎ

1개의 답글
comment-user-thumbnail
2021년 9월 22일

다른 div같은 인라인 HTML도 지원되면 좋을 것 같은데 편집창에서만 지원되고 포스팅에서는 안되더라구요ㅠㅠ

1개의 답글
comment-user-thumbnail
2021년 9월 24일

오 다른 태그들도 해봐야겠네요 신기하네요 ㅎㅎ

1개의 답글
comment-user-thumbnail
2021년 9월 24일

555.... 이런 꿀팁이.. 감사합니다

1개의 답글
comment-user-thumbnail
2021년 9월 24일

노랑 형광펜이 참으로 탐나군요! 좋은 팁 감사합니다~~ 😆

1개의 답글
comment-user-thumbnail
2021년 10월 6일

블로그 작성 꿀팁... 감사합니다:)

1개의 답글
comment-user-thumbnail
2021년 12월 26일

꿀팁감사합니다!

1개의 답글
comment-user-thumbnail
2024년 10월 29일

좋은 포스팅 감사합니다!!
실례가 안 된다면 추가 색상 코드 남겨두겠습니다...!
연한 파랑: #d1ebf9

1개의 답글