여러개의 클래스 css 깔끔하게 정리
본문
.class1 .class2 .class3 .class4 이렇게 4개의 클래스가 있고
.class 1 a, a:hover, a:focus, a:active
.class 2 a, a:hover, a:focus, a:active ... 각각 4개의 링크 종류에 관한 값이 있는데 class 1,2,3,4 다 같습니다.
쉽게말해 값들이 다 같고 클래스만 다를때
.class1, .class2, .class3, .class4 a, a:hover, a:focus, a:active {} 이렇게 하면 되나요?
하나로 묶어적을때 어떻게 하는지 헷갈려서요..;; ㅎ
감사합니다
답변 4
하나로 몰아서 선언할때 각 객체를 컴마로 연결해주는건 맞습니다.
전혀 다른 용도로 쓰인 클래스여도 공통된 값으로 되있다면 묶어서 선언하는게 효율적이겠죠.
body, .wrap, .head, .foot {}
이런식으로요.
그런데 질문본문의 예시가 뭔가 또 다른 목적이 있어보이는데..
각 classN 클래스의 앵커와 각 hover,focus,active에 똑같은 값을 주려고 하시는건가요?
단순무식하게 한다면 일일이 다 나열해서 선언해주는 방법이 있겠구요..
.class1 a, .class1 a:hover, .class1 a:focus, .class1 a:active,
.class2 a, .class2 a:hover, .class2 a:focus, .class2 a:active,
.class3 a, .class3 a:hover, .class3 a:focus, .class3 a:active,
.class4 a, .class4 a:hover, .class4 a:focus, .class4 a:active,
a:hover, a:focus, a:active {}
보통은 Hail님처럼 하는게 좋겠죠. 공통된 스타일을 하나로 묶는게 클래스를 사용하는 목적이니..
같은 내용이라면 굳이 따로 선언할 필요도 없겠고, 일일이 따로 선언한다면 유지보수에도 좋지 않겠죠.
.class1 {}
.class2 {}
.class3 {}
.class4 {}
.class a, .class a:hover, .class a:focus, .class a:active {}
<div class="class class1"><a href="#">Class1</a></div>
<div class="class class2"><a href="#">Class2</a></div>
<div class="class class3"><a href="#">Class3</a></div>
<div class="class class4"><a href="#">Class4</a></div>
앵커에 직접 클래스를 주는 경우라면..
.class1 {}
.class2 {}
.class3 {}
.class4 {}
.class, .class:hover, .class:focus, .class:active {}
<a class="class class1" href="#">Class1</a>
<a class="class class2" href="#">Class2</a>
<a class="class class3" href="#">Class3</a>
<a class="class class4" href="#">Class4</a>
이런식이 되겠군요.
class="class1 link"
class="class2 link"
class="class3 link"
class="class4 link"
<style>
.link a{}
</style>
이런식으로 하시는게 더 편하지 않을까요?
감사합니다. 다만 제가 궁금했던건
.border-color, i.border-color, img.border-color {
border-color: rgb(233, 27, 35);
}
이런식으로 여러개를 한줄에 나열하려면 어떻게 하는게 맞는가 알고파서요...
홈짱님 4개의 클래스에 해당하는 a태그 값들이 같을때 아래와같이 해도되나요?
.class1 .class2 .class3 .class4 a, a:hover, a:focus, a:active {
}
그렇겐 안 됩니다. 쉼표(,)가 하나의 선택자를 나누는 기준이라...
공통 CSS라면 ,로 구분짓는게 맞습니다
.class1 a {border-top:1px solid #ddd;}
.class2 a {border-top:1px solid #ddd;}
.....
등등 모두 동일한 css이라면 굳이 각자 따로 하는게 아닌
콤마로 .class1 a,.class2 a {border-top:1px solid #ddd;}
하여 추후 유지보수 또는 리뉴얼때 쉽게 구분짓습니다
또는 < 를 이용하기도 합니다.
