4. 티스토리 오디세이(odyssey) 본문 제목 스타일 변경

티스토리 오디세이(odyssey) 본문 제목 스타일 변경

오늘은 본문 제목의 전체적인 스타일을 차례 차례 변경 해보려한다.

1. 제목 블록 크기(세로 높이) 조정
2. 본문 제목 글꼴 사이즈 변경

---

1. 제목 블록 크기(세로 높이) 조정

아래 사진과 같이 저 빨간색 화살표 부분이 너무 넓어 불필요하게 공간을 많이 잡아 보기가 좋지 않다.
알맞은 크기로 적당히 줄여 보도록 하자!

제목 블록 크기를 줄여 보자!

CSS 코드 수정
[ 블로그관리 홈 > 스킨편집 > html 편집 > CSS ]

[ Ctrl + F > ' article-header '] 를 검색 후, height 값을 원하는 만큼 조정해 보자!
나는 글꼴 사이즈도 줄일 예정이라, 400px → 200px 정도로 조정해 주었다.
만약 더 넓게 가져가고 싶다면 숫자를 늘려주면 된다.

⬇️ 수정한 코드 ⬇️

/* area-view - 상세 페이지 */
/* article-header */
.article-header {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    height: 200px;
    margin-left: -50vw;
    padding: 0 20px;
    background-size: cover;
    background-position: 50% 50%;

 

🧡 적용 후 🧡

 

흠......ㅎ.ㅎ...
예쁘게 높이가 잘 조정된건 좋은데 제목이 다 짤리는 문제가 발생했다.
빨리 수정해주러 다시 CSS 편집기로 가보자.

 

---

 

3. 제목 블록 크기(세로 높이) 조정

[ ' article-header. title-article ']에서 font-size를 원하는 만큼 조정해 준다.
나는 48px에서 24px로 조정해 주었다.

⬇️ 수정한 코드 ⬇️

.article-header .title-article {
    display: block;
    width: 100%;
    max-width: 760px;
    margin: 0 0 33px 0;
    font-size: 25px;
    font-weight: 400;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    word-break: keep-all;
}

 

🧡 적용 후 🧡

아주 예쁘게 잘 들어가졌다....!

이렇게 적용하고 나니 뒷 배경의 그림이 너무 거슬린다.
다음 포스팅은 제목의 뒷 배경 그림을 안보이게 바꿔봐야겠다.