css
CSS - 선택자 기초
선택자란 특정 태그나 속성을 선택한 요소에 대해 스타일을 적용할 수 있습니다. 참고로 @font-face 나 @media 처럼 "@" 로 시작하는 키워드는 선택자가 아니기 때문에 선택될 수 없습니다.
하나의 요소에만 스타일을 적용하고 싶은데 어떻게 해야 할까요? 이럴 때는 이렇게 작성합니다.
이것을 아래와 같이 작성할 수 있습니다.
하위 선택자는 부모요소가 포함하는 모든 하위 요소에 스타일을 적용합니다.
c
e
우선 순위
css 에는 스타일의 우선 순위가 있습니다. 어떤 태그에는 중복이 될 수 있고, 공동으로 작업하는 프로젝트에서 우선적으로 적용하고 싶은 스타일이 있다면 우선 순위를 생각해볼 수 있습니다.!important > 직접지정 > id 속성 > class 속성 > 태그 순!important
!important 를 선언한 요소가 우선순위가 가장 높습니다. 이 속성은 속성 값 뒤에 기술하면 됩니다..use-color { color: red !important; }직접지정
사용자가 태그에 style을 직접 지정한 것을 두 번째로 합니다.<div style="color:red;"> 적색 글자로 표현합니다. </div>일반 선택자
선택자에 사용할 수 있는 기본적인 표현은 다음 표와 같습니다.| 선택자 | 설 명 |
|---|---|
| * | 모든 요소에 스타일을 적용함. |
| <태그> | 일치하는 모든 태그에 스타일을 적용함. |
| .class 속성 | class 속성의 값과 일치하는 모든 요소. (class 속성은 다수의 값을 가질 수 있음) |
| #id 속성 | id 속성의 값과 일치하는 모든 요소. (id 속성은 하나의 값만 갖음) |
* 선택자
* 는 전체 요소를 대상으로 하며 모든 요소에 스타일을 적용합니다.* { 내용 }
or
body { 내용 }class 선택자
점(.)으로 시작하며, class 속성의 값을 찾습니다. class 에는 다수의 값을 가질 수 있습니다.<style>
.example {color: brown;}
</style>
<p class="example">스타일로 지정한 예제.</p>id 선택자
샵(#)으로 시작하며, id 속성의 값을 찾습니다. id 에는 하나의 값만 존재합니다.<style>
#example {color: brown;}
</style>
<p id="example">스타일로 지정한 예제.</p>복합 선택자
복합 선택자는 두 개 이상의 요소를 이용하는 방법입니다. 모든 스타일 속성들을 지정하는 대신 기본 속성들을 제외하여 스타일을 적용할 수 있습니다.| 선택자 | 설 명 |
|---|---|
| a1#a2 | a1 요소의 속성이 a2 인 요소 |
| a1, a2, ... | 쉼표로 구분해서 여러 요소를 한꺼번에 스타일을 적용 |
| a1 a2 | a1의 자손인 a2요소를 찾음. 부모요소에 포함된 모든 하위요소에 적용. |
| a1 > a2 | a1의 자식인 a2요소를 찾음. |
| a1 + a2 | a1 다음에 나오는 첫 번째 요소가 a2 요소라면 적용. |
| a1 ~ a2 | a1 다음에 나오는 모든 요소가 a2 요소라면 모두 적용. |
a1#a2 선택자
동일한 속성을 가진 두 요소가 있다고 가정해봅시다.<style>
#example {
background: red;
}
</style>
<!-- 두 요소 모두 스타일이 적용됨 -->
<div id="example"> a </div>
<p id="example"> b </p>하나의 요소에만 스타일을 적용하고 싶은데 어떻게 해야 할까요? 이럴 때는 이렇게 작성합니다.
<style>
div#example {
background: red;
}
</style>
<!-- div 의 example 속성만 선택됨 -->
<div id="example"> a </div>
<p id="example"> b </p>
a1, a2 선택자
스타일 시트를 만들다 보면 똑같은 스타일을 정의할 때가 생깁니다. 이럴 때는 쉼표(,)로 구분해서 여러 요소를 한꺼번에 정의할 수 있는데, 이것을 그룹 선택자라 부릅니다.h1 b { color: red }
h2 b { color: red }
h1 attr { color: red }
h2 attr { color: red }이것을 아래와 같이 작성할 수 있습니다.
h1 b, h2 b, h1 attr, h2 attr { color: red }a1 a2 선택자
부모요소가 포함하는 아래 요소를 자식요소라 부르고, 그 아래 요소를 자손, 또는 손자요소라고 부릅니다. 이것을 통틀어 하위요소라고 합니다.<style>
#user-container ul {
border: 1px solid;
}
</style>
<div id='user-container'>
<!-- ul : 자식요소 -->
<ul>
<li>자식 요소 1</li>
<li>자식 요소 2</li>
<li>자손
<!-- ul : 자손요소 -->
<ul>
<li>자손 요소 1</li>
<li>자손 요소 2</li>
</ul>
</li>
<li>자손
<!-- ul : 자손요소 -->
<ul>
<li>자손 요소 1</li>
<li>자손 요소 2</li>
</ul>
</li>
</ul>
</div>- 자식 요소 1
- 자식 요소 2
- 자손
- 자손 요소 1
- 자손 요소 2
- 자손
- 자손 요소 1
- 자손 요소 2
a1 > a2 선택자
이 선택자를 자식 선택자라고 부릅니다. 부모요소 아래 요소, 즉 자식요소에만 스타일을 적용합니다.<style>
#user-container > ul {
border: 1px solid;
}
</style>
<div id='user-container'>
<!-- ul 자식요소 -->
<ul>
<li>자식 요소 1</li>
<li>자식 요소 2</li>
<li>자손
<!-- ul : 이건 자손요소 -->
<ul>
<li>자손 요소 1</li>
<li>자손 요소 2</li>
</ul>
</li>
<li>자손
<!-- ul : 요것도 자손요소 -->
<ul>
<li>자손 요소 1</li>
<li>자손 요소 2</li>
</ul>
</li>
</ul>
</div>- 자식 요소 1
- 자식 요소 2
- 자손
- 자손 요소 1
- 자손 요소 2
- 자손
- 자손 요소 1
- 자손 요소 2
a1 + a2 선택자
같은 레벨에 있는 요소가 형제요소가 되고, 이것을 인접 형제 선택자라 부릅니다. 이 선택자는 a1 다음에 나오는 첫 번째 요소가 a2 요소라면 스타일을 적용하고 아니라면 적용하지 않습니다.<style>
#use-sibling h4+div {
background: yellow;
}
</style>
<div id="use-sibling">
<div>a</div>
<!-- h4 다음에 div 이므로 일치 -->
<h4>b</h4>
<div>c</div>
<div>d</div>
</div>
a
b
c
d
<style>
#use-sibling h4+div {
background: yellow;
}
</style>
<div id="use-sibling">
<div>a</div>
<!-- h4 다음에 div 가 아니므로 불일치 -->
<h4>b</h4>
<aa>c</aa>
<div>d</div>
</div>a1 ~ a2 선택자
일반 형제 선택자라 부르는 이 선택자는 인접 형제 선택자와는 달리 a1 다음에 나오는 모든 요소가 대상이 됩니다.<style>
#use-sibling h4~div {
background: yellow;
}
</style>
<div id="use-sibling">
<div>a</div>
<!-- h4 다음에 나오는 모든 div 를 찾음 -->
<h4>b</h4>
<aa>c</aa>
<!-- 일치 -->
<div>d</div>
<bb>e</bb>
<!-- 일치 -->
<div>f</div>
</div>
a
b
d
f
0 댓글