HTML DIV tag : DIV 영역에 스타일을 반복적으로 적용하는 방법 - 특정한 페이지만

블로그 자체가 아니라, 특정한 페이지에서만 특정한 스타일을 반복적으로 적용하고자 할 때에는 그 페이지의 HTML 맨 위에 스타일을 주는 것이 블로그 템플릿에 스타일을 주는 것 보다 간편하고 쉽다. 나중에 그 페이지를 수정할 때에도 좋은 것 같다. 아래는 이 페이지의 HTML 맨위에 "글자 크기를 좀 더 크게 하고, 영역의 아래에 가로 줄을 넣도록" 스타일을 주고, 특정한 DIV 영역에 클래스를 지정하여 CSS를 적용한 것이다.

1. 여기는 DIV 영역이며, 'gangjo' 라는 클래스(class) 이름으로 지정한 내용이 적용되도록 <div class="gangjo">로 설정하였다. 블로그의 모든 페이지에 특정한 CSS가 적용되도록 하려면, 블로그 템플릿(Template)에 넣으면 되지만, 어떤 특정한 페이지에서만 여러번 반복적으로 CSS를 적용하고자 할 때에는 그 페이지의 맨 위에서 스타일(style)을 설정해 주는 것이 편하고 복잡하지도 않아 좋을 듯 하다.

지구별 탐험대. 귀하의 높은 안목을 존경합니다. 쏜 살 같이 빠르고 흐르는 물처럼 막을 수도 없는 것이 세월이다. 오늘 익히면 내일 새롭고 모레는 기억조차도 아니 나는 것이 배움의 길이로다. 가죽으로 싼 책이 닳아 떨어지도록 여러번 그리고 눈 빛이 책을 꿰뚫도록 마음을 가지런히 하여 공부를 해야 하는 것은 그런 까닭이다. 어쩌고 저쩌고..... 주절주절.....
지구별 탐험대. 귀하의 높은 안목을 존경합니다. 쏜 살 같이 빠르고 흐르는 물처럼 막을 수도 없는 것이 세월이다. 오늘 익히면 내일 새롭고 모레는 기억조차도 아니 나는 것이 배움의 길이로다. 가죽으로 싼 책이 닳아 떨어지도록 여러번 그리고 눈 빛이 책을 꿰뚫도록 마음을 가지런히 하여 공부를 해야 하는 것은 그런 까닭이다. 어쩌고 저쩌고..... 주절주절.....

2. 여기는 또 DIV 영역이며, 위에서와 같이 'gangjo' 라는 클래스(class) 이름으로 지정한 내용이 적용되도록<div class="gangjo"> 로 반복하여 설정하였다. 블로그의 모든 페이지에 특정한 CSS가 적용되도록 하려면, 블로그 템플릿(Template)에 넣으면 되지만, 어떤 특정한 페이지에서만 여러번 반복적으로 CSS를 적용하고자 할 때에는 그 페이지의 맨 위에서 스타일(style)을 설정해 주는 것이 편하고 복잡하지도 않아 좋을 듯 하다.

지구별 탐험대. 귀하의 높은 안목을 존경합니다. 쏜 살 같이 빠르고 흐르는 물처럼 막을 수도 없는 것이 세월이다. 오늘 익히면 내일 새롭고 모레는 기억조차도 아니 나는 것이 배움의 길이로다. 가죽으로 싼 책이 닳아 떨어지도록 여러번 그리고 눈 빛이 책을 꿰뚫도록 마음을 가지런히 하여 공부를 해야 하는 것은 그런 까닭이다. 어쩌고 저쩌고..... 주절주절..... 지구별 탐험대. 귀하의 높은 안목을 존경합니다. 쏜 살 같이 빠르고 흐르는 물처럼 막을 수도 없는 것이 세월이다. 오늘 익히면 내일 새롭고 모레는 기억조차도 아니 나는 것이 배움의 길이로다. 가죽으로 싼 책이 닳아 떨어지도록 여러번 그리고 눈 빛이 책을 꿰뚫도록 마음을 가지런히 하여 공부를 해야 하는 것은 그런 까닭이다. 어쩌고 저쩌고..... 주절주절.....


방법은 아래와 같이 간단하니, 누구나 쉽게 페이지를 꾸밀 수 있겠다.
=> 먼저, 블로그 글쓰기 창에서 HTML 편집창으로 들어가, 아래의 첫 번째와 같은 스타일 코드를 HTML 맨 위에 넣는다.
=> 그리고, 글 을 써다가 위에서 준 스타일을 적용할 영역에는 아래 두번 째 예와 같이 클래스(class)로 스타일을 지정해 주면 된다.

[HTML 맨 위에 스타일을 준 예]

<style type="text/css">
.gangjo {
font-size:1.5em;
border-bottom:1px solid #eee;
clear:right;
margin-top:1.5em;
margin-bottom:1em;
}
</style>

> 클래스 이름은 마음대로 만들면 되고, 다만, 이미 있는 이름과 중복되지 않도록 하면 된다.
> 위의 예에서는 클래스 이름을 " gangjo "라고 만들고, 글자크기를 1.5em 으로, 영역 아래에 밑줄을 긋도록, 영역 오른쪽은 줄 바꿈을 하도록, 그리고 영역 윗쪽과 아래쪽의 간격을 각각 1.5em 1em 띄우도록 설정하였다. 스타일 내용은 글꼴, 색상, 배경색, 배경 그림... 등의 속성을 주어 알맞게 꾸미면 된다.
> 그리고 아래의 예에서와 같이, DIV 영역에 class="gangjo" 로 설정하여, 위에서 설정한 스타일이 적용되도록 하였다.
위에서 설정한 스타일을 적용할 모든 DIV 영역에 같은 방법으로 설정하면 된다.


[본문 중에 위에 준 스타일을 적용할 DIV 영역에 클래스를 지정한 예]

<div class="gangjo">
1. 여기는 DIV 영역이며, 'gangjo' 라는 클래스(class) 이름으로 지정한 내용이 적용되도록 <div class="gangjo"> 로 설정하였다.
블로그의 모든 페이지에 특정한 CSS가 적용되도록 하려면, 블로그 템플릿(Template)에 넣으면 되지만, 어떤 특정한 페이지에서만 여러번 반복적으로 CSS를 적용하고자 할 때에는 그 페이지의 맨 위에서 스타일(style)을 설정해 주는 것이 편하고 복잡하지도 않아 좋을 듯 하다.
</div>

위와 같이 스타일을 설정하고, DIV에 클래스(class)로 지정을 해 놓으면, 나중에 스타일만 수정하면 해당되는 모든 DIV 영역에 수정되어 적용되므로 편리하다.
클래스(class)는 비단 DIV 영역에만 줄 수 있는 것이 아니고, <span>태그 등에도 줄 수 있으니, 알맞은 태그를 사용하면 된다.

참고로, 블로그 전체에 특정한 스타일이 적용되도록 하려면, CSS를 블로그 템플릿에 넣어 주면 된다.  이에 대한 자세한 방법은 링크 참조.
>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...