<a class="command-bold toolbar button" id="test3"><b>C</b></a>특정 element의 class에 공백을 주는 방법이 있더군요. (저는 처음 봤습니다.)
a.button각각이 css에 적용이 될 수 있더군요. 각각은 우선순위를 가지고 있구요.
a.button.toolbar
a.button.toolbar.command-bold
a.command-bold
a.toolbar
a.toolbar.command-bold
...
단계를 상세히 적을수록 우선순위가 더 높은 것 같습니다. vox에서는 각각의 비슷한 element들이 병렬로 연결됬을 때 공통된 style은 a.button에 정의하고 상세한 style은 a.button.command-bold와 같은 형태로 적용을 했더군요.
참으로 신기한 css의 정신세계라고나 할까요 ^^
Copyright
코드의 모든 권한은 Six Apart에 있습니다. Six Apart의 JavaScript 코드는 Copyright과 Disclaimer를 포함하는 조건하에서 재배포가 가능합니다.
Copyright (c) 2005, Six Apart, Ltd.
All rights reserved.
Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are
met:
* Redistributions of source code must retain the above copyright
notice, this list of conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above
copyright notice, this list of conditions and the following disclaimer
in the documentation and/or other materials provided with the
distribution.
* Neither the name of "Six Apart" nor the names of its
contributors may be used to endorse or promote products derived from
this software without specific prior written permission.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
P.S. IE6에서 다중 클래스 적용 문제
<a class="command-bold toolbar button" id="test3"><b>C</b></a>에 대해서 command-bold class 적용하고 toolbar에 대해서 적용한 class에 대해서 각각에 대한 적용은 됩니다.
그런데 a.toolbar.command-bold와 같은 css는 적용이 안되고 에러가 납니다.
제가 실험을 제대로 안했네요. 죄송합니다. (__)
공백을 준다는 의미가 무엇인지 한참 생각했습니다. ㅡㅜ; 하나의 element 에 다중 class 적용이 가능하다는 것을 발견하셨다는 이야기 맞죠? ^^; 첨언하면 id 는 저렇게 부여하는 것이 불가능 하지만 class 는 가능합니다. 한편 저렇게 다중 class 를 적용하는 것보다는 id 를 사용하는 것이 좋고 다중 class 를 사용하는 것보다는 단일 class 에 정의하여 사용하는 것이 최적의 코딩이라는 것을 알려드립니다. 다중 class 는 유지보수시 애로사항이 많이 발생하는 문제가 있습니다. 하나의 element 디자인을 수정하기 위하여 여러개의 class 를 수정해야 하고 그것들이 또 다른 element 에 어떤 영향을 주는지 직관적으로 이해하기 어려운 측면 때문에 그렇습니다. 따라서 id 나 class 의 수는 적을수록 유지보수에 좋습니다.
답글삭제@정찬명 - 2007/01/04 00:37
답글삭제다중클래스 였군요 ^^;;;; 좋은 정보 감사드립니다. ^^
개인적인 생각입니다만, class가 많더라도... css가 자신의 view와 관련된 기능을 가져갈 수 있다면 다중클래스라도 괜찮지 않을까 생각이 들기는 합니다.. 만... 아.. 전제 조건은 복잡도가 높은 Web Application이라는 가정입니다.
css에는 아직도 많이 부족한지라. ^^;;;;;;
앗!IE에서는 다중 클래스가 적용 안되는줄 알았는데 되나보죠?
답글삭제네 다중 class(Multipul Classes) 라고 부릅니다. 하지만 옷장수님께서 전제하시는 복잡도 높은 사이트 라고 해도 class 를 많이 사용하게 되면 class 의 복잡도는 더욱 증가하게 될꺼라는 제 견해도 염두해 주셨으면 좋겠습니다. ^^; 다중 class 는 마치 사돈의 팔촌과 같이 class 간 연계를 가지게 되어 있으므로 a 라는 class 를 수정할 때 z 라는 class 에 어떤 영향을 줄것인지에 대하여도 고려되여야 합니다. 물론 잘 알고 계시겠지만요 ^^a
답글삭제한편 KIPA 에서 제공하는 '실전웹표준가이드' 에서는 IE6 버전이 이러한 다중 class 를 지원하지 않는다고 잘못 표현하였는데 옷장수님 덕분에 이 사실을 알게 되었습니다. 역시 지식은 나누려고 할 때 나에게 더 크게 돌아온다는 사실을 실감하네요.
@정찬명 - 2007/01/04 13:57
답글삭제정찬명 님 덕분에 많은걸 저도 배웠습니다.
^^;;; 저야.. js만알고... css쪽은 아직 모르는게 너무 많답니다.
자주 들러주셔서 많은 의견 부탁드릴께요 ^^
@유겸애비 - 2007/01/04 07:56
답글삭제부분적으로 되던데요 ^^