GitHub 블로그 테마 이주 #5 - 커스터마이징 (Part 2)

이 글에서는 사이트를 운용하는 목적에 맞게 UI 설정을 조정한 기록을 담고 있습니다. 그 중에서도 주로 SCSS/CSS/HTML 수정이 필요한 부분을 담았습니다.

비슷한 용도로 수정이 필요한 분들에게 도움이 되면 좋겠습니다.

관련글
테스트 서버 구성
기존 데이터 복사
사이트 설정
커스터마이징 (Part 1)
커스터마이징 (Part 2)
운영 사이트에 반영
테스트 사이트의 수정 사항 일괄 반영

페이지 하단 소셜 링크와 저작권 표시 변경하기

페이지 하단에 여러 소셜 링크와 RSS 피드, 그리고 저작권이 표시됩니다. 소셜 링크에 대한 설정은 _config.yml에 있습니다.

소셜 링크 관련 부분은 _includes/footer.html에서 생성합니다. 제 경우에는 저작권만 남기고 싶습니다. 소셜 링크와 관련한 부분은 (이후에 다시 살리고 싶은 경우가 있으니) 코멘트 처리하고, 저작권 문구는 수정하였습니다.

앞서 _config.yml에서 설정한 site_name을 여기서 사용하고 있습니다.

저적권과 관련하여 사이트명이 들어가는 부분은 site.title 변수를 이용하였습니다.

<div class="page__footer-copyright">{{ site.title }}에서 제공하는 금융 정보는 투자 참고사항이며, 오류가 발생하거나 지연될 수 있습니다. {{ site.title}}는 제공된 정보에 의한 투자 결과에 법적인 책임을 지지 않습니다. &copy; {{ site.time | date: '%Y' }} {{ site.name | default: site.title }}.</div>

원하는대로 문구가 수정되었습니다. 향후 위아래 여백을 조금 줄일 필요가 있어 보입니다.

표 내부 글자 크기 조정하기

표 내부 글자의 크기가 작습니다. 특히 모바일에서는 글자를 읽기 어려울 정도로 작게 표시됩니다. 표가 전반적으로 깔끔하긴 합니다만, 많은 데이터를 표시하기에는 여백도 조금 넓은 편입니다.

표에 대한 설정은 _sass/minimal-mistakes/_tables.scss에 있습니다. 기본 글자 크기가 $type-size-6입니다. <h1>, <h2> 태그처럼, 숫자가 커질수록 글자 크기가 작아집니다. 글자 크기를 한 단계 크게 설정해 보겠습니다.

table {
  font-size: $type-size-5;
  border-collapse: collapse;
  overflow-x: auto;

  & + table {
    margin-top: 1em;
  }
}

글자 크기를 $type-size-6에서 $type-size-5로 한 단계 키웠더니, 이번에는 예상보다 커졌습니다. 표 위에 있는 인용문의 글자인 최근 7일 DART 신규 공시 보다는 조금 작은 크기의 글자로 설정하고 싶습니다.

글자 크기 설정은 _sass/minimal-mistakes/_variables.scss에 있습니다. $type-size-5가 16px이고, $type-size-6이 12px입니다. 중간 정도 크기인 14px 정도인 $type-size-55를 새로 정의하고, 표의 글자 크기로 지정했습니다.

px 단위를 em 단위로 변환하는 것을 EX <-> EM 변환하기를 이용하면 됩니다.

$type-size-5: 1em !default; // ~16px
$type-size-55: 0.875em !default; // ~14px
$type-size-6: 0.75em !default; // ~12px

아직 조금 작은 것 같기는 합니다만, 이전보다는 나아졌습니다.

하지만 표가 여전히 복잡합니다. 밑줄을 없애야 깔끔하게 보일 듯 합니다. 여백도 넓어서 조금 조정할 필요가 있을 듯 합니다. 제목행을 제외한 나머지 행이 모두 흰색 바탕이라 눈에 잘 들어오지 않습니다.

표 짝수행마다 배경색 넣기

짝수행(제목행은 제외되며 따로 설정 가능합니다)마다 엷은 회색 배경색을 입히겠습니다. _sass/minimal-mistakes/_tables.scss을 수정하면 됩니다.

// Custom setting (even row color)
tr:nth-child(even) {
  background-color: #f6f6f6;
}

표 내부 링크 밑줄 없애기

제목행에도 비슷한 회색의 배경이 있고, 행마다 칸이 명확하게 구분되어 있어서 그런지 왠지 이전보다 더 난잡해 보입니다. 배경색을 조금 더 연하게 설정하고 밑줄도 없애겠습니다.

tr:nth-child(even) {
  background-color: #fafafa;
}

tr,
td,
th {
  a {
    text-decoration: none;
  }
}

이전보다 깔끔해 졌습니다.

표를 화면에 꽉 차게 표시

우측에 여백이 충분히 남아 있는 경우에도 표가 왼쪽으로 딱 불어서 표시되고 있습니다. 표 하나만 보면 깔끔합니다만, 위아래 다른 내용 특히 다른 표와 함께 보면 어색하게 느껴집니다.

표를 화면 좌우로 꽉차게 표시하기 위해서는 _sass/minimal-mistakes/_tables.css에서 table의 display 속성을 table로 바꾸어주면 됩니다. 기본 설정은 block입니다.

table {
  display: table;

표 내부에 내용이 별로 없는 경우 좀 어색하긴 합니다만, 모든 표를 동일한 폭으로 보여주는 것이 조금 더 나은 듯 합니다.

인용구 이탤릭 표시 제거하기

소제목으로 인용구를 쓰고 있습니다. 이런 용도로는 제목 2나 제목 3을 쓰는 것이 적절합니다. 제 경우에는 인용구 본래 목적은 아니지만, 인용구가 표시될 때 나타나는 왼쪽 막대가 보기 좋아서 소제목용으로 사용하고 있었습니다.

한글의 경우 영문과는 달리 이탤릭으로 글자를 표기하면 어색한 경우가 많습니다. 인용구에서 이탤릭으로 표시되는 부분은 _sass/minimal-mistakes/_base.scss에 정의되어 있습니다. 해당 파일에서 blockquote의 스타일을 수정하면 됩니다.

blockquote {
  font-style: normal;

  cite {
    font-style: normal;
  }
}

일반 글자로 변경되었습니다.

각주 글자 크기 조정하기

Alembic은 각주의 글자 크기가 큰 편입니다. 각주가 많아지면, 페이지가 불필요하게 길어지기에, 글자 크기를 <small> 태그로 줄여서사용했습니다 . 이에 비해 Minimal Mistakes는 각주 글자가 큰 편이 아니라서, 각주를 쓸 때 붙였던 <small> 태그를 모두 제거했습니다.

[^fn_update]: <small>장 마감 후 두어시간 이내 업데이트를 목표로 하지만, 상황에 따라서는 지연될 수 있습니다.</small>

[^fn_update]: 장 마감 후 두어시간 이내 업데이트를 목표로 하지만, 상황에 따라서는 지연될 수 있습니다.

각주를 어떻게 쓰느냐에 따라 다르겠지만, 제 경우에는 모든 각주를 하나의 파일에 모아 두었습니다. 동일한 내용의 각주를 여러 곳에서 참조하는 경우가 많기 때문입니다.

각주 파일은 _include 디렉토리안에 두면 됩니다. 제 경우 _include/commons/footnotes.md라는 각주만 담는 파일을 하나 만들었습니다.

MD 문서를 작성할 때 각주가 필요하면 각주 마크만 달고, 맨 아래에 include 문장을 씁니다. 그리고 각주 파일에는 해당 각주에 대한 내용을 적습니다.

각주가 필요한 내용[^각주]
...

{% include commons/footnotes.md %}

[^각주]: 이것은 각주입니다.

각주를 빈번히 사용하지 않거나, 재사용하는 경우가 드물다면, 문서내에 각주를 두는 것이 낫습니다.

리스트 불릿(bullet) 없애기

어떤 정보는 항목마다 <li> 태그를 붙여 리스트 형태로 표시됩니다. 항목앞에 작은 동그라미가 붙는데 이를 불릿이라 합니다. 불릿은 항목을 명확하게 구분하기 위해 사용합니다.

제 경우에는 항목 앞에 작은 제목(아래 그림에서는 코스피 200, 코스닥 150)이 붙어 있어 불릿이 그다지 유용하지 않습니다. 또한 불릿은 어느 정도 자리가 필요하기에, 공간이 부족한 모바일에서는 없애는 것이 나을 수 있습니다.

불릿을 제거하기 위해서는 li의 line-style-type을 none으로 지정하면 됩니다.

ul li {
  list-style-type: none;
}

리스트 왼쪽 마진 조정하기

블릿은 사라졌지만, 항목은 제자리에 그대로 있습니다. 이는 불릿이 항목 기준으로 마이너스 위치로 정의되기 때문입니다.

목록을 왼쪽으로 좀 더 옮기기 위해서는 <li>의 상위 태그인 <ul>의 왼쪽 패딩(padding-left)를 조정해 주면 됩니다. 기본 40px로 되어 있는 것을 좀 줄여서 1.25em(20px)로 설정해 보겠습니다.

ul {
  padding-left: 1.25em;
}

왼쪽 패딩을 조정하고 나니 깔끔해졌습니다.

각주 왼쪽 마진 조정하기

각주도 이와 비슷한 문제가 있습니다. 각주의 경우 순서대로 붙은 번호가 의미가 있기에 불릿은 제거할 수 없습니다. 하지만 <ul>와 마찬가지로 왼쪽 여백이 많은 편입니다.

각주는 꼭 필요한 정보라 보기 어렵기에, 작은 글자로 공간을 잘 활용하는 것이 좋습니다.

각주의 왼쪽 여백은 _sass/minimal-mistake/_utilities.scss에 정의된 .footnote안에 있는 ol의 padding-left를 동일한 방식으로 설정하면 됩니다.

.footnotes {
  ol {
    padding-left: 1.25em;
  }
}

왼쪽 여백이 줄어들어 이전보다 공간 활용도가 높아졌습니다.