5일차 "블로그 만들기"-H태그/ 제목4, 제목5 추가하기

목록에 없는 제목 4와 제목 5 추가하는 방법

0. CSS와 HTML을 다 편집하는 이유

css 편집을 마쳐도 목록에는 제목1,2,3까지만 나오고 4,5는 여전히 안 나온다. 제목4,5의 속성만 편집되는 것이다. 그러므로 어느 글자가 제목4,5라는 것을 지정해 주기 위해 html도 편집한다. css는 영구히, html은 일회적 효과가 나타난다.

1.CSS 편집

① 태그 복사하기

CSS상에 제목 4를 추가하려면 아래의 제목 3에 해당하는 아래 태그를 복사해서 붙여 넣으면 된다.(css는 티스토리 관리 - 스킨 편집 - html 편집 - css 탭 순서로 들어갈 수 있다.)

예제1)
.entry-content h4 {
clear: both;
margin: 29px 0 22px;
font-weight: 400;
font-size: 1.125em;
line-height: 1.5;
color: #000;
}

② 태그 붙여 넣기

제목 4는 h4가 아닌 h5를 써 준다. 즉, 아래의 빨간색 처럼 된다.

예제2)
.entry-content h5 {
clear: both;
margin: 29px 0 22px;
font-weight: 400;
font-size: 1.125em;
line-height: 1.5;
color: #000;
}

③ 응용하기

제목 5는 h6로 쓰면 된다. 즉, 아래의 빨간색 처럼 된다.

예제3)
.entry-content h6 {
clear: both;
margin: 29px 0 22px;
font-weight: 400;
font-size: 1.125em;
line-height: 1.5;
color: #000;
}

④ 글자 크기 바꾸기

위의 예제에서 "font-size: 1.125em;"의 파란색 숫자를 바꾸면 된다. 4일 차 h태그에도 나와 있다. 단, 제목 1부터 순서대로 크기가 작아지거나 같은 게 좋다. 이왕이면 제목 1은 나머지보다 크게 한다.

즉, 제목 1 > 제목 2 ≥ 제목 3 ≥ 제목 4 ≥ 제목 5

와 같이 설정하는 것이다.

2. HTML 편집

제목 4, 5에 글자크기 적용하기

그런데 글쓰기 메뉴에는 제목 4, 제목 5가 나오지 않아 위에서 편집한 CSS가 아직 적용되지 않는다. 이때, 상단 메뉴의 오른쪽 끝에 있는 기본 모드(클릭) → HTML로 들어간다.

"제목 4에 해당되는 글자"앞뒤의 <p>, </p> 태그를 <h5>, </h5>로 수정해 주면 된다. 제목 5 역시 같은 방법으로 <h6>, </h6>로 수정하면 적용이 된다.

알쏭달쏭한 것

Q. CSS는 매번 바꿔야 돼요??

A. 아니요. CSS를 한 번 편집하면 전체 글에 적용이 됩니다. 이미 쓴 글에도 소급 적용이 되니 너무 편합니다.

Q. HTML은 매번 바꾸는 것이 맞죠?

A. 네, 그렇지만 제목 4나 제목 5를 되도록 안 쓰거나 손이 빨라지면 어렵지는 않겠습니다.

Q. 제목 6 이상도 그렇게 추가할 수 있나요?

A. 아니요, 제목 추가는 5까지만 됩니다. 꼭 추가하고 싶다면 html에서 해당 글자의 앞뒤에, <font size="원하는 크기"><p> 제목처럼 보이고 싶은 글자 </p></font> 이것처럼 빨간색으로 강조한 태그를 추가하세요. 크기는 숫자로 써야 해요.

저작자표시 비영리 변경금지

도레미