1 분 소요

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

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

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

POWERPNT_3URs7biPsc

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

_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;

POWERPNT_wH9BMDOx4t

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

프로필 사진 등록하기

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

“/assets/jacksmith.jpg”

explorer_KnVsYGd7IH

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

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

Code_zDxEuCp8JM

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

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

Code_Zx8lYHWwhv

result>

brave_y8HvMMa5wP

까리하네ㅋㅋ

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

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

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

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

POWERPNT_9HLIp9x8GM

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

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

brave_LHmNNeG6gm

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

그로부터 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>

POWERPNT_E0epZ2eHMg

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

좌우여백을 줄여보았다.

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

검색창을 만들어주었다.

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

POWERPNT_S0sIgqIQDE

언어:

카테고리:

업데이트:

댓글남기기