Selector: HTML의 어떤 tag를 고를 것인지 규정하는 문법
Selector의 종류
Selector | 기호 | 역할 및 설명 |
Universal | * | 모든 tag에 적용하는 기호 |
Type | tag명 | 특정 tag에만 적용 |
State | : | 콜론 기호는 CSS에서 State라 부르며 마우스 hover와 같은 상태에 따라 스타일링 한다. tag 명 옆에 붙여서 작성한다. |
Attribute | [속성명] | Attribute라 부르며 속성을 갖는 tag를 스타일링 한다. tag 명 옆에 붙여서 작성한다. |
ID | #id | 해당 id를 갖는 곳에만 적용 |
Class | .class | 해당 class를 지정한 곳에 적용 |
[참고] ID와 Class의 차이
- ID
문서 내 유일한 요소에 스타일을 적용할 때 사용한다. 주로 <header>, <footer> 와 같이 문서 내 유일한 요소로 등장하는 것에 사용하고, 문서 내에서 해당 ID가 한번만 사용되면 일반적인 div 태그에도 사용해도 된다. - Class
복수의 요소에 스타일을 적용할 때 사용한다. 예를 들어 문서 내 <section>, <article>과 같이 여러번 등장하는, 동일한 스타일을 가진 요소들에 대해 스타일을 적용할 때 사용한다. - 우선 순위: ID > Class
Selector 사용하기
기본 구조
selector {
property: value;
}
Universal
1) 기본 예시
* {
color: green; /* 모든 tag에 green 적용 */
}
Type
1) 기본 예시
div {
color: green; /* div tag에 green 적용 */
}
State
1) 기본 예시
button:hover {
color: green; /* button tag에 마우스 hover 시 green 적용 */
}
Attribute
1) 기본 예시
- .css 파일
a[href] {
color: green; /* a 태그 중 href 속성을 가진 태그만 green 적용 */
}
- .html 파일
...
<a href="naver.com" > Naver </div> // green 적용됨
<a href="google.com" > Google </div> // green 적용됨
...
2) 속성에 특정값 조건 지정
- .css 파일
a[href="naver.com"] {
color: green; /* a 태그 중 href 속성값이 naver.com인 태그만 green 적용 */
}
- .html 파일
...
<a href="naver.com" > Naver </div> // green 적용됨
<a href="google.com" > Google </div> // 미적용!
...
ID
1) 기본 예시
- .css 파일
#test_id {
color: green; /* test_id라는 id를 지정한 tag에 green 적용 */
}
- .html 파일
...
<div id="test_id" > id 사용 test </div> // green 적용됨
...
2) 특정 태그에 대한 ID 적용
- .css 파일
h1#test_id {
color: green; /* h1 태그 중 test_id라는 id를 지정한 tag에 green 적용 */
}
- .html 파일
...
<h1 id="test_id"> h1에서 id 사용 test </h1> // green 적용됨
<div id="test_id"> div에서 id 사용 test </div> // 미적용!
...
Class
1) 기본 예시
- .css 파일
.test_class {
color: green; /* test_class라는 class를 지정한 tag에 green 적용 */
}
- .html 파일
...
<div class="test_class" > class 사용 test </div> // green 적용됨
...
'Front-End > HTML, CSS' 카테고리의 다른 글
[CSS] Flexbox 개념과 적용 (0) | 2021.12.03 |
---|---|
[CSS] CSS 기초 3. Layout(display, position) (0) | 2021.12.02 |
[HTML] 기초(2) Document and website structure (0) | 2021.10.13 |
[CSS] CSS 기초 (0) | 2021.10.12 |
[HTML] HTML 기초 (0) | 2021.10.11 |