티스토리 오디세이 스킨 제목 높이 줄이기 (간단하게)

헤더의 높이를 줄이고 여백만 조정하면 됩니다. 

다만 지금은 많이 줄이지 않습니다. 많이 줄이게 되면 안에 폰트 위치와 크기를 바꿔야함으로

그걸 원하시면 다음 링크의 글과 댓글을 봐주세요.

https://imheroim.tistory.com/44

티스토리 오디세이 스킨 본문 제목 크기 줄이기

 

 

 

 

 

 

티스토리 오디세이 스킨 제목 높이 줄이기 (간단하게)

 

안녕하세요 사람사물상황입니다.

위의 사진이 원본 스킨 상태에서의 제목 모습입니다. 이제 이걸 수정해 보겠습니다.

 

 

 

 

 

1. 헤더 높이 줄이기

css 2729 행 즈음

.article-header {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    height: 400px;
    margin-left: -50vw;
    padding: 0 20px;
    background-size: cover;
    background-position: 50% 50%;


    height: 300px; 으로 바꿔줍니다. 또는 원하시는 사이즈

 

 

 

 

 

 

 

 

 

그럼 이렇게 되는데 제목과 본문, 사이에 커다란 흰 공백이 생겼습니다. 그 여백을 없애주면 됩니다.

 

 

 

 

 

 

 

2. 제목 밑 여백 줄이기

css 466행 즈음

 

#tt-body-page .main {
    padding-top: 470px;
}

 

    padding-top: 360px; 으로 바꿉니다.

 

 

 

 

 

 

 

 

그럼 이렇게 우리가 원하는 모습은 만들어졌습니다.

그런데 이렇게만 끝내면 화면이 작은 모바일에선 좀 다르게 보입니다.

 

 

 

 

 

 

 

 

네 여전히 모바일 화면은 공백이 있음으로, 여기도 수정해야합니다.

 

 

 

 

 

 

 

 

3. 모바일 페이지 높이 수정 (여백 줄임으로) 

css 482행 즈음 

@media screen and (max-width: 1060px) {
    #tt-body-page .main {
        padding-top: 440px;
    }

 

        padding-top: 360px; 으로 변경해줍니다.

 

 

 

 

 

 

 

 

 

 

모바일 화면도 여백이 사라지게 만들어졌습니다.

 

끝.