티스토리 인라인 코드 커스텀(2) 인라인 코드 노션 처럼 바꾸기

이전 글에서 티스토리의 인라인코드를 기본 모드에서도 쉽게 사용할 수 있도록 바꾸었습니다.

하지만 인라인 코드 자체가 노션에 비해 너무 밋밋한 느낌이 있어서 이번 글에서는 인라인 코드의 스타일을 커스텀하여 노션의 인라인 코드와 비슷한 느낌으로 바꿔보겠습니다.

 

---

적용하기

이번에도 방법은 아주 간단합니다. 인라인 코드는 <code> 태그를 사용하기 때문에 <code> 태그에 대한 CSS값을 설정해 주면 됩니다!

 

• 블로그 관리> 스킨 편집에 들어가서 html편집으로 들어갑니다.

 

 

• CSS 설정을 추가할 것이기 때문에 CSS창으로 가서 Ctrl + F를 이용해 code 태그를 찾아줍니다.

 

 

• 저는 code태그가 다른 태그들과 함께 있는데 code에 스타일만 바꿔줄 것이기 때문에 여기에서 code를 지우고 아래와 같이 밑에다가 새로 정의해 줍니다.

 

• 저장까지 완료하면 끝입니다

 

복붙이 필요한 분들을 위해서 아래에 코드도 적어두겠습니다. 저는 `이렇게` 바꾸었는데 여러 값들을 바꾸어 보면서 마음에 드는 스타일로 커스텀하여 사용하시면 됩니다! 

code{
    font-family: 'Courier New', Courier, monospace;
    font-size: 100%;
    font-weight: bold;
    padding: 2px 4px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 4px;
    color:rgb(277, 86, 86);
}