티스토리 소제목 라인 만들기

티스토리 소제목 라인 만들기입니다.

소제목의 라인 만들기란 하기처럼 제목 좌측과 밑단에 선이 그러지는 것을 말합니다.

선의 두께 및 색상까지 모두 조정이 가능하고, 소 제목을 조금 더 부각 해줄 수 있기 때문에 가독성 즉 글을 읽기에 편해지겠습니다.

티스토리 소제목 라인만들기

물론 해당 스타일을 적용한다고 해서 SEO(검색엔진 최적화)에 유리하다거나 매우 좋다고 할 수는 없습니다.

SEO는 HTML 태그의 목적과 구성이 정확해야 더 높은 점수를 받을 수 있으니 타이틀에는 타이틀 태그를 문단에는 문단 태그를 각자 목적에 맞는 태그를 구성하는 것이 좋겠습니다.

그럼, 다시 티스토리 소제목에 밑줄 긋는 방법에 대해서 계속 진행해 볼까요?

티스토리 소제목에 밑줄을 그어주는 CSS 스타일 선언은 여러 가지 방법이 있습니다.  여기서는 두 가지 방법을 우선적으로 제시해보려고 합니다. 말씀 드린것처럼 이 두가지 가 꼭 정답이 아닙니다. 

1. 제목 밑줄 넣기 CSS

두 개의 CSS 스타일 코드를 먼저 공개합니다.

첫 번째 방법입니다.   테두리 줄  스타일을 solid 밑줄로 선택하고 4면의 테두리 굵기 그리고 색상을 지정하는 코드입니다.

width 속성의 4면은 시계방향으로 위,오른쪽, 아래, 왼쪽 입니다.

왼쪽 막대를 굵게 만들려면 10px 에서 더 큰 값을 지정하면 되겠네요. 

h2{
  /* 테두리 줄 */
  border-style : solid;
  /* 테두리 굵기 */
  border-width: 0px 0px 1px 10px;
  /* 테두리 색상 */
  border-color:red;
}

실행하면 이렇게 결과가 나오겠죠?

타이틀 소제목 밑줄 넣기

두 번째 방법입니다. 왼쪽과 오른쪽 테두리의 속성만 설정합니다.

왼쪽은 선 스타일, 검정, 굵기 10px 

하단은 선 스타일, 빨강, 굴기 3px 

h2{
  /* 왼쪽 테두리 줄 색상 굵기 */
  border-left: solid black 10px;
  /* 오른쪽 테두리 줄 색상 굵기 */
  border-bottom: solid red 3px;
}

결과는 하기와 같습니다.

타이틀 소제목 선 긋기

이처럼 CSS를 활용하면  소제목 타이틀을 자유자재로 구사 할 수 있습니다.

그럼, 이렇게 만든 CSS 를 티스토리에 어떻게 적용하냐고요? 

모두 다른 티스토리 스킨에 위 코드를 적용하는 방법은 다음 포스팅에서 진행합니다.

감사합니다.

 

 

티스토리 제목 라인 넣는 방법

 

CSS 테두리 설정에 대해서 더 알고 싶으시다면 하기 포스팅을 참고드립니다.

CSS 테두리 면 설정하기 와 티스토리 소제목 라인 만들기