코딩일지(2024-05-28)

시험공부하기 싫어서 Blog나 꾸몄다…ㅜㅋㅋ

원래 블로그 꾸밀때 많이 참고했던 블로그가 있다.이번에도 거기에 들어가서 많이 참고했다. 오늘은 시간도 떼울겸, 근데 의미있게 시간을 떼울겸 블로그를 꾸몄다.

게시글 링크 하단 밑줄 제거하기

이번에 위와 같이 게시글 링크 하단에 항상 나를 신경쓰이게 만들었던 밑줄을 아예 깔끔하게 제거해보려고 한다!(참고한 링크)

_sass\minimal-mistakes\_base.scss에 들어가서 127번라인 쯤에 보면, 다음과 같이, link에 대한 부분이 있을 것이다. 없으면 ctrl+f를 눌러서 links라 쳐도 된다.

a {
  
  &:focus {
    @extend %tab-focus;
  }

  &:visited {
    color: $link-color-visited;
  }

  &:hover {
    color: $link-color-hover;
    outline: 0;
  }
}

여기서 &:focus와 같은 depth레벨에 다음과 같이 채워넣어 주었다.

text-decoration: none;

그랬더니 깔끔하게 밑줄이 사라진 것을 확인할 수 있었다.

프로필 사진 등록하기

일단 아래의 경로에다가 사진을 넣어주었다.

“/assets/jacksmith.jpg”

그리고 루트경로 바로 아래에 있는 야믈파일인, _config.yml에 들어갔다.

그리고 ctrl+f를 눌러 site author섹션으로 넘어가서 아래와 같이 avatar속성에 대해서 이미지 경로를 잡아주었다.

이렇게 하고 나서 서버를 재가동하면, 정상적으로 프로필이미지가 출력되는 것을 확인할 수 있었다(무조건 서버를 재가동해야된디ㅇㅇ)

그리고 추가적으로 이미지를 조정해주기 위해 _sass\minimal-mistakes\sidebar.scss에 들어가서, “Author profile and links”섹션으로 들어가 다음과 같이 수정을 진행해주었다.

result>

까리하네ㅋㅋ

본문사이즈를 고정해주었다.

반응형 웹페이지를 구현하기 위해 이 minimal-mistakes라는 테마에서는 scss를 써서 breakpoint 기능을 활용한다. 접속하는 기기의 웹 브라우저 사이즈에 따라 웹피이지의 크기를 변경할 수 있게 해주는 기능인데, 쉽게 말해서 내 깃허브 블로그를 핸드폰으로 들어가냐, 태블릿으로 들어가냐, 피씨로 들어가냐에 따라 알잘딱 깔센하게 폰트의 크기를 바꿔주는다는 것이다. 이 알잘딱깔센!이 바로 반응형이라는 것이다.

본론으로 돌아와서, minimal-mistakes 테마에서는 기본 폰트 사이즈를 18px로 설정되어 있다. 그리고 large속성과 x-large속성의 경우에는 각각 20px과 22px 크기의 폰트사이즈로 바뀌도록 설정되어 있다. 이 내용은 _sass\minimal-mistakes\reset.scss 파일에 해당 내용이 있다.

20px짜리 폰트는 너무 커서 18px로 고정시킬려고 한다. 해당 블로그를 참고했다.(링크)

사이드메뉴와 시계를 반응형으로 처리해주었다.

내가 예전에 지킬기반의 블로그를 만들때 기존에 것들만 사용하면 너무 식상할 것 같아서, 두세시간 정도 영혼을 갈아서ㅋㅋㅋ, 시계와 사이드메뉴를 만들어주었었다.

근데 문제는 내가 반응형을 배우지도 않았고, 따로 배워서 적용하는게 여간 귀찮은게 아니라서, 그냥 방치해두었다.

그로부터 5개월이 지나, 시험공부를 하기 싫은 현재의 내가 시간을 의미있게 떼울겸 이 작업을 해보려고 한다.

근데ㅋㅋ 생각보다 허무하고 빠르게 솔루션을 찾아냈다.

일단 시계에 대해서 반응형으로 처리해주기 위해, /_includes/clock.html에 들어가서, 아래 코드를 css섹션에 넣어주었다.

@media only screen and (max-width: 1300px) {
    div.clock {
        display: none;
    }
}

즉, 화면의 너비가 1300px이하로 떨어지면 아예 시계를 숨기라는 의미다.

마찬가지로 sidemenu에 대해서도 작업을 진행해주었다.

/_includes/sidemenu.html에 들어가서, 아래 코드를 css섹션에 넣어주었다.

@media only screen and (max-width: 1300px) {
    .sidemenu-parent {
        display: none;
    }
  }

result>

그 결과는 나름 만족스러웠다.(굳굳~~)

좌우여백을 줄여보았다.

찾아보니 좌우여백을 줄이는 솔루션은 꽤 몇가지가 있었다. 그중 한가지를 시도해보았다.

검색창을 만들어주었다.

1)_config.yml파일에 들어가서 search속성과 search_full_content속성에 대해서 다음과 같이 true값을 넣어주었다.