코드블럭 줄 번호 1px테두리선 연장하기

티스토리 블로그에서 코드블럭 줄번호 우측의 경계선이 중간에서 끊겨 보이는 문제를 해결하는 방법을 소개합니다. CSS에서 .lnBorder와 .ln 요소에 border-right와 min-height를 지정하면 경계선이 끝까지 연결되도록 수정할 수 있습니다. 코드 길이가 길어질수록 발생하는 미세한 단차도 이 방식으로 보완할 수 있어, 깔끔한 코드블럭 디자인이 가능합니다. ▼

MD

코드블럭

KOREASTORAGE®️

티스토리 블로그의 글쓰기 모드에서 코드 블럭을 작성하여 글쓰기를 완료하면 게시물에 아래의 그림과 같이 출력됩니다. 코드블록이라 밋밋한 느낌이 들어 코드 편집기 스타일처럼 보이도록 바꿔주는 코드와 CSS를 티스토리 블로그 스킨편집에서 html과 CSS를 수정하여 사용하게 됩니다.

 

 

순이네집 티스토리 블로그의 코드블럭은 아래의 블로그를 참조하여 만들었습니다. 코드블럭을 특별하게 꾸며보고 싶으신 분들은 아래의 블로그를 방문하여 그대로 따라 해 보시기 바라겠습니다. 누구나 따라 할 수 있도록 쉽고 자세하게 설명해 주고 있습니다.

티스토리 | 코드블럭 한번에 꾸미기 part 1(복사 버튼, 하이라이트)

 

저도 열심히 따라 하여 코드블럭의 디자인을 잘 바꿔서 사용하고 있었는데 문제가 하나 생겼습니다. 아래 왼쪽 그림과 같이 줄번호 우측의 경계선이 하단 끝까지 그어지지 않고 중간에 잘리는 현상이 발생한 것입니다. 그래서 이 경계선이 아래 오른쪽 그림처럼 하단 끝까지 그어지게 만드는 방법에 대하여 알아보도록 하겠습니다.

 

 

 

코드블럭 CSS 수정하기

 

01

Step01

SMART

IT Tutorial.

상기 블로그에서 알려주는 대로 코드블럭을 디자인하여 코드블럭에 내용을 입력한 상태입니다.

02

Step02

SMART

IT Tutorial.

처음에는 몰랐는데 코드를 아래로 드래그하니까 경계선이 일정한 번호에서 끊어져있습니다.

03

Step03

SMART

IT Tutorial.

블로그 관리로 들어가 꾸미기에서 스킨 편집 > html 편집 > CSS탭을 클릭한 다음 편집창을 마우스로 한번 클릭한 후 Ctrl + F키를 눌러 검색창이 나타나면 pre[data-ke-type='codeblock'] > code .lnBorder {를 입력하면 위치가 자동으로 찾아집니다.

 

pre[data-ke-type='codeblock'] > code .lnBorder {

04

Step04

SMART

IT Tutorial.

찾아진 코드 바로 아래에 있는 코드를 드래그하여 선택하여 하이라이트 시킵니다.

 

pre[data-ke-type='codeblock'] > code .lnBorder {
  z-index: 1;
  top: 0;
  bottom: 0;
  border: 1px solid transparent;
  border-right-color: #ccc;
}

 

05

Step05

pre[data-ke-type='codeblock'] > code .ln,
pre[data-ke-type='codeblock'] > code .lnBorder {
  border-right: 1px solid #ccc !important;
  min-height: 17px;
  box-sizing: border-box;
}

 

SMART

IT Tutorial.

위에 있는 CSS코드를 복사하여 4번에서 드래그하여 선택한 곳에 붙여 넣기 하여 덮어씁니다.

06

Step06

SMART

IT Tutorial.

우측 상단에 있는 적용을 클릭한 다음 스킨 편집이 완료되었다는 안내창이 나타나면 확인을 클릭합니다.

07

Step07

SMART

IT Tutorial.

코드블럭에 입력한 코드의 내용이 아무리 길어도 줄번호 옆의 경계선이 끝까지 표시되는 것을 확인할 수 있습니다.

 

 

코드블럭 CSS 수정 메커니즘

 

1. 문제의 핵심 요약

☑

• 실제 줄번호와 코드의 구조는 다음과 같이 되어 있을 것입니다.
• <pre><code>...</code></pre> 내부에 줄번호와 코드가 각각 span 등으로 분리되어 있을 가능성이 높습니다.
• 문제는 줄번호 우측의 1픽셀 테두리(선)가 24번째 줄에서 끊긴다는 점입니다.

2. 문제의 실제 원인과 해결법

☑

코드블럭에서 줄번호가 각 줄마다 <span class="ln">1</span> 형태로 생성되는 구조라면, border-right를 줄번호에 직접 적용하여 전체적으로 선을 이어 보이게 할 수 있지만, 아주 긴 코드에서는 줄마다 미세한 단차로 선이 끊겨 보일 수 있습니다. 코드 전체에 선을 완전히 잇고 싶다면 .lnBorder 등 별도의 레이어를 전체에 한 번만 두는 구조가 필요하지만, 구조상 어렵다면 줄번호에 border-right와 min-height를 지정하는 것이 현실적인 방법입니다. 만약 이런 방식으로도 끊어짐이 해결되지 않는다면, 브라우저 개발자도구에서 코드블럭의 실제 HTML 구조를 복사해 알려주면 정확한 CSS 해결책을 제시할 수 있습니다.

 

Code block

🗹

지금까지 코드블럭의 줄번호 우측 경계선이 끊어지는 현상을 끝까지 이어지도록 복구하는 방법에 대하여 알아보았습니다. 티스토리 블로그는 html을 자유롭게 편집할 수 있어 디자인하기에 매우 적절한 것 같습니다. 다시 한번 정리하자면 아래의 내용이 핵심이 핵심이 되겠습니다.

1. 줄번호 span에 border-right를 직접 적용한다.

2. 끊어짐이 있다면 min-height 등으로 줄높이를 고정한다.

 

티스토리 블로그 수정

티스토리 블로그를 수정하거나 새로운 유닛을 설치하여 블로그를 꾸며보고 싶다면 아래의 블로그를 방문해 보시기 바랍니다. 저도 블로그 처음 시작하여 이 블로그의 도움을 많이 받고있습니다.

 

 

리디바탕체 티스토리 블로그에 적용하기

메타 디스크립션(meta description) 티스토리 블로그 SEO

 

 

 

 

맨 위로 ▲