[티스토리][JS]코드블럭 VSCode처럼 꾸미기(6)_적용하기

오늘 할 내용 및 서론

지난 시간에 만들었던 CSS를 이용해 직접 티스토리 사이트에 적용해 보도록 하자.

 

codehead의 HTML 코드

우리는 지난 시간에, 기존의 코드블럭부분의 위에다 codehead(신호등 부분)을 붙이는 방식으로 방향을 잡았었다.

 

디자인 개요

위 이미지를 바탕으로 수정하게 된다면, 아래의 코드(codehead)가 기존 코드의 윗부분, 즉 앞부분에 붙을 것이다.

<div class="codehead">
    <div class="redbtn"></div>
    <div class="yellowbtn"></div>
    <div class="greenbtn"></div>
</div>

 

 

 

HTML수정하기(JavaScript 이용)

 

이제 codehead 부분이 완성되었으니, 이를 기존의 코드블럭 앞부분에 붙여줄 차례이다.

 

HTML의 코드를 바꾸기 위해서는 요소.outerHTML 을 통해 수정이 가능하다.

(요소.outerHTML 은 해당하는 요소의 태그 값을 전부 가져온다. 반대로 innerHTML은 해당요소를 제외한 내부의 태그만을 가져온다.)

 

HTML을 수정하기 위해서는 해당하는 요소를 찾아야 하는데, 해당하는 요소는 이미 지난 글에서 다루었으므로 만약 기억이 잘 나지 않는다면 아래 글을 참고 바란다.

2023.05.04 - [프로그래밍] - [티스토리][JS]코드블럭 VSCode처럼 꾸미기(3)_요소찾기 오류 발생 및 해결

[티스토리][JS]코드블럭 VSCode처럼 꾸미기(3)_요소찾기 오류 발생 및 해결

 

코드블럭에 해당하는 요소들을 찾고, 찾은 각 요소(코드블럭)에 codehead를 붙여주는 작업을 해주는 코드다.

const codeBlocks = document.querySelectorAll('pre > code');//pre > code 전부 가져오기

const codeHeader = `
<div class="codehead">
    <div class="redbtn"></div>
    <div class="yellowbtn"></div>
    <div class="greenbtn"></div>
</div>`;

for(const codeBlock of codeBlocks){ //CodeBlock은 각각의 코드블럭 하나 의미
    codeBlock.innerHTML = codeHeader + codeBlock;
}

적용 및 결과물 확인

이제 만든 결과물을 확인하기 위해 적용할 차례이다.

적용하기 위해서는 바로 위의 해당 코드를 자바스크립트 파일(.js)로 저장 후, 올려주고 html에 불러와주면 된다.

 

자바스크립트 파일은  아래 그림과 같이 Tistory 관리자 페이지> 꾸미기 > 스킨편집 > html편집 > 파일업로드에서 올려주면 된다.

 

JavaScript 파일 올리는 방법

 

 

올린 자바스크립트파일을 웹사이트에 적용하기 위해서는 Tistory 관리자 페이지> 꾸미기 > 스킨편집 > html 편집 > HTML에서

</body> 태그 앞부분에  <script src="./images/mycodeblock.js" defer></script> 를 넣어주면 된다.

(mycodeblock.js는 내가 올린 자바스크립트 파일의 이름이다)

 

JavaScript 파일 적용하는 방법

 

결과물을 확인해 보면 다음과 같다.

수정된 티스토리 코드블럭1

수정된 티스토리 코드블럭2

 

아래 기존 티스토리 코드블럭과 비교하면 디자인과 가독성이 엄청 개선된 것을 확인이 가능하다.

 

기존 티스토리 코드블럭

알게 된 점 및 고찰

오늘은 기존에 만들었던 계획과 작업물들을 코드로 바꾸고 이를 적용하는 작업이었지만 생각보다 힘들었다.

그러나 생각한 대로 결과물이 잘 나와주어 뿌듯했으며 내가 하였던 노력들이 헛된 노력이 아니었다는 생각이 들었다.

 

아직 줄번호 부분은 미처 완성하지 못하였으므로 다음시간에 다루어보도록 할 예정이다.