반복되는 css 코드
꽃겨울
#snb_menu{
float:left;
width:240px;
height:100%;
background:url(../img/left_menu/title_sub1.gif) no-repeat;
}
각 서브페이지마다background 이미지가 다릅니다.
그럼 그 변하는background이미지 때문에, 저 코드를 번호붙여 반복 하는 방법 밖에 없나요?
뭔가.. css코드가 불필요하게 길어지는 느낌이라 질문 해봅니다.일정한 규칙을 두고 반복 되는 코드를 줄이는 방법이 있나요?
-
사과
저같은경우
각 서브마다 body에 클래스 명을 다르게 준다음 그 클래스명에 마춰서 사용한답니다.
그럼 개발에서는 body하나만 조절하면되는거고 (위치가 body니 찾기도 쉬움)
.bodyClassName0 #snb_menu {}
.bodyClassName1 #snb_menu {}
.bodyClassName2 #snb_menu {}
이런식으로 제어 한다죠 그럼 나중에 다른것두 활용이 가능하고 같은기능에 다른 클래스가 존재하는 그런경우도 없기때문 -
이슬비
답변 감사합니다.^^
왜인지 모르겠으나, div안에 div 자꾸 중첩되게 쓰는 것과, class 많이 주는 것에 대한,
거부 반응(?)이 있는 듯해요. ㅎㅎ; 되도록이면, 코드 덜 쓰고, 간단하고, 깔끔하게 할까에 너무 치중하는듯...
답을 보니, 조금만 더 생각했음 알수 있었던 거였어요.ㅎㅎ 감사합니다. -
알버트
div id=\snb_menu\ class=\snb_menu_background_a\
와 같은식으로 만드신후에
기본 넓이 속성등을 선언 하시고 class 네이밍으로 background-image 를 선언 하시면 좋을거 같네요
style
.snb_menu-background_a {background:url(백그라운드 이미지 A);}
.snb_menu-background_b {background:url(백그라운드 이미지 B);} -
마음
id선택자에는 공통 속성만을 두고, 가변적인 background 속성은 클래스 선택자를 만들어서 적용시키면 모든 속성을 copy&paste할 필요가 없어지지 않을까요 ^^;