구글 블로그 H2 제목 CSS스타일 목록, 내 맘대로 적용하기

이 글에는 제품소개로 수익금을 얻는 링크가 포함되어 있습니다.

CSS적용된 H2 제목으로 날개를 달자

글 내용은 열심히 작성하였는데 내가 보아도 글의 구분이 잘 되지않아서 방문자가 글을 제대로 못읽을것 같은 느낌이 드신적있나요? 그렇다면 어떻게 해야 내글이 더 명확하고 방문자에게 글의 구분과 읽기가 편하게 만들 수 있을까? 그 방법중 하나가 색상이나 밑줄, 크기등으로 단락의 제목을 표시해주는 일이 될것입니다. 

HTML 코드에서 <h2>는 'heading 2'의 약자로, 웹 페이지에서 두 번째로 중요한 제목을 나타내는 태그입니다. <h1> 태그 다음으로 중요한 제목을 표시할 때 사용하며, 페이지의 구조를 명확하게 하고 검색 엔진 최적화(SEO)에도 도움을 주는 역할을 합니다. <h1>은 글의 제목 그러니까 본문에 넣는 제목이 아닌 외부로 나타나는 제목을 말합니다. <h2>는 본문안의 제목으로 이해하면 좋습니다. 그러므로 블로그 글작성시에는 항상 제목태그를 염두해두고 글 단락을 나눠 작성해야 합니다.

H2 CSS코드 목록

아래에는 여러분이 바로 복사하여 내 블로그에 붙여넣기하면 사용할 수 있는 css코드를 나열한 목록이 있습니다. 여기서 예제를 보고 내가 원하는 스타일을 복사하여 사용해보도록 하겠습니다. 코드를 그대로 복사해주시고 아래의 순서대로 적용합니다.

CSS코드 적용방법

1. 테마 → html편집 → Ctrl+F로 검색창열기 → ]]></b:skin>입력하여 위치찾기 해당 코드위치 바로위에 css코드 붙여넣기 → 저장 순으로 작업하시면 됩니다. 

2. 레이아웃 →테마디자이너 → 고급 → CSS추가창에 복사한 css코드 붙여넣기 → 저장 하시면 적용할 수 있습니다. 

위의 두가지 적용방법의 차이점은 1번은 나중에 수정할때의 편리함으로 코드에 대해서 더 쉽게 파악할 수 있는 형태이고 2번은 적용은 간단하나 나중에 수정을 하기위해서는 1번처럼 다시 찾아 들어가야한다는 점이 있습니다. 

CSS코드 스타일 

1번 스타일

마우스를 호버하면 밑줄이 좌에서 우로 나타나는 스타일입니다.

▼코드 복사하기

2번 스타일

모서리가 둥근 사각형박스 스타일입니다.

▼코드 복사하기

3번 스타일

좌에서 색이 나타나 우로 점점 투명해지는 사각박스 스타일입니다.
 

▼코드 복사하기

4번 스타일

모서리가 둥근 사각형의 라인테두리가 있는 스타일입니다.
 

5번 스타일

글자에 그림자가 생기는 스타일입니다.
 

▼코드 복사하기

6번 스타일

좌측에 바가 있고 글자의 밑줄이 있는 스타일입니다.

▼코드 복사하기

7번 스타일

사각형의 얇은 라인테두리가 있는 스타일입니다.

▼코드 복사하기

8번 스타일

좌측에 바가 있는 스타일입니다.

▼코드 복사하기

9번 스타일

사각형 박스의 점선 테두리 스타일입니다.

▼코드 복사하기

10번 스타일

위아래에 라인이 있는 스타일입니다.

▼코드 복사하기

이렇게 여러가지의 스타일을 보고 내가 원하는 스타일을 블로그에 적용시켜보세요. html편집창에 넣은 css는 모든 블로그글에 공통으로 적용되는 스타일입니다. 이 코드를 본문글에만 적용하면 개별적인 스타일로 해당글에만 적용하게 할 수도 있습니다. 하지만 여러가지로 번거롭기때문에 공통으로 모든글에 적용하는것을 추천드립니다.

이 글의 카테고리 : 꾸미기팁