CSS3 속성 선택자 사용 방법

영진닷컴에서 출판한 「코딩은 처음이라 with 웹 퍼블리싱」 도서의 P216쪽을 참고한 내용을 바탕으로 「속성 선택자」에 대해서 알아보겠습니다. 사실 속성 선택자의 활용도는 그리 높지는 않습니다. 하지만 뭐든지 알아두면 언젠가는 요긴하게 쓰이는 법! 실제로 친효스킨에서도 속성 선택자를 사용해 스타일을 적용하는 부분도 있습니다. 그러니 무조건 알아둡시다! 아는것이 곧 힘입니다.

 

속성 선택자 문법

기본적으로 속성 선택자는 이렇게 사용합니다.

 

[속성명] {
    속성: 값;
}

이것만으로는 이해가 잘 안 될 수 있으니 예시를 보면서 추가 설명 드리겠습니다.

 

See the Pen CSS3 [속성선택자] by rgy0409 (@rgy0409) on CodePen.

 

추가 설명

<div> 태그 안에 5개의 <a> 자식 요소가 들어있습니다. 각 a태그에는 class값이 입력되어 있으며 첫번째 a태그를 제외한 나머지 요소에는 target이라는 속성이 들어있습니다. target 안에는 _blank와 _self라는 속성값이 들어있구요. HTML 태그 구성을 보시면 각각 어떤 차이가 있는지 잘 보이실 겁니다. 그럼 첫번째 CSS를 살펴볼까요?

 

[target] {
    text-decoration: none;
}

 

이 선택자는 target이라는 속성을 사용하는 모든 요소를 선택합니다. 따라서 첫번째 a태그를 제외한 나머지 a태그의 밑줄(언더라인)이 지워진 상태가 되는 것입니다.

 

[target="_self"] {
    background-color: #ff0;
}

이 선택자는 속성값까지 정의함으로서 target 속성 중에서 _self를 사용하고 있는 속성값을 선택하게 됩니다. 그렇기때문에 유튜브와 브런치의 텍스트에 노란색 백그라운드가 적용되었습니다.

 

[class^="link"] {
    color: red;
}

이 속성 선택자는 link로 시작하는 클래스명을 모두 선택하게 됩니다. 그렇기에 마지막 브런치 링크를 제외한 나머지 텍스트의 색상이 빨간색으로 적용된 것입니다. 마지막 링크인 브런치가 선택되지 않은 이유는 클래스명이 inner로 시작하고 있기 때문에 그렇습니다. 삿갓(^) 특수기호를 사용한다는 독특한 특징이 있습니다. 개인적으로는 삿갓이라기 보다는 웃는 이모티콘의 눈 특수기호라고 표현하고 싶습니다. 하지만 명칭이 너무 긴게 단점이지요.

 

마무리

본문에서 보신 것처럼 속성 선택자는 사용 방법 자체가 일반적인 선택 방법 대비 까다롭습니다. 좀 더 작성해야하는 텍스트가 많다고 해야할까요? 그냥 편안하게 클래스명을 하나 더 추가하거나 nth-child(n)로 편하게 선택하는 방법이 훨씬 깔끔하고 빠릅니다. 하지만 앞서 설명드렸듯 모든 선택 방법을 이미 써버렸는데 다시 선택해야하는 이상한 상황이 왔다면? 도저히 일반 방법으로는 선택할 수 없다면? 최후의 방법으로 속성 선택자를 사용하는 방법이 있다라는것을 알아두시면 좋다는 것입니다. 끝.