[티스토리][JS]코드블럭 VSCode처럼 꾸미기(5)_CSS스타일 만들기

오늘 할 내용 및 서론

저번시간에 분석했던 디자인을 실제 코드로 옮기는 과정 중 하나인 CSS작성을 진행해 보도록 하자.

 

먼저, 아래의 글에서 우리는 코드블럭이 pre> code 부분에 해당한다는 사실을 알아냈었다.

(또한 pre의 클래스는 사용언어의 종류, code의 클래스는 hljs 인 것도 확인이 가능했다)

해당하는 부분의 CSS 스타일은 어떻게 구성되어 있는지 확인해 보자.

 

2023.05.03 - [프로그래밍] - [티스토리][JS]코드블럭 VSCode처럼 꾸미기(2)_코드블럭분석하기

[티스토리][JS]코드블럭 VSCode처럼 꾸미기(2)_코드블럭분석하기

 

CSS스타일은 Tistory 관리자페이지에서 꾸미기 > 스킨편집 > html 편집 > CSS에서 확인이 가능하다.

 

코드 블록 부분에 해당하는 부분을 찾아보기 위해 pre, code로 검색하면 다음 부분들이 있다는 것을 확인 가능하다. (Poster 반응형 기준)

 

pre태그

pre, code 태그

code.hljs

 

위 부분 중 코드 블록에만 영향을 미치는 이 부분만 주석처리를 해주고 진행하도록 하겠다.

 

code.hljs 주석처리

 

저번 시간에 분석한 디자인을 바탕으로 신호등 모양이 위치하는 곳을 codehead라 지칭하도록 하겠다.

이 codehead 부분을 기존의 코드블럭인 <pre><code> 위에다 붙여주는 모양으로 디자인할 예정이다. 즉, 아래와 같다.

 

디자인 개요

 

위의 개요와 저번 시간에 분석한 내용들을 참고하여 해당 아래의 CSS코드가 완성이 된다.

추가로, VSC의 폰트를 가져왔다.

 

VSC 폰트

.entry-content pre code.hljs {
    padding: 0em 2.24em 1.6em 2em;
    background-color: rgb(30,30,30);
    border-radius: 0em 0em 0.32em 0.32px;
    line-height: 1.5;
    font-family: Consolas, 'Courier New', monospace; /*VSC랑 동일*/
}
div .codehead{
    display: flex;
    padding: 1.2em 2.24em 1.05em 1.04em;
    background-color: rgb(30,30,30);
    border-radius: 0.32em 0.32em 0em 0em;
}
div .redbtn{
    margin: 0.4em; 
    background-color: rgb(255,95,90);
    border-radius: 100%;
    width: 1.25em; 
    height: 1.25em;
}
div .yellowbtn{
    margin: 0.4em;
    background-color: rgb(255,190,46);
    border-radius: 100%;
    width: 1.25em;
    height: 1.25em;
}
div .greenbtn{
    margin: 0.4em;
    background-color: rgb(42,202,68);
    border-radius: 100%;
    width: 1.25em;
    height: 1.25em;
}

알게 된 점 및 고찰

저번시간에 분석한 것들을 그대로 대입하는 형식으로 쉽게 만들 수 있어 보였다. 하지만 기존에 존재하던 HTML부분을 어떤 방법으로 바꿀지와 그에 따른 해당 CSS스타일을 만드는 작업이 생각보다 많이 어려웠었다.

 

어떻게 코드를 짤지 생각 안 하고 바로 생각나는 대로 CSS디자인을 만들거나 HTML코드를 짰으면 이 둘을 조율하는데만 엄청 시간이 걸렸을 것으로 예상된다.

 

계획을 짜는 것의 중요함을 다시 깨닫는 시간이었다.