이 멋진 편집자 꿀팁으로 다음 Dev.to 게시물에 재미를 더하세요!

this markdown 치트 시트를 읽는 동안 한 가지가 내 관심을 끌었습니다. 그리고 그것은,

You can also use raw HTML in your Markdown, and it'll mostly work pretty well.

그러나 문제가 있습니다. 대부분 꽤 잘 작동합니다. 즉, 모든 태그가 지원되는 것은 아닙니다. 그래서 이 편집기에서 사용할 수 있는 HTML 태그를 찾기 위해 원정을 떠났습니다. 다음은 결과입니다.

약어

나는 HTML을 쓸 수 있다.

☝(이모지가 잘못 배치되었습니다 😅) 위의 텍스트 HTML 위로 마우스를 가져가면 어떻게 되는지 확인하세요.

방법은 다음과 같습니다.

I can write <abbr title="Hyper text markup language">HTML</abbr>.

텍스트 강조

위의 두 번째 HTML 텍스트가 강조 표시되어 있음을 눈치 챘을 것입니다. 간단한 요령은 <mark> 태그를 사용하는 것입니다.

The text you want to <mark>Highlight</mark>

중앙 텍스트

---

모든 섹션 헤더가 화면의 오른쪽 왼쪽이 아닌 중앙에 위치한다는 사실을 알고 계셨습니까?

심지어 전체 문단 자체가 중심에 있습니다!

이 효과를 얻으려면 <center> 태그를 사용할 수 있습니다. 주의할 점: 중앙 태그는 더 이상 HTML5에서 지원되지 않습니다. 실제 코드에서는 이것을 사용하지 마십시오.

<center>Center this code</center>

키보드 단축키

이것은 내가 가장 좋아하는 것입니다! 다음은 예입니다.
Ctrl + C를 눌러 텍스트를 복사합니다(Windows).
Cmd + C를 눌러 텍스트를 복사합니다(Mac).

이렇게 하려면 키를 <kbd>에 포함하기만 하면 됩니다.

Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text (Windows).
Press <kbd>Cmd</kbd> + <kbd>C</kbd> to copy text (Mac).

테이블

테이블을 표시하는 것은 Dev에서 약간 일반적입니다. 그러나 나는 여전히 이것을 추가하기로 결정했습니다.


이름
성
나이


처녀
스미스
50


이브
잭슨
94


코드는 다음과 같습니다.

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

그건 그렇고, 이 코드는 W3schools에서 복사되었습니다.

텍스트 수정 표시

따라서 실수를 해서 올바른 텍스트와 잘못된 텍스트를 모두 표시하고 싶다고 가정해 보겠습니다.
<del> 태그를 사용하면 됩니다. markdown(~~) 도 사용할 수 있습니다.

텍스트 크기 제어

<h1>...<h6> 태그의 도움으로 텍스트를 더 크게 만들 수 있습니다. 하지만 텍스트를 작게 만들고 싶다면 어떻게 하시겠습니까? 간단하게 <small> 태그를 사용합니다.
이것은 작은 텍스트입니다.
이쪽은 더 작아요
더 작아질 수 있나요?
예

이에 대한 코드는 다음과 같습니다.

<small>This is a small text.</small>
<small><small>This one is even smaller</small></small>
<small><small><small>Can it become more small?</small></small></small>
<small><small><small><small>Yes</small></small></small></small>

아래 첨자, 위 첨자

<sub> <sup> 태그를 사용하여 텍스트를 아래 첨자 또는 위 첨자로 사용할 수 있습니다.

이렇게.

You can both <sub>subscript</sub> a text or <sup>superscript</sup> a text

밑줄 텍스트

그것이 들리는 것처럼 똑바로 앞으로.

As <u>straight forward</u> as it sounds.

이미지 캡션

(다른 플랫폼에서 가져온) 대부분의 블로그 게시물에서 작성자가 저작권 문제를 피하기 위해 이미지의 출처를 언급하는 것을 볼 수 있습니다. 그러나 Dev에서 그러한 이니셔티브는 드뭅니다(또는 많이 보지 못했습니다).
이와 같은 캡션을 추가하고 싶었지만 방법을 몰랐다면 여기 코드가 있습니다.

<figure>
  <img src="graph.jpg">
  <figcaption>Fig.1 - graph.</figcaption>
</figure>

주어진 이미지 URL이 유효한 경우 이와 유사한 출력을 생성해야 합니다.

그림 1 - 반응에 대한 라인 차트



다음 포스팅에 조금 더 도움이 되었으면 합니다. 누군가가 말했기 때문에,

Varity is the spice of life

자, 많은 분들이 궁금하실 텐데요. Raw CSS도 사용할 수 있다면 얼마나 좋을까요?

내가 적용할 수 있는 더 흥미로운 꿀팁을 알고 있다면 댓글 섹션에 알려주세요. 그때까지
행복한 코딩