css 의 조합...상속?
글쓴이: 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:
[quote].boxA = .blueBottomLine + .blueLe
처럼 쓰는 법은 잘 모르겠지만(표준문서에는 없는 듯 합니다), 원하는 효과라면 이렇게 쓸 수도 있습니다.
<div class="blueBottomLine BlackBackground">~~</div>한칸 띄우는 것만으로도 순서대로 적용됩니다. :D__________________________________
나는 세상에서 가장 중요한 사람이다.
[quote]원하는 효과라면 이렇게 쓸 수도 있습니다. 코드:
음...이렇게 요소에서 직접 적용하는 방법 말구요... 이렇게 쓰면 blueBottomLine 과 BlackBackground 을 모두 적용하고 싶을 때마다 div 에 blueBottomLine BlackBackground 라고 써줘야 하는거잖아요. 혹시라도 그게 적용되었던 요소들을 갑자기 blueBottomLine 에 whiteBackground 로 바꾸게 되기라도 하면...수정이 난감하지요^^;
box1 을 blueBottomLine + blackBackground 로 정의 하고 나중에 box1 을 blueBottomLine + whiteBackground 로 바꿀 수 있다면 좋겠지요...
그런 방법 없을까요...?
댓글 달기