셀렉터

셀렉터란?

스타일은 적용 대상이 있어야 하는데 셀렉터가 바로 그 대상입니다. 기본적으로 태그, 아이디, 클래스를 셀렉터로 사용하며 이들을 조합해서 특정 조건에 맞는 셀렉터를 정의해 사용하게 됩니다.

• html 문서에서 스타일의 적용 대상을 지칭.
• 디자인이 적용되기를 원하는 특정 부분의 선택이 용이하도록 적절한 태그 구조를 사용.
• html 문서의 기본 구성요소인 태그는 가장 기본이 되는 셀렉터.
• 태그에 사용할 수 있는 id 속성은 문서내 유일한 값으로 셀렉터로 사용할 수 있음.
• 스타일 정의에 클래스를 사용하고 html 태그에 class 속성으로 스타일 지정.
  

태그 셀렉터

태그 셀렉터는 태그 이름으로 요소를 선택.

문서내 임의이 태그를 선택자로 사용.

같은 디자인 속성을 가지는 여러 태그는 ,로 나열해 일괄적용.

p {
  text-align: center;
  color: red;
}

h1,h2,h3,h4 { color: blue; }

경우에 따라서는 태그의 특정 속성에 대해 셀렉터를 지정하는 것이 가능. 예를 들면 <input>
태그는 type
속성에 따라 다양한 입력양식을 제공. 이경우 특정 type
에만 배경색이나 크기를 지정하기 위해서는 다음과 같이 태그 셀렉터에 속성을 함께 사용.

input[type=text] {
  background-color: blue;
  color: white;
}

id 셀렉터

• HTML 요소의 id 속성을 사용해 특정 요소를 선택.
• id는 페이지 내에서 유일한 값이기 때문에 하나의 고유한 요소를 선택하는 데 사용.

#id_name { color: blue; }

---
<div id="id_name">
...
</div>

class 셀렉터

• 클래스 셀렉터는 특정 클래스 속성이 있는 요소를 선택.
• .class name 형식으로 사용.
• class로 디자인을 먼저 정해놓고 필요한 곳에서 해당 class를 지정해 사용하는 방식임.

.class_name1 { color: blue; }
p.class_name2 { color: red; }

---
<div class="class_name1">
...
</div>

기본 셀렉터 조합

기본 셀렉터인 태그, 클래스, 아이디의 조합에 따라 다양한 셀렉터 정의가 가능. 예를 들어 하나의 태그에 대해 어떤 경우에는 적용이되고 어떤 경우에는 적용이 되지 않는 상황을 셀렉터 정의에 따라 만들 수 있음.

1) 동시 지정

,를 이용해 셀렉터를 나열하면 해당 셀렉터에 동일한 속성을 부여할 수 있음.

h1, h2 {...}
.box, .note {...}

• h1,h2 에 동일 속성 지정
• box, note 클래스에 동일 속성 지정

태그와 클래스 결합

태그와 클래스를 ,을 이용해 결합할 수 있음. 예를 들면 같은 클래스를 사용 하더라도 h1 과 h2 에 각각 다르게 적용하고 싶은 경우에 사용할 수 있음. 다음 예제서는 .header 에 공통된 여러 속성을 적용해 두고 h1, h2에서는 각각 특정 속성만 변경하는 형식으로 많이 사용.

.header { color: red; }
h1.header { color: blue;}
h2.header { color: green;}

• header클래스를 사용하는 모든 태그의 텍스트는 붉은색으로 출력.
• h1에서 사용할 경우 파란색, h2의 경우 녹색이 적용.