이 글에서는 티스토리 블로그에서 포스팅 내의 h1 태그를 변경하는 법에 대해서 설명합니다.
- 티스토리 블로그에서 포스팅 내의 h1 태그 확인하기
- 티스토리 블로그 포스팅에 있는 h1 태그 스타일 바꾸기
.png "티스토리 블로그 포스팅 제목이 안보일때")
티스토리 블로그에서 포스팅 내의 h1 태그 확인하기
티스토리 블로그의 게시글 포스팅의 제목이 잘 안보입니다. 이유는 대표 썸네일 이미지를 만들면 제목 바탕에 깔리게 되는데, 이 이미지로 인해서 h1 태그: 즉 제목이 잘 안보이는 현상이 발생합니다.
이를 수정하기로 마음먹고 게시글의 제목을 찾아보았습니다.
제목이 어떤 것인지 알아보기 위해서는 먼저 F12를 눌러서 개발자 도구로 들어갑니다. 여기서 검색을 해서 제목 텍스트를 그대로 검색합니다.
이렇게 검색하면 제목에 해당하는 h1 태그가 검색되었을때 왼쪽 편에 해당 제목에 표시가 됩니다.
이렇게 찾은 h1 태그는 이제 스킨편집에서 편집할 수 있습니다.
여기서 주의해서 봐야할 것은 상위 container혹은 div 항목에 지정되어있는 class입니다.
티스토리 블로그에서는 선택자를 이용해서 각 div나 container 내부의 h1 태그를 다르게 스타일링합니다.
여기에 코드 삽입
글 내용
티스토리 블로그 포스팅에 있는 h1 태그 스타일 바꾸기
CSS(Cascading Style Sheets)는 웹 문서의 스타일을 정의하는 언어로, HTML 등의 웹 문서가 정보를 구조화할 때, CSS는 웹 문서의 디자인(레이아웃, 색상, 글꼴 등)을 제어합니다. CSS를 사용함으로써 웹 개발자들은 디자인 요소를 HTML 문서와 분리할 수 있어 웹 페이지의 유지 관리 및 반복 작업이 용이해집니다.
CSS는 선택자(Selector)와 선언부(Declaration)로 구성되어 있습니다.
여기서 선택자는 대부분 class로 구분합니다.
먼저 post-cover를 찾아보고 post-cover의 하부나 외각을 자리하는 inner가 있는지 확인했는데 inner항목은 없었습니다. 그렇다면, .post-cover h1의 css를 변경하면 해당 글자가 바뀔 수 있습니다.
저는 아래와 같이 폰트 굵기를 900(최대)으로 외곽선을 검정색으로 적용하였습니다.
.post-cover h1 {
max-width: 1080px;
margin: 0 auto;
font-weight: 900; /* 글자 굵기를 조절합니다. 굵기는 100부터 900까지 가능하며, 400이 일반 글자, 700이 볼드체 입니다. */
font-size: 2.125em;
line-height: 1.2352;
color: rgb(255, 255, 255); /* 기본적으로 하얀색으로 되어있습니다. */
-webkit-text-stroke: 1px black; /* 이것을 추가하여 외곽선을 표시해 줍니다. */
}
이와같은 방법으로 다른 태그들도 스타일을 적용하여 원하시는 대로 변경하실 수 있습니다.
참고로, 모바일 페이지에 대한 스타일은 아래와 같이 추가 적용 되어있습니다.
그러므로, 이 부분을 변경해 주지 않으면 두께는 300에서 바뀌지 않습니다. 그러므로, 모바일 페이지의 글자 두께를 수정하기 위해서는 @media (max-width: 767px)를 찾아서 .post-cover h1의 font-weight를 원하는 숫자로 바꾸시면 됩니다.
/* 모바일 기기를 위한 스타일 */
@media (max-width: 767px) { ...
.post-cover h1 {
font-weight: 300;
}...
}.png)
