choirim.tistory.com/11 - CSS란 무엇일까?
저번 글에서 우리는 css의 개념과 css를 적용하는 방법에 대해 알아보았습니다. css 선택자(selector)는 css를 적용시킬 html요소 부분을 의미하였습니다. 이번에는 그 css 선택자(selector)에 대해 자세히 알아보겠습니다. 😀
CSS 선택자(Selector)에는 HTML 태그 선택자뿐만 아니라 다양한 선택자들이 있습니다. 함께 차근차근 알아봅시다.
1. 태그 선택자
저번 글에서 보았듯이 기본적으로 선택자에 html 태그를 넣어주면 html요소에 css가 적용됩니다.
h1 {
color:red;
}
2. 그룹 선택자
여러 선택자를 함께 사용하고 싶을 때는 쉼표( , )를 이용해 적용해주면 됩니다.
h1, h2 {
color:red;
{
3. 전체 선택자
전체 html 요소에 css를 적용하고 싶다면 *를 이용합니다.
* {
color : red;
}
4. class 선택자
html요소에서 같은 태그가 존재할 시 특정한 곳에 css를 적용하고 싶을 때 class 값을 지정하여 사용합니다. 마침표 (.) 뒤에 class값을 적어 적용합니다. class 값은 자유롭게 지정 가능하고 중복이 가능합니다.
<head>
<style>
.color {
color:red;
}
</style>
</head>
<body>
<ul>
<li class="color"> first </li>
<li class="color"> second </li>
<li> third </li>
<ul>
</body>result
- first
- second
- third
5. id 선택자
class 선택자와 달리 id 선택자는 단 하나만 존재할 수 있습니다. # 뒤에 id 값을 적어 적용합니다. id 값 또한 자유롭게 지정할 수 있습니다.
<head>
<style>
.color {
color:red;
}
#underline {
text-decoration:underline;
}
</style>
</head>
<body>
<ul>
<li class="color"> first </li>
<li class="color"> second </li>
<li id="underline"> third </li>
<ul>
</body>result
- first
- second
- third
이 선택자들 말고도 다양한 선택자들이 있습니다만 이번 시간에는 5가지 중요한 선택자에 대해서만 알아봤습니다 . 다음 시간에는 오늘 알아본 id, class 선택자들이 적용되는 순서에 대해 알아보겠습니다.
'CSS' 카테고리의 다른 글
| [CSS] 포지션 속성 (position property) (0) | 2021.01.01 |
|---|---|
| [CSS] 디스플레이 속성 (display property) (0) | 2021.01.01 |
| [CSS] 박스 모델 (Box Model) (0) | 2020.12.30 |
| [CSS] 적용 우선 순위 (0) | 2020.12.30 |
| [CSS] CSS란 무엇일까? (0) | 2020.12.24 |
choirim.tistory.com/11 - CSS란 무엇일까?
저번 글에서 우리는 css의 개념과 css를 적용하는 방법에 대해 알아보았습니다. css 선택자(selector)는 css를 적용시킬 html요소 부분을 의미하였습니다. 이번에는 그 css 선택자(selector)에 대해 자세히 알아보겠습니다. 😀
CSS 선택자(Selector)에는 HTML 태그 선택자뿐만 아니라 다양한 선택자들이 있습니다. 함께 차근차근 알아봅시다.
1. 태그 선택자
저번 글에서 보았듯이 기본적으로 선택자에 html 태그를 넣어주면 html요소에 css가 적용됩니다.
h1 {
color:red;
}
2. 그룹 선택자
여러 선택자를 함께 사용하고 싶을 때는 쉼표( , )를 이용해 적용해주면 됩니다.
h1, h2 {
color:red;
{
3. 전체 선택자
전체 html 요소에 css를 적용하고 싶다면 *를 이용합니다.
* {
color : red;
}
4. class 선택자
html요소에서 같은 태그가 존재할 시 특정한 곳에 css를 적용하고 싶을 때 class 값을 지정하여 사용합니다. 마침표 (.) 뒤에 class값을 적어 적용합니다. class 값은 자유롭게 지정 가능하고 중복이 가능합니다.
<head>
<style>
.color {
color:red;
}
</style>
</head>
<body>
<ul>
<li class="color"> first </li>
<li class="color"> second </li>
<li> third </li>
<ul>
</body>result
- first
- second
- third
5. id 선택자
class 선택자와 달리 id 선택자는 단 하나만 존재할 수 있습니다. # 뒤에 id 값을 적어 적용합니다. id 값 또한 자유롭게 지정할 수 있습니다.
<head>
<style>
.color {
color:red;
}
#underline {
text-decoration:underline;
}
</style>
</head>
<body>
<ul>
<li class="color"> first </li>
<li class="color"> second </li>
<li id="underline"> third </li>
<ul>
</body>result
- first
- second
- third
이 선택자들 말고도 다양한 선택자들이 있습니다만 이번 시간에는 5가지 중요한 선택자에 대해서만 알아봤습니다 . 다음 시간에는 오늘 알아본 id, class 선택자들이 적용되는 순서에 대해 알아보겠습니다.
'CSS' 카테고리의 다른 글
| [CSS] 포지션 속성 (position property) (0) | 2021.01.01 |
|---|---|
| [CSS] 디스플레이 속성 (display property) (0) | 2021.01.01 |
| [CSS] 박스 모델 (Box Model) (0) | 2020.12.30 |
| [CSS] 적용 우선 순위 (0) | 2020.12.30 |
| [CSS] CSS란 무엇일까? (0) | 2020.12.24 |
