티스토리 상단메뉴 위치변경(이동) 방법(본문 너비 넓혔을 때)

개요

티스토리 블로그를 운영하는 분들이라면, HTML과 CSS와 친해지셔야합니다. 이곳에서 블로그 디자인에 대한 모든 것들이 이루어지기 때문이죠.

 

블로그 디자인 중에 많이 시도하시는 것 중 하나가 본문 너비나 사이드바 너비를 조정하는 것입니다.

너비를 넓히면, 그만큼 가독성도 좋아질 수 있고 무엇보다 광고배치시 보다 깔끔한 레이아웃을 기대할 수 있기 때문입니다.

 

저 역시 본문과 사이드바 영역 너비를 넓혀 가독성과 광고배치를 보다 개선하고자 했는데요.

그러다보니 블로그명과 상단메뉴가 원래상태 그대로 남아있어, 보기가 영 그랬습니다.

 

블로그이름과 상단메뉴, 너비가 넓어진만큼 같이 조정해주기

블로그이름과 상단메뉴 이동을 별도의 코드를 사용해 할 수 있겠지만, 저는 손쉽게 변경할 수 있는 방법을 택했습니다.

 

 

바로, header .inner 부분에서 max-width 부분을 본문너비 바꾼 수치와 동일하게 한 것인데요.

}#header .inner { 
position: relative; 
max-width: 1200px; 
margin: 0 auto;}

 

CSS에서 122 라인 쯤 해당 코드를 발견할 수 있습니다.

 

CSS에서 조정

 

max-width 를 본문 너비를 넓혀준 수치만큼 동일하게 변경한다면 블로그명과 상단메뉴의 위치가 자연스럽게 이동하는 것을 확인할 수 있습니다.

 

잘 모를 땐 어디서 무슨 코드를 넣어야하는지 어려웠으나, 해당 방법으로 손 쉽게 해결한 사례였습니다.