CSS 속성선택자 동일 클래스명 일괄선택

예를 들어, 내가 어떤 타입의 클래스를 일괄 선택하고자 할 때는 속성선택자를 사용하면 된다. [class^="클래스명"]와 같은 원리로 카테고리에서 외부링크 부분만 적용하고 싶을 때는 li[class^="t_menu_link_"] > a로 일괄 및 다중선택이 가능했다. 내가 이거 알아내려고 몇 시간동안이나 뼈빠지게 CSS선택자 공부했다.

CSS 속성선택자 사용방법

사실 같은 자식 내에 있는 리스트 타입이였으면 그냥 nth-child(even) 또는 (odd)로 하거나 (3n+1) 이런식으로 구현이 가능했을 텐데, 문제는 자식 개체가 모두 독립적인 리스트 타입을 가지고 있어서 위의 방법이 적용이 안되는 것이였다. 방구석 웹디자이너가 이런 사실을 제대로 알고 있을리가 없다. 그래서 연구하고, 또 연구한 결과 공통적으로 t_menu_link_(*number)의 값을 가지고 있었고 class^로 속성선택자를 활용하면 내가 명시한 ="t_menu_link"의 이름을 가지고 있는 클래스가 모두 선택이 된다.

내가, 내가 이걸 알려고 새벽에 몇 시간동안이나 테스트하고 공부했는지 모르겠다. 속성선택자의 종류는 매우 많지만, ^는 동일한 클래스 또는 속성의 이름을 가지고 있는 모든 요소가 다중선택이 되는 것이다. 어쨌든 이 속성선택자를 사용해서 내가 원하는 결과물을 만들어냈다. 티스토리 스킨 수정 하나 하는 것도 마음처럼 쉽게 되는 것이 아니다.

웹디자인에서 코드적인 부분에 대한 설명은 프로그래밍 카테고리에서 설명하고 있다. 웹디자인도 일러스트 툴 다루듯이 쉽게 쉽게 수정할 수 있으면 좋겠다. 디버깅도 편하긴 하지만, 어느정도는 수작업으로 코딩을 해야하는 것이 쉽지 않다. 정확한 수치값도 찾기 힘들고 말이다.