[CSS 1] 선택자(Selector)와 우선순위

HTML에서 style 태그를 배웠다. 이 style 태그 안에 들어가는 내용을 CSS(Cascading Style Sheets)라고 부르는데, CSS를 선언하는 방식은 다음과 같다.

선택자(Selector)와 선언(Declaration)

<style>
    a {
        color: black;
        text-decoration: none;
    }
</style>

이 코드에서 a는 해당 웹 페이지의 모든 a 태그를 선택한다는 점에서 선택자(selector)라 하고, color:red; 부분을 선언(declaration) 혹은 효과라고 한다.

이때 콜론 앞의 color는 속성(property), 뒤의 red는 값(value)이라고 한다.

태그의 우선순위

각 태그는 클래스(class)나 아이디(id)를 지정해줄 수 있는데, 아이디는 중복이 불가하지만 클래스는 중복이 가능하기에 우선순위가 발생한다. style 태그 안에 각각 id, class, tag에 대한 내용이 지정되어있다면

id 선택자 > class 선택자 > tag 선택자순으로 적용되며, 같은 우선순위끼리는 더 나중에(코드 가까이에) 선언된 스타일이 우선 적용된다.

id와 class는 태그 안에 함께 표기하면 되고, class는 ‘.’(온점)으로, id는 ‘#’(해시태그)로 구분하여 표기한다. 아래는 예제 코드

<style>
    #active {
        color: red;
    }
    .saw {
        color: gray;
    }
    a {
        color: black;
        text-decoration: none;
    }
    h1 {
        font-size: 120px;
        text-align: center;
    }
</style>
<h1><a href="index.html">WEB</a></h1>
<ol>
    <li><a href="1.html" class="saw">HTML</a></li>
    <li><a href="2.html" class="saw" id="active">CSS</a></li>
    <li><a href="3.html">JavaScript</a></li>
</ol>

출처: [생활코딩!HTML+CSS+자바스크립트 CSS편 Chapter 04~07]