본문 바로가기
Blog Tip/Design

원하는 모양대로 H 태그를 꾸며 사용하기

by 카쿠覺 2013. 7. 9.


지난번에 올린 '읽기 편한 포스트를 만드는 4가지 방법'에서 예고한바대로 이번 포스트에서는 제목에 주로 사용되는 H 태그에 스타일을 적용하는 방법에 대해서 살펴보도록 하겠습니다. 오늘 소개해드리는 내용의 큰 줄기는 이전에 포스트했었던 '배경과 테두리, 그림자로 레이어 꾸미기'와 상당부분 일치합니다. 이번 포스트는 다음의 순서대로 진행됩니다.


1. 미리 확인할 부분

2. H 태그의 글자 크기 / 색 / 정렬

3. H 태그의 배경 / 테두리

4. 현재 블로그에 사용중인 예


미리 확인할 부분



먼저 사용중인 블로그에서 사전에 H 태그에 대한 스타일을 선언해두었는지 확인해야 합니다. 이는 관리자 페이지 > HTML/CSS 편집 > style.css 부분에서 H1이나 H2를 검색하여 찾아보시면 됩니다. 또한 이렇게 선언되어 있는 스타일이 페이지 전체에 적용되어 있는 형태인지, 아니면 특정 레이어 내부에 위치하게 되는 H 태그에만 한정되어 선언되어 있는지를 확인해주셔야 합니다. 이 둘은 아래와 같은 차이가 있습니다


 - 페이지 전체에 적용되어 있는 경우 : h1, h2, ... { style 내용 }

 - 특정 이름이나 클래스에만 적용된 경우 : #(또는 .)anyname h1, h2 ... {style 내용 }


이를 확인하는 이유는, 본문을 작성할때마다 해당 스타일을 선언하는 번거로움을 방지하기 위함입니다. 만약 페이지 전체에 H 태그에 대한 스타일이 적용되어 있는 경우, 본문이 위치하는 레이어에만 한정되어 스타일을 추가로 선언하면 됩니다. 후자이면서 본문의 위치하는 레이어에 적용된 스타일이라면, 추가로 스타일을 주는 것이 아니라 기존에 선언되어 있는 스타일을 수정해야합니다. 본인에게 알맞는 형태를 미리 파악하신 후 진행하시면 됩니다. 이 모든 과정이 귀찮으시거나, 또는 상관없다고 하실 경우 포스트를 작성할때마다 직접 H 태그 내에 스타일을 지정해주셔도 됩니다.



이 과정이 완료되셨으면, 본문이 위치하는 레이어의 이름(또는 클래스)이 무엇인지를 확인해주시면 됩니다. 이는 본문을 나타내는 환산자에서(##_article_rep_desc_##) 닫혀있는 레이어 태그를 제외한 후, 가장 가까이에 있는 레이어에서 해당 레이어에 어떤 id나 class가 선언되어 있는지를 확인해주시면 됩니다. 지정되어 있지 않은 경우에는 임의로 선언해주셔도 됩니다. 이에 관한 방법은 글의 서두에서 언급하고 있는 관련 내용 포스트를 참고하시길 바랍니다.


H 태그의 글자 크기 / 색 / 정렬


앞서 살펴본 결과에 따르면 본 블로그의 경우, 본문 내용이 담겨있는 레이어에 선언되어 있는 class는 entry_body입니다. 이를 기준으로 하여 내용을 진행하도록 하겠습니다.


1. 글자 크기 변경 : .entry_body h2 { font-size:__pt; }

2. 글자 색깔 변경 : .entry_body h2 { color: #______; }

3. 글자 위치 정렬 : .entry_body h2 { text-align:left/center/right; }


 - class가 아니라 id로 선언한 경우에는 . 대신 #을 넣어주시면 됩니다.

 - 글자 위치의 경우 기본값은 왼쪽 정렬입니다.

 - 여러 스타일을 동시에 넣고자 할 때에는 각각의 스타일 내용을 세미콜론으로 구분해주시면 됩니다.


글자 위치의 경우 스타일이 아닌 H 태그 내에 직접 align을 통해 지정할 수도 있으나 HTML5부터 공식적으로 지원하지 않는다고 하니 참고하시길 바랍니다.


H 태그의 배경 / 테두리



1. 배경 지정 : .entry_body h2 { background-color:#______; }

2. 테두리 지정 : .entry_body h2 { border-left/bottom/right/top : __px solid/dashed #______; }


 - 색깔의 경우 잘 알려진 color값(balck, white)를 넣으셔도 되고, RGB값을 넣으셔도 됩니다.

 - 테두리의 경우 네 방향 모두 넣고싶으실때는 border만 입력하시면 됩니다.

 - 각각 다른 여러 방향에 넣고자 할때에는 각각 모두를 주셔야 합니다. (아래의 예 참고)


현재 블로그에 사용중인 예



.entry-body h2 { border-left:15px solid #212121; border-bottom:1px solid #a6a6a6;

padding:0 0 5px 10px; color: #191919; }


 - 왼쪽에 15px의 테두리, 하단에 1px의 테두리가 생깁니다.

 - padding은 테두리와 내용사이의 간격을 만드는 역할이며, 차례로 위, 오른쪽, 아래, 왼쪽입니다.

 - 현재 위의 예에서는 하단 테두리와 5px의 이격, 좌측 테두리와 10px의 이격이 있습니다.

 - H2 태그 내에 위치하는 내용의 글자 색은 #191919로 주어져 있습니다.


궁금하신 점은 댓글을 통해 문의해주시길 바랍니다.

반응형

댓글