<font color=red>답변 Re: CSS 에서의 Class 설정에 대해.......

[운영자]

일반적으로 CSS(스타일시트)로 어떤 태그요소에 대한 속성을 지정해 주게 되면
본문(body)내 해당 태그요소 모두에게 적용이 되어집니다.

테이블을 예로 들면 테이블의 배경색상을 CSS로 노란색상으로 지정을 해 놓으면
본문내 모든 태이블의 배경색상은 노란색상의 배경이 들어가며 테이블에 따로 백그라운드 속성을
주어도 무시되고 CSS에 정의된 속성으로 표현을 하게 됩니다.

그러나 class 속성을 이용하면 테이블 태그내 특정 색상이나 배경이미지를 설정해 주어도
본문내에서 테이블에 다른 배경색상이나 이미지를 줄 수가 있습니다.

일박적으로 CSS내에서 어떤 태그에 대한 속성을 줄 때에는
태그 {속성....} 
이렇게만 설정해 줄 수 있다고 생각하는 초보분들이 많이 있어 보다 다양하게 표현을 하지 못하는
예들을 많이 보았습니다.

하나의 태그요소에 서로다른 속성을 주는 방법은 아래와 같은 형식으로 CSS 정의를 해 줍니다

태그.class name {속성...}

위에서 태그는 적용하고자 하는 태그요소(table,td,textarea,input,form, select, ... 등등...)이고
class name은 임의의 변수명입니다. 변수명은 원하는 변수명으로 설정해 주면 되고 영문으로 부여합니다.

이런씩으로 CSS를 정의해 놓고 본문내에서 적용하고자 하는 해당 태그요소에는 위에 정의한 클래스명을
설정해 주면 지정한 속성으로 표현을 하게 됩니다.

또한 클래스명은 다른 태그요소들을 여러개 묶어서 정의해 줄 수도 있는데

태그1,태그2,태그3.class name {속성들....} 

이러한 형식으로 설정을 해 줍니다.
아래의 예시를 보면 쉽게 이해가 될 겁니다.
이런 부분에 대해서도 [HTML 길라잡이] 게시판내에 내용을 언급해 두었답니다. 
CSS 부분과 Tip 부분을 찾아 보세요.


아래 예시는 세개의 테이블을 본문(body)내에 만들었고 각각의 테이블에 다른 배경색상을 CSS로 정의하는 방법입니다.
먼저 첫번째 테이블은 기본적으로 설정한  배경이미지로 표현을 해 주게 되며
두번째 테이블은 irp1 이란 이름을 가진 클래스를 CSS로 부터 호출해 핑크색상으로 표현을 해 줍니다
나머지 세번째 테이블은 irp2 란 이름을 가진 클래스를 CSS로 부터 호출해 밝은 녹색으로 표현을 해 줍니다
여기서 table은 태그이고 irp1,irp2는 클래스이름이 됩니다.

 - 예  시 -

<STYLE> 
body { background-image:url(http://cafe.daum.net/_c21_/pds_down_hdn/배경.jpg?grpid=1b8R&fldid=AEG&dataid=185&grpcode=keeplove&realfile=%B9%E8%B0%E6.jpg); background-attachment: fixed;1000% background-repeat: no-repeat; background-position: bottom right; } 
table { background-color: transparent; } 
table.irp1 { background-color: pink; } 
table.irp2 { background-color: lightgreen; } 
td { background-color: transparent; } 
</STYLE> 

<table border=1 width=300 height=150><tr>
<td width=100%> 테이블 1<br><br>여기는 기본 테이블 속성<td>
</tr></table>

<br>

<table class="irp1" border=0 width=300 height=150><tr>
<td width=100%> 테이블 2<br><br>여기는 irp1 클래스 속성</td>
</tr></table>

<br>

<table class="irp2" border=0 width=300 height=150><tr>
<td width=100%> 테이블 3 <br><br>여기는 irp2 클래스 속성</td>
</tr></table>


-  위의 결과는 다음과 같이 표현이 됩니다 -

 


 테이블 1

여기는 기본 테이블 속성






 테이블 2

여기는 irp1 클래스 속성




 테이블 3 

여기는 irp2 클래스 속성


--------------------- [원본 메세지] ---------------------
배경을 아래와 같이 지정을 했는데 다른 테이블에 지정해준 색은 배경에 묻혀서 나오지 않네요...ㅠㅠ 
어느 부분을 수정해야 다른 테이블 속의 배경색이 나오나요?