CSS 선택자

선택자(selector)란?

CSS의 효과가 적용될 태그를 지정

Id 선택자

• id 속성은 전체 문서에서 하나의 태그를 식별하기 위해서만 사용됨
• 우선순위가 가장 높음
• css 선택자에서는 #을 사용해서 id임을 표시
• 다음 예제는 id값이 memo인 태그의 컨텐츠를 빨간색으로 표시하도록 함

1 2 3 4 5 6 7 8

<style type="text/css"> #memo { color:red; } </style> <div id="memo"> red </div>

Class 선택자

• class 속성은 일련의 태그를 그룹핑해서 하나처럼 제어하기 위해서 사용
• class 속성에는 공백으로 구분된 여러개의 class가 표시될 수 있음
• css선택자에서는 '.'을 사용해서 class임을 표시

1 2 3 4 5 6 7

<style type="text/css"> .red{ color:red; } </style> <div class="red">red</div> <p class="red intro">Hello world</p> <!-- 하나의 클래스에 두개의 클래스 이름이 정의됨 -->

type 선택자

• 특정 태그명을 가진 엘리먼트 전체를 제어하기 위해서 사용
• css선택자에서는 태그의 이름을 사용함

1 2 3 4 5 6 7

<style type="text/css"> h1{ color:red; font-size:30px; } </style> <h1>Hello world</h1>