티스토리 WHATEVER 스킨 수정 ② 상단 메뉴 고정-본문 위치 아래로 이동

 

지난 시간에는 WHATEVER 스킨 상단바(상단 메뉴바, 헤더, HEADER) 고정하는 방법에 대해서 알아봤었는데요. 이번 시간에는 상단 메뉴 고정 후 필요한 추가 작업에 대해서 살펴보겠습니다. 

 

헤더가 고정되면 그 높이만큼 겹쳐지는 부분이 생기는데요. 메인 커버, 카테고리 목록 (리스트형 or 섬네일형), 본문 화면에서 이 부분을 수정해줄 거예요. 가려지는 상단 메뉴바 높이만큼 위치를 아래로 이동시켜보겠습니다.

 

 

 

 

그리고 본문 제목 폰트 사이즈, 색상 변경, 줄 간격 수정 등을 해보겠습니다. 제목이 들어가는 부분은 기본적으로 3줄로 구성되어 있는데요. 카테고리명, 제목, 닉네임으로 되어 있습니다. 그 줄 간격을 수정해 볼 거예요.  

 

 

 

 

첫 번째, 커버 화면은 설정에 따라서 다를 텐데 저 같은 경우 저는 슬라이더가 맨 위에 위치하고 있습니다. 블로그 관리 홈 > 꾸미기 > 스킨 편집 > html 편집 > CSS에서 찾기(Ctrl+F)로 cover-slider를 검색합니다. 약 391번째 줄에 있습니다. (스킨 편집 유무에 따라 위치가 다를 수 있어요) margin: 40px로 수정합니다. 

 

 

원하는 위치를 보고 값은 수정하시면 되겠습니다. 모바일 위치는 따로 수정이 필요합니다. 약 2460번째 줄에 Media Screen - Mobie에 속해 있는 .cover-slider가 있습니다. margin-top: 50px로 수정 후 적용 클릭합니다.

 

 

반응형 스킨, 반응형 웹스킨,블로그 스킨,티스토리 반응형 스킨, 티스토리 스킨, 티스토리 whatever 스킨, customizing, 커스터마이징, 코딩

 

 

두 번째, 상단 메뉴바에서 카테고리를 클릭하고 들어갔을 때 보이는 카테고리 목록(리스트형 or 섬네일형) 화면 위치를 아래로 이동해 보겠습니다. 찾기로 post-header:first-child를 검색하면 약 724번째 줄에 나옵니다. margin-top: 150px로 수정합니다. 

 

모바일 화면 수정을 위해 아래로 내려가면 약 2321번째 줄에 Media Screen - Mobie에 속해 있는 post-header:first-child가 있습니다. margin-top: 100px로 수정 후 적용 클릭합니다.

 

 

 

 

세 번째, 본문 화면(제목 포함) 을 적당한 위치로 내려보겠습니다. 찾기로 hgroup를 검색하면 약 965번째 줄에 나옵니다. margin: 80px로 수정합니다. 제목 위 여백 값이 정해졌으니, 아래쪽 여백(제목 아래 라인 사이 여백)도 함께 맞춰볼게요. padding: 30px로 수정합니다.

 

모바일 화면 수정을 위해 아래로 내려가면 약 2621번째 줄에 Media Screen - Mobie에 속해 있는 .hgroup이 있습니다. margin: 50px로 수정합니다. 아래쪽 여백 padding: 25px로 수정 후 적용 클릭합니다. 원하시는 여백 분량만큼 값은 수정하시면 되겠습니다.

 

 

여기까지 수정을 하면 헤더 고정에 따라서 겹쳐지는 분량 위치 이동이 끝났습니다. 추가적으로 본문 제목과 줄 간격 수정을 해보겠습니다. 제목이 들어가는 부분은 기본적으로 3줄로 구성되어 있는데요. 카테고리명, 제목, 닉네임으로 되어 있습니다. 그 줄 간격을 수정해 볼 거예요. 

 

 

 

 

먼저 제목 폰트 사이즈를 약간만 크게 수정해 볼게요. 찾기로 hgroup h1을 검색하면 약 977번째 줄에 나옵니다. font-size: 1.7em으로 수정합니다. 좀 더 강조하고자 bold;를 삽입하며 굵게도 해봤는데, 너무 강조된 느낌이라 다시 수정했어요. 

 

원하는 크기와 색상 값으로 수정하시면 되겠습니다. "html 색상표" 로 검색하여 원하는 색상 값을 복사하여 color 부분을 수정해 주시면 됩니다. 카테고리명, 닉네임 글자 크기나 색상 변경은 .hgroup .categroy 와 .hgroup .post-meta에서 각각 수정 가능합니다. 

 

그다음 줄 간격은 hgroup h1의 line-height: 1.1;로 수정합니다. 마지막에 적용 클릭합니다. 모바일 수정은 따로 하지 않아도 되는데, 필요한 경우는 Media Screen - Mobie에서 필요한 값을 삽입해 주시면 되겠습니다.

 

이번 시간의 WHATEVER 스킨 수정은 여기까지입니다. 

그 외에 자잘하게 수정이 필요한 부분은 또 다음 시간에 자세히 알아보도록 하겠습니다. 

 

읽어주셔서 감사합니다 :)