[GitHub Blog]깃허브 블로그 만들기 - 인용블록(blockquote)

10 Aug 2023 - juno

#github  #blog  #blockquote  #인용블록 


마크다운형식으로 작성된 post에서 인용블록(blockquote)이 생기지 않는 문제 해결

문제

원래 마크다운 언어에서 > 를 사용하면 인용 블록이 생긴다.

image

하지만 내 블로그 게시글에는 그게 나타나지 않는 현상이 발생했다.

image

위 사진은 > 를 사용하여 작성한 부분인데 아무런 인용블록의 표시가 없음을 알 수 있다.

원인

인용블록이 나오는 다른 사이트에서 페이지소스를 살펴보니(velog를 참고했다.)

Pasted Graphic 11

blockquote 라는 테그를 사용하여 인용블록을 표현함을 알 수 있었다.

image

그리고 그 테그에 대한 css를 추가하여 사용 하고 있음을 확인했다.

나는 blockquote 테그에 대한 css를 추가해 주지 않아서 기본 css가 적용되어 있기 때문에 인용블록이 적용되지 않은 것 처럼 보였던 것이다.

해결방법

해결방법은 간단하다 blockquote 테그에 대한 css를 추가해주면 된다.

_sass/main.scss

Pasted Graphic 15

blockquote 테그에 대한 css 를 추가해줬다.

image

인용 블록에 css가 적용되어 정상적으로 표현됨을 확인 할 수 있다.