jekyll 블로그 커스터마이징하기(2)

제목이랑 본문을 떨어트려 놓는다는걸 완전히 바꾸어버렸다.

기존이 어땠는지 보기 위해서 이전 사진을 좀 찍어놓을걸 그랬다!
Minimal Mistakes의 기본 포스트와 같으니 궁금하면 참고..!

이번엔 원하는 대로 싹 바꾼다고 엄청난 사투를 벌였다.
오늘도 초짜는 개발자 모드로 뒤적거리느라 3-4시간 정도 걸린 것 같다.

오늘도, 개발자 모드!

지난 기억을 되살려, 개발자모드F12로 뒤적거리면서 변경하고 싶은 부분을 클릭했다.
원래 바꾸려던 것은 제목인 Header였으니 이 부분을 클릭!

CSS를 변경해가면서 원하는 스타일을 찾아보았다.
애초에 원하던건 본문과 제목을 떨어트리는 것이었는데,
이 부분은 \_sass\_page.scss에서 page__title의 line-height 속성 값을 올려주면 됐다.

근데 뭔가 이걸 떼는 것 만으로는 만족스러운 스타일이 되지 못했다.

다른 사람들은 어떻게 했을까?

다른 사람들의 블로그들은 어떻게 생겼는지, 한번 참고해봤다.
내가 마음에 드는 포스트 스타일들은 제목이 다들 가운데에 있길래 한번 옮겨보았다.

뭔가 이상하다.. 내가 원하는 스타일이 아니었다.
본문과 제목이 따로 노는 것 같다고 해야하나? 암튼 별로였다.

그래서 하단에 있던 게시 날짜, 태그, 카테고리를 상단으로 옮겨보기로 했다.
문제의 3-4시간은 여기서 발생했다!

아래에 있던걸 위로 옮기는건데… 글자 지우기

옮겨보려고 하니, 그 스타일 그대로 옮기는건 좀 아니었다.

이런 모양인데.. 위로 그대로 옮기면 또 매우 이상했음 ㅠ_ㅠ
그래서 픽토그램 옆에 Categories, Updated 글자를 없애보기로 했다.
박스 모양도… 너무 두껍게 생겼어!

개발자 모드에서 클릭클릭 하다보면, 해당 메뉴가 .page__taxonomy-item 인걸 확인 할 수 있었다.
이것도 CSS에서 바꾸겠거니.. 하고 또 이리저리 고쳐봤다.

border 속성을 조정하니 박스 테두리는 없앨 수 있었다.

근데 글자는 CSS가 아니다.. 그럼 HTML이겠지..? 하고 또 뒤적거리기 시작했다.
저번에 삽질을 하도 많이해서 이제 어느정도 파일보는 법은 익혀진 것 같다!

page__taxnomy class 였으니 그 파일이 있겠지, 하고 파일을 찾아봤다.
HTML파일들은 지난번에 _include 폴더에서 찾을 수 있었던 걸 기억해서 찾아냈다.

category-list.html과 tag-list.html을 포함하고 있다는 것 같으니까 그 파일을 찾아봤다.

텍스트 값이 ui-text로 지정해주는 부분이 있는 것을 보고 주석처리 해줬다.
드디어 픽토그램 옆 이름을 지울 수 있었다! 야후!

글자를 지웠더니 가로로 배열하는 난관이..

세로로 쭉 있던 모양을 가로 모양으로 바꿔주고 싶었다.
그래야 뭔가 더 있어보이는 모양새!!!!

그래서 이리저리 아무 스타일을 해보다가, 몇 번(엄청난)의 시행착오를 거쳤지만
레이아웃 크기를 조절해 줄 수 있는 flex라는 display 옵션을 찾았다.

드디어 가로배열에 성공하고, 구글링을 거치면서 개별 스타일로 flex값을 조정해주면
내가 원하는 스타일로 변경이 가능하다는 것을 알게 됐다.

<div>, <p> 태그 어디다 쓰는 걸까 배울 땐 되게 궁금했는데 역시 경험인가 보다..
태그 별로 스타일 지정을 해줄 수 있어서 쓸모있는 좋은 태그였다. 쓸모없는 건 줄 알았는데ㅎㅎ..

드디어 끝!

드디어 카테고리와 날짜를 옮기고, 약간의 경계선이 필요하다고 느꼈다.
그게 지금의 블로그 최종본인데, 저자 이름이랑 수평선<br>을 넣어줬다.

저자를 어떻게 기본으로 적어줘야 할 지 모르겠어서 일단 HTML에 때려박은건 비밀이다ㅎㅎㅎ

끝인 줄 알았지만 폰트 변경이 남았다.

바꾸는 김에 영어 폰트가 마음에 안들어서 여기까지 바꿔보기로 했다.
검색해보니 웹 폰트로 구글 폰트를 쓰는 경우가 많은 것 같아서 나도 구글 웹폰트로!

폰트는 대체 어디 정의 되어 있는 걸까 또 뒤적거리다가 이쯤되면 뒤적 마스터
\_sass\minimal-mistakes\_variables.scss\에 정의 되어있는 것을 찾았다.

기존에 있던 맘에 안들던 폰트는 다 지워버리고! 내가 마음에 들었던 Lora를 추가했다.

CSS 파일 상단에 임포트 해준 다음, 적어주기만 하면 되서 편했다.
이렇게 폰트 변경까지 끝! 신난다! XD!

---

오늘도 뿌듯한 작업이었다.
다음엔 홈화면을 바꿔보기로 해야지!

삽질하면서 그래도 HTML, CSS, JS 보는 법을 익혀가는 것 같아서 기분이 좋다 :)