CSS 공부 내용 바탕으로 티스토리 본문 폭 넓히기

요즘 혼자 공부하는 머신러닝 + 딥러닝, 일명 혼공머신 책을 바탕으로 인공지능에 대해 독학중이다.

공부했던 내용을 정리하는 김에 티스토리에도 올려보고자 jupyter notebook에 사용했던 코드를 가져왔다.

 

왼쪽의 빨간 박스친 부분 때문에 본문이 너무 얇게 생성되어 보기가 안좋다.

다른 티스토리 블로그의 방법을 참조하여 페이지 소스를 갖다 붙여서 내용이 잘 생성된 것 까지는 좋았는데,

왼쪽의 빈 부분이 상당히 거슬린다. 저 부분 때문에 본문이 얇아보이는 느낌?

마침 CSS도 배웠겠다, 어떤 요소가 문제인지 수정해보면서 찾아보기로 했다.

 

html 편집이 저기 있다 !

 

티스토리 관리페이지 > 스킨 편집 > html 편집 > CSS 탭 에 들어간다.

 

여기서 바로 편집하기에는 가독성이 떨어진다.

Atom으로 옮겨서 살펴보자.

 

코드가 상당히 길다...

 

4566줄이나 되는 코드가 Atom으로 옮겨졌다.

일단 본문의 폭에 관련된 부분이니, Container 혹은 Main, Width 등의 키워드로 검색을 진행하며 하나하나씩 바꿔봤다.

그리고 결국 문제의 원인이 되었던 녀석은...

 

찾았다 ! 요 녀석 !

#container의 .main 부분의 max-width가 지정된 값이었기 때문이었다(...)

얼른 확장해보자.

 

엥???

그런데... 컨텐츠가 들어갈 공간 자체는 넓어진 거 같은데 컨텐츠 자체가 넓어지지가 않는다??

정신차리고 다시 CSS code를 살펴보니 바로 아래 있는 

 

너도 제한되어있구나..

area-main 영역의 max-width 값이 제한되어있기 때문인 거 같다.

그렇게 적절히 두 개의 max-width 값을 조정한 결과,

 

훨씬 보기가 편해졌다

 

드디어 볼만해진 본문 크기가 완성되었다. 

 

오늘의 결론 : CSS 배워놨더니 불편했던 걸 쉽게 개선할 수 있었다.

(feat. CSS 수정할 수 있게 한 티스토리 칭찬해)