CSS 셀렉터 그룹

2020-04-15

실제로 아래와 같이 제작되어 있는 것을 본 적이 있다.

.stats .txt_win {float:left;width:233px;margin-top:8px;font-weight:bold;font-size:18px;line-height:30px;color:#44a3ff;text-shadow: 1px 1px rgba(1,1,1,0.3);}
.stats .txt_lose {float:left;width:233px;margin-top:8px;font-weight:bold;font-size:18px;line-height:30px;color:#aaa;text-shadow: 1px 1px rgba(1,1,1,0.3);}
.stats .txt_save {float:left;width:233px;margin-top:8px;font-weight:bold;font-size:18px;line-height:30px;color:#44a3ff;text-shadow: 1px 1px rgba(1,1,1,0.3);}

잘 살펴보면 거의 대부분의 선언이 동일하고 색만 약간 다른 것을 볼 수 있다. 게다가 .txt_win.txt_save는 완전히 동일하다. 이럴때 이를 간결하게 만들 수 있는 CSS 구문이 바로 셀렉터 그룹이다. 쉼표(,)로 여러개의 셀렉터를 묶어서 하나의 룰로 선언하는데 사용한다. 이 경우와 같이 살짝 다른 여러가지 디자인이 있을 때 유용하게 사용할 수 있다.

위의 코드에 적용하면 아래와 같이 기능은 동일하지만 중복을 없애서 다시 작성 할 수 있다. 알아보기 쉽게 줄바꿈도 적용했다. 만약 상단 여백이 8px에서 10px로 바뀐다고 해도 한군데만 바꿔주면 된다.

.stats .txt_win,
.stats .txt_lose,
.stats .txt_save {
	float: left;
	width: 233px;
	margin-top: 8px;
	font-weight: bold;
	font-size: 18px;
	line-height: 30px;
	color: #44a3ff;
	text-shadow: 1px 1px rgba(1,1,1,0.3);
}
.stats .txt_lose {
	color: #aaa;
}

기초적인 내용이지만 CSS 특징을 잘 보여주는 구문이다. CSS 관리는 셀렉터 관리 능력에 따라 좌우된다. 이렇게 셀렉터 그룹과 같이 서로 다른 디자인을 묶어주거나 해야 할 때 기능단위 모듈화는 오히려 방해가 된다.

Comments

Post a comment

:

: 공개 되지 않습니다. Gravatar를 표시 합니다.

:

: HTML 태그를 사용할 수 없습니다.