(티스토리) 포스팅에 인라인 코드블럭(inline code block) 적용 방법 및 팁!

티스토리에서 블로깅을 하다 보면 다음과 같은 코드들을 볼 수 있는데, 이게 코드 블럭도 아니고 그렇다고 텍스트도 아닌 신기한 박스를 보신 적이 있으실 거예요. 이 박스가 바로 인라인 코드블럭(inline code block) 이라는 네이밍을 한 요소입니다.

오늘은 인라인 코드블럭을 티스토리에서 사용하는 방법에대해 알아보겠습니다.

인라인 코드블럭 사용방법

위와 같이 코드를 강조하는 방법인 인라인 코드블럭을 사용하기 위해서는 에디터의 기본모드가 아닌 마크다운 또는 HTML에서 사용해야만 합니다. 각각의 사용법과 편의성이 다르니 하나씩 알아보도록 하죠!

HTML

HTML 편집기에서는 원하는 텍스트 앞과 뒤에 <code>와 </code>로 감싸주면 인라인 코드블럭을 사용할 수 있습니다.

<code>inline codeblock</code>

저는 주로 HTML 편집 모드에서 인라인 코드블럭을 설정해주는데, 한번에 인라인 코드블럭을 쉽게 설정해주는 방법에 대해서는 아래에서 자세히 알려드릴게요.

마크다운

마크다운은 ` `  (backtick)을 사용하는데 마찬가지로 텍스트 앞과 뒤에 `와 `로 감싸주면 인라인 코드블럭을 사용할 수 있습니다.

 

주의해야 할 점은 ` 를 키보드에서 입력하면 ₩으로 나오게 되는데 반드시 영문 키보드로 전환 후 ` 를 입력하셔야 합니다.

//마크다운

`inline codeblock`

사실 HTML보다 더 쉬운 방법이라 이 방법을 선호하는 분들도 계시는데, 마크다운을 사용하면 기본 모드에서 사용한 글 형태가 바뀔 수 있습니다. 이 때문에 저는 마크다운보다 HTML모드에서 설정해주는 것을 선호합니다.

HTML로 인라인 코드블럭 일괄 적용하는 방법

사실 이건 저만의 방법인데, 이보다 쉬운 방법을 찾지 못하여 이 방법이 기본 모드에선 최선의 방법이지 않을까 싶습니다.

 

첫 번째, 글을 모드 작성 후 원하는 텍스트를Ctrl + U로 밑줄을 쳐준다.

 

두 번째, HTML 모드로 변경 후 Alt + A와 Ctrl + C로 모두 복사해준다.

 

세 번째, 한글 또는 워드 혹은 메모장에서 ('대치' 기능을 지원하는 응용프로그램 아무거나) 찾기 Ctrl + F를 누르고 대치를 클릭한 후 찾을 텍스트에는 <u>를 대치할 텍스트에는 <code>를 입력하고 바꿔준다. 그리고 </u>와 </code>를 대치시킨 후, 모두 복사해서 HTML 모드에 붙여 넣어준다.

왜 밑줄을 사용하냐면.. 기본 모드에는 <code>를 넣을 수 있는 단축키가 존재하지 않습니다. 밑줄 말고 단축키가 있는 것은 모두 사용 가능하니, 원하는 단축키로 정해서 유용하게 사용하시면 됩니다.

인라인 코드 블럭 디자인 변경

인라인 코드블럭의 디자인 또한 변경 가능합니다. 스킨 편집의 CSS부분으로 가서 code를 검색하시면 그 안에 스타일 코드가 있는데, 만약 없으시다면 아래와 같이 직접 스타일을 변경할 수 있습니다.

code {
    padding: 0.25rem;
    background-color: #f0f0f0;
    border: 1px solid #dadada;
    color: #d07d7d;
    border-radius: 5px;
    font-size: 0.9rem;
    line-height: 1.1rem;
    margin: 0 5px;
}

사용자의 스킨에 따라 알맞게 설정해주시면 됩니다 :)

---

이렇게 오늘은 포스팅에 인라인 코드블럭 적용하는 방법 및 쉽게 일괄 적용하는 방법에 대해 알아보았습니다. 인라인 코드블럭 CSS 디자인 부분을 수정하시다가 어려운 부분이 있으시면 언제든 댓글 남겨주세요.

 

읽어주셔서 감사합니다🤟