Notice 클래스 활용하기

관련 커밋: 링크

목표

나는 정의, 명제, 예시 등등 많은 블록을 만들어야 하므로 이들을 추가할 필요가 있었다. 또, 폰트 수정 포스트에서도 언급했듯 한글 강조를 위한 태그 <em_ko>를 새로 만들기로 하였다. 대부분의 경우 이렇게 태그를 새로 만들기보다는 <span class="em_ko">와 같이 하는 것이 좋다고는 들었는데, 나는 마크다운 파일을 읽을 때에도 흐름이 끊기지 않게 하고싶었기 때문에 HTML 태그를 인라인에서 저렇게 길게 입력하는 것은 선택지가 아니었다.

notice 박스 추가

우선 블록들은 _sass/minimal-mistakes/_notices.scss에서 수정할 수 있다. 기본 알림은 다음의 코드

/* Warning notice */

.notice--warning {
  @include notice($warning-color);
}

로 정의되며, 마크다운에서

알림
{: .notice--warning}

를 입력하면

알림

과 같이 나온다. 간혹 여러 줄이 필요할 때는

<div class="notice--warning" markdown="1">
한 줄

두 줄
</div>

과 같이 입력하면

한 줄

두 줄

이 된다. 태그 markdown="1"은 div 안에서 markdown을 사용하겠다는 의미이다. 이들 박스의 색상은 우선 _variables.scss에서 기본값이 주어지며, 로드해 온 스킨에서 이들 색상을 지정해줬다면 우선적으로 스킨의 색상이 적용된다.

따라서 나는 _notices.scss 파일에 다음과 같이 새로운 코드를 추가하여 definition 클래스가 정의되도록 하였고,

/* Personal notice settings */

.definition {
  @include notice($definition-color);
}

새로 만드는 스킨 _custom.scss에 이들 클래스에 대한 색상을 지정해주었다.

/* Math notice colors */
$definition-color: #b2dfdb !default;                              //  Teal 100
$proposition-color: #c5cae9 !default;                             //  Indigo 100
$proof-color: #cfd8dc !default;                                   //  Blue Grey 100
$example-color: #c8e6c9 !default;                                 //  Green 100
$remark-color: #f8bbd0 !default;                                  //  Pink 100
$misc-color: #d4ccc8 !default;                                    //  Grey 400
$spoiler-color: #ff4301 !default;

마지막으로, 나중에 스킨을 바꿨을 때 위의 색상들이 없어도 오류가 생기지 않도록¹ 똑같은 코드를 _variables.scss에도 복사해놓았다. 위의 코드로 얻어지는 상자는 다음과 같다.

정의 상자

추가적으로, 시작부분에 달아주는 넘버링이 정리, 혹은 정의의 내용과 멀리 떨어져 있도록 하기 위해서 _base.scss의 ins태그 관련 부분을 다음과 같이 수정했다.

u,
ins {
  text-decoration: none;
  border-bottom: 2px solid $text-color;
  margin-right: 1em;
  padding-left: .1em;
  padding-right: .1em;
  a {
    color: inherit;
  }
}

이제 정의를 적을 때, 다음과 같이 적을 수 있게 되었다.

정의 이것은 정의이다.

특별히 증명의 경우, <details> 태그를 이용하여 증명을 접었다 펼 수 있게 했다. <summary> 태그로 증명이 접혀있을 때에도 증명이란 단어가 보이도록 할 수 있는데, 일반 글씨체로 적혀있으면 쉽게 지나칠 수 있을 것 같아 이탤릭체로 강조하였다.

한글/영문명 병기

수학 공부를 하다보면 한글용어와 영문용어가 많이 섞여있는데, 처음 용어를 정의할 때에는 영문 용어와 한글 용어를 모두 소개하는 것이 바람직할 것이라 생각했다.

이를 위해 정의를 내릴 때 HTML의 <sub> 태그를 사용하기로 하고 다음과 같은 코드를 역시 _base.scss에 추가하였다.

sub {
    font-size: .6em;
    color: #9e9e9e;
}

이제 정의에서 다음과 같은 모양을 만들 수 있게 되었다.

정의 이것은 정의_definition이다.

한글 강조 태그 작성

위에서도 언급했듯 한글을 강조하기 위해 <em_ko> 태그를 추가하였다. 한글 강조를 위한 폰트는 이미 폰트 수정을 할 때 추가해두었으니, _base.scss 파일에서 해당 태그에 대한 스타일만 지정해주면 된다.

em_ko {
  font-family: "MyEmphFont";
  font-size: 1.05em;
  vertical-align: -.1em;
}

강조 폰트와 그렇지 않은 폰트가 서로 다른 폰트이다보니, 폰트 크기나 폰트의 수직방향 정렬이 잘 맞지 않아 미세하게 조정을 해 주었다.

기타 태그 수정

그 외에 여러 태그를 추가했다. 그림을 넣고 난 다음 사용할 caption도 추가했고, blockquote의 경우에도 약간 수정을 하였다.

---

1. 실험 결과, 위의 색상들이 없으면 오류는 생기지 않지만 색상 없는 박스가 출력되는 것을 확인했다. ↩