<div id="readability-page-1" class="page"><div id="site_article">
 Roam Research - Tag CSS 지정
 <div>
 
 22. 02. 17.
 / 22. 02. 17. 
 
 <a href="https://ujuc.github.io/category/develop.html">Develop</a>
 
 
 <a href="https://ujuc.github.io/tag/roam-research.html">roam research</a>
 <a href="https://ujuc.github.io/tag/css.html">css</a>
 <a href="https://ujuc.github.io/tag/note.html">note</a>
 
 </div>
 
 <div>그냥 본론으로 들어가자. 
Roam Research에서는 사용자 CSS를 지원한다. 참 간단하게. 이렇게 간단해도 되나 싶은…
<ol>
<li><code>[[roam/css]]</code> 페이지를 생성한다.<ul>
<li>앞으로 모든 CSS 파일을 수정하는건 여기서 한다.</li>
</ul>
</li>
<li><code>/code block</code>을 선택한다.</li>
<li>언어 선택을 <code>css</code>로 변경해준다.</li>
<li><code>[data-tag="{TAG_NAME}"]</code> CSS를 먹일 태그를 지정해준다.<ul>
<li>앞뒤로 뭔가를 붙일려면 <code>[data-tag={TAG_NAME}"]::before</code>, <code>[data-tag="{TAG_NAME}"]::after</code> 를 이용해서 앞뒤에 특정 내용을 붙일 수 있다.</li>
</ul>
</li>
</ol>
<h3 id="_1">예제</h3>
<img alt="생각 tag 나가기" src="https://ujuc.github.io/img/2022-02-17-roam_tag.png">
<div><pre><code>[data-tag="생각"] {
 color: #1A87C0;
 font-weight: bold;
}

[data-tag="생각"]::after {
 content: "\f090";
 font-family: FontAwesome;
 padding: 0px 2px 0px 4px;
}
</code></pre></div></div>
 

 
 
 <a href="https://www.buymeacoffee.com/8967ktT" target="_blank">
 <img src="https://cdn.buymeacoffee.com/buttons/default-black.png" alt="Buy Me A Coffee">
 </a>


 
 🎗
 </div></div>

잘 밤에 쓸데없는 생각하기...

Thomas Sungjin Kang

그냥 본론으로 들어가자.
[[roam/css]] 페이지를 생성한다.
앞으로 모든 CSS 파일을 수정하는건 여기서 한다.
/code block을 선택한다.
언어 선택을 css로 변경해준다.
[data-tag="{TAG_NAME}"] CSS를 먹일 태그를 지정해준다.
앞뒤로 뭔가를 붙일려면 [data-tag={TAG_NAME}"]::before, [data-tag="{TAG_NAME}"]::after 를 이용해서 앞뒤에 특정 내용을 붙일 수 있다.
예제
[data-tag="생각"] {
  color: #1A87C0;
  font-weight: bold;
}
[data-tag="생각"]::after {
  content: "\f090";
  font-family: FontAwesome;
  padding: 0px 2px 0px 4px;
}

Roam Research - Tag CSS 지정

댓글