타이포라에서 이모지를 사용하고 깃블로그에서 확인하면 이모지가 깨져서 들어가는 현상이 발생!

사실 이모지 사이트 같은데서 붙여넣는건 사진으로 인식을 해서인지..? 그거는 깨지지 않고 잘 들어간다.

하지만 일일이 복사하는건 너무 힘들다..ㅜ

이를 해결하기 위해서 Jekyll 기반 블로그에서 이모지를 사용하는 방법을 배워본다!

깃(github) 블로그에서 이모지 사용하기

사실 깃 블로그라고 했지만 Jekyll 기반 블로그면 다 적용 가능합니다

Jekyll 플러그인 중 jemoji 라는 것을 이용하면 쉽게 해결 가능합니다. 각자 블로그에 사용하는 테마에 따라서 방법이 달라지긴 합니다.

대부분은 minimal mistake를 사용하시기도 하고.. 크게 방식은 다르지 않으므로 동일하게 하시면 됩니다.

1.config.yml 파일에 플러그인 추가

아래와 같이 config.yml 파일에서 plugins 부분에 jemoji를 추가합니다.

plugins:
	- jemoji

2.Gemfile 파일에 추가

아래의 코드를 Gemfile에 추가합니다.

gem "jemoji"  # 이모지

3. 종속성 설치

bundle install 명령어를 실행하여 jemoji 플러그인을 설치합니다.

bundle install

이제 확인해 보시면 이모지가 정상적으로 뜨는것을 확인하실 수 있습니다.

추가..

이모지가 깨지지 않고 잘 보이기는 하지만..

이렇게 이모지가 한 줄을 차지하는 현상이 발생한다…

너무 보기 싫기 때문에 css 코드를 추가하여 해결한다!

CSS 수정

이모지가 줄바꿈되지 않도록 CSS를 수정한다. 아래의 CSS 코드를 추가하여 이모지의 스타일을 수정할 수 있도록 한다.

_includes/head.html 파일 수정

<style>
  .emoji {
    display: inline !important;
    height: 1em;
    width: 1em;
    margin: 0 .05em 0 .1em;
    vertical-align: -0.1em;
  }
</style>

위치는 아무 곳에 넣어도 상관없지만 보기 좋게 html 코드 윗 부분에 추가했다.

해당 코드만 추가하면 이제 정상적으로 이모지가 보인다! 🎉🎉🎉