tag 사용하기

1. tag

1.1 capture를 사용해 문자열을 변수에 저장

{ % capture notice-2 %}  <!--notice-2 라는 변수에 다음 텍스트 문단을 문자열로 저장한다.-->
* You can now have cover images on blog pages
* Drafts will now auto-save while writing
{ % endcapture %}  <!--캡처 끝! 여기까지의 텍스트를 변수에 저장-->

<div class="notice">
  { { notice-2 | markdownify }} <!--div 태그 사이에 notice-2 객체를 출력하되 markdownify 한다. 즉 마크다운 화-->
</div>

• You can now have cover images on blog pages
• Drafts will now auto-save while writing

1.2 minimal-mistakes 테마의 notice 기능 사용하기

<div class="notice">
  <h4>Message</h4>
  <p>A basic message.</p>
</div>

Message

A basic message.

<div class="notice--primary">
  <h4>Message</h4>
  <p>A basic message.</p>
</div>

Message

A primary message.

<div class="notice--primary" markdown="1">
    ```c++
    std::cout << "Hello. World! >> std::endl;
    ``` 
</div>

std::cout << "Hello. World! >> std::endl;

Notice Type	Class
Default	.notice
Primary	.notice–primary
Info	.notice–info
Warning	.notice–warning
Success	.notice–success
Danger	.notice–danger

1.3 글자색 변경하기

<span style="color:red">red</span>  

red

<span style="color:#d3d3d3">#d3d3d3</span>  

#d3d3d3

<span style="color:rgb(245, 235, 13)">rgb(245, 235, 13)</span>  

rgb(245, 235, 13)

1.4 토글 리스트 (접기/펼치기)

<details>
<summary><font size="3">여기를 눌러주세요</font></summary>
<div markdown="1">       

😎숨겨진 내용😎

</div>
</details>

여기를 눌러주세요

😎숨겨진 내용😎

1.5 버튼

링크 부분을 #으로 두면 페이지 맨 위로 이동

<font size="4">
<a href="#" class="btn--success">Success Button</a>
</font>

Success Button

[Default Button](#){: .btn .btn--primary }

Default Button