인라인 코드블럭, 코드 강조, 코드 박스처리

인라인 코드블럭

이것을 보세요

위와 같은 강조 방법은 인라인 코드블럭을 사용한 방법입니다.

티스토리에서 인라인 코드블럭 방법을 사용하는 방법을 알아봅시다.

에디터에서 기본모드 화살표버튼을 누르시면, 마크다운과 HTML 이 있습니다.

 

HTML

첫번째로 HTML 을 이용해보겠습니다.

<code></code> 태그로 원하는 내용을 감싸서 사용할 수 있습니다.

<code>inline codeblock</code>

 

Markdown

두번째로는 마크다운을 이용해보겠습니다.

` ` (backtick이라 읽음) 사이에 원하는 내용을 감싸서 사용할 수 있습니다.

이 방법은 결국 글이 등록되는 순간 위 html 의 code 태그 형태로 바뀌게 됩니다.

 

블럭 디자인

이제 이 코드 블럭을 디자인 해봅시다.

간단하게 css 설정을 하는 것이 좋아보입니다.

티스토리 관리자 메뉴에서 스킨편집 > HTML 편집에 가신 후 CSS 탭을 클릭하세요.

code 태그의 css 설정을 봅시다.

 

code {
    padding: 0.25rem;
    background-color: #F1F1F1;
    border-radius: 5px;
    font-family: "Consolas", "Sans Mono", "Courier", "monospace";
    font-size: 0.75rem;
}

저 같은 경우는 이렇게 꾸며져 있습니다.

패딩, 배경색, 경계를 둥글게, 폰트, 폰트크기, ... 등등을 개인적으로 설정해서 꾸며보시기 바랍니다.