블로그 글 꾸미기
목차
블로그 글 꾸미기 #
블로깅은 글쓰는 즐거움도 느낄 수 있게 해주지만, 깔끔하고 예쁘게 만들어진 글 자체를 보는 희열은 블로깅을 계속하게 하는 원동력이 아닐까 생각합니다.
이 글은 블로그에서 글을 쓸 때 사용할 수 있는 몇가지 팁을 공개하여, 제가 느낀 느낌을 여러분과 공유하기 위한 목적으로 쓰여졌습니다.
Hero 이미지 #
Hero 이미지는 카드형 목록에서 썸네일 역할을 하거나, 본문 상단에 출력되는 이미지 입니다.
다음은 카드형 목록에 출력된 예시입니다.
다음은 본문 상단에 Hero 이미지가 출력된 예시입니다.
Hero 이미지 구현은 매우 간단합니다.
여러분이 글을 쓴 디렉터리(Page Bundle) 에 이미지 파일을 넣으시고, featured.jpg 또는 featured.png 로 이름을 바꿔주시면 됩니다.
아마 아래와 같은 형태가 되지 않을까 싶네요.
Typora 팁 #
Markdown 고유 기능을 이용한 꾸미기 방법을 소개합니다.
단어 하이라이트 #
단어를 강조하기 위해 따옴표와 같은 문장 부호를 사용하기 보다 Markdown 의 하이라이트 기능을 이용하시는 것이 좋습니다.
다음은 단어 하이라이트를 적용한 예시 입니다.
이 기능은 Markdown 고유 기능이므로 Typora 에 있는 편집 기능을 이용하여 적용할 수 있습니다.
Typora 에서 강조하고 싶은 문서열을 선택하세요. 마우스 우클릭하시면 아래와 같은 메뉴가 나타납니다. 빨간색 상자로 표시된 코드 메뉴를 선택하세요.
다음과 같이 Typora 내에서도 해당 문자열이 하이라이트 된 것을 확인하실 수 있습니다.
코드펜스 #
기술 블로그에 올라오는 글들은 소스코드 예제들을 담고 있는 경우가 많습니다.
다음과 같이 소스코드를 표현할 수 있는데, 이를 코드펜스 라 부릅니다. 코드펜스 가 구현된 예시는 아래와 같습니다.
코드펜스 기능 또한 Markdown 의 기본 기능이라 Typora 의 기능을 이용하실 수 있습니다.
Typora 에서 본문 > 코드 펜스 메뉴를 선택하시면 소스코드를 넣을 수 있는 영역이 생깁니다. 그곳에 소스코드를 넣으시면, 예시와 같은 형태로 표현됩니다.
만들어진 코드펜스의 우측 하단에 해당 소스코드가 어떤 언어인지를 표시할 수 있는 기능이 있습니다. 소스코드의 표현언어를 정확하게 지정해주면 보다 예쁜 소스 코드를 보실 수 있습니다.
Hugo Shortcode #
Shortcode 는 미리 정의된 HTML 템플릿입니다.
Hugo 에서 기본 제공하는 Shortcode 뿐만 아니라, 테마에서 제공하는 Shortcode 들도 있으며, 심지어 우리가 직접 만들어 넣을 수도 있습니다.
이 글에서는 대표적인 Shortcode 들만 소개하며, 사용할 수 있는 자세한 Shortcode 목록은 참고자료에 있는 링크 페이지를 참조하세요.
경고문 #
다음은 alert shortcode 를 이용하여 경고문을 구현한 예 입니다. 경고문은 alert shortcode 의 기본형입니다.
위 예시를 구현하려면 본문 내에 다음과 같은 내용을 추가하면 됩니다.
{{< alert >}}
**Warning!** This action is destructive!
{{< /alert >}}
정보 #
다음은 alert shortcode 를 이용하여 정보을 구현한 예 입니다.
위 예시를 구현하려면 본문 내에 다음과 같은 내용을 추가하면 됩니다.
{{< alert icon="circle-info" >}}
**주목!** 이것은 정보 입니다.
{{< /alert >}}
경고문과 다른 점은 icon 속성에 circle-info 라는 아이콘이 지정되었다는 것입니다.
사용할 수 있는 아이콘의 종류는 아이콘 목록 에서 확인할 수 있습니다.