현재 위치

홈 ›› Forums ›› 공부 ›› 프로그래밍 QnA

css 의 조합...상속?

mykldp의 이미지
글쓴이: mykldp / 작성시간: 월, 2004/07/05 - 10:05오후

css 의 조합(?)...상속(?) 같은게 가능한가요? 아래와 같이 작업할 수 있다면 참 좋겠다는 생각을 종종 했습니다.

/* 위쪽 가장자리가 파란색 선 */
.blueTopLine
{
	border-style:solid;
	border: 1 0 0 0;
	border-color:#0000FF;
}

/* 아래쪽 가장자리가 파란색 선 */
.blueBottomLine
{
	border-style:solid;
	border: 0 0 1 0;
	border-color:#0000FF;
}

/* 왼쪽 가장자리가 파란색 선 */
.blueLeftLine
{
	border-style:solid;
	border: 0 0 0 1;
	border-color:#0000FF;
}

/* 오른쪽 가장자리가 파란색 선 */
.blueRightLine
{
	border-style:solid;
	border: 0 1 0 0;
	border-color:#0000FF;
}

/* 가상문법: 아래쪽, 왼쪽 가장자리가 파란색 선 (blueBottomLine과 blueLeftLine 의 조합)*/
.boxA = .blueBottomLine + .blueLeftLine

/* 가상문법: 위쪽, 오른쪽 가장자리가 파란색 선 (blueRightLine과 blueTopLine 의 조합) */
.boxB = .blueRightLine + .blueTopLine

/* 가상문법: 아래쪽 가장자리가 파란색 선이고 배경색은 검정  (blueBottomLine을 상속하고 background-color 를 추가)*/
.blueBottomLineAndBlackBackground > .blueBottomLine
{
	background-color:#FFFFFF
}


<div class="boxA">~~</div>
<div class="boxB">~~</div>
<div class="blueBottomLineAndBlackBackground">~~</div>

음....이런 식으로 css 클래스 정의를 조합하거나 상속해서 사용할 수 있으면 좋겠다는 생각을 합니다. 혹시 되는건데 제가 모르고 있는지, 아니면 비슷하게 사용할 수 있는 팁같은 것이 있는지 궁금합니다...

혹시 비슷한 생각해보지 않으셨나요..^^

Forums: 
프로그래밍 QnA
행복한고니의 이미지

글쓴이: 행복한고니 / 작성시간: 월, 2004/07/05 - 10:53오후

Quote:
.boxA = .blueBottomLine + .blueLeftLine

처럼 쓰는 법은 잘 모르겠지만(표준문서에는 없는 듯 합니다), 원하는 효과라면 이렇게 쓸 수도 있습니다.

<div class="blueBottomLine BlackBackground">~~</div> 한칸 띄우는 것만으로도 순서대로 적용됩니다. :D

__________________________________
나는 세상에서 가장 중요한 사람이다.

mykldp의 이미지

글쓴이: mykldp / 작성시간: 월, 2004/07/05 - 11:19오후

Quote:

원하는 효과라면 이렇게 쓸 수도 있습니다.

코드:
<div class="blueBottomLine BlackBackground">~~</div>

한칸 띄우는 것만으로도 순서대로 적용됩니다.

음...이렇게 요소에서 직접 적용하는 방법 말구요... 이렇게 쓰면 blueBottomLine 과 BlackBackground 을 모두 적용하고 싶을 때마다 div 에 blueBottomLine BlackBackground 라고 써줘야 하는거잖아요. 혹시라도 그게 적용되었던 요소들을 갑자기 blueBottomLine 에 whiteBackground 로 바꾸게 되기라도 하면...수정이 난감하지요^^;

box1 을 blueBottomLine + blackBackground 로 정의 하고 나중에 box1 을 blueBottomLine + whiteBackground 로 바꿀 수 있다면 좋겠지요...

그런 방법 없을까요...?

둘러보기