선택자의 종류
1. 전체 선택자
2. 타입 선택자
3. 속성 선택자
4. 가상 클래스 선택자
5. 가상 요소 선택자
선택한 영역의 앞 또는 뒤, 첫번째 글자, 첫번째 줄 등
선택한 영역의 특정 부분에 스타일을 적용하는 선택자를
가상요소 선택자 라고 합니다.
가상요소 선택자는
::가상요소 나 :가상요소 의 형식으로 사용합니다.
가상 요소와 가상 클래스의 차이
가상 요소는 선택한 영역의 특정 요소를 대상으로 하는 선택자이고,
가상 클래스는 선택한 영역의 특정 상태를 대상으로 하는 선택자입니다.
태그의 앞과 뒤 ::after 와 ::before
특정 태그의 앞에 가상요소를 만들때는 before 태그를,
특정 태그의 뒤에 가상요소를 만들때는 after 태그를 사용합니다.
또한 content 속성을 사용하여 가상의 공간을 만들어 사용합니다.
예시 태그
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.movie-list>li{
position:relative;
}
.movie-list>li::before{
content: 'MOVIE';
color: navy;
margin-right: 10px;
}
.movie-list>.new-movie{
font-weight: bolder;
}
.movie-list>.new-movie::after{
content: 'NEW';
color: indianred;
margin-left: 10px;
}
</style>
</head>
<body>
<ul class="movie-list">Disney Movie
<li>Snow White</li>
<li>Pinocchio</li>
<li>Fantasia</li>
<li class="new-movie">Dumbo</li>
<li class="new-movie">Bambi</li>
</ul>
</body>
</html>
before 태그는 MOVIE 텍스트를, after 태그는 NEW 텍스트를 적용할 수 있습니다.
실행 결과
- Disney Movie
- Snow White
- Pinocchio
- Fantasia
- Dumbo
- Bambi
그외의 가상요소
before와 after 외에도 다양한 가상요소 선택자가 존재하며,
mdn 웹 문서 링크를 첨부합니다.
https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-elements
의사 요소 - CSS: Cascading Style Sheets | MDN
CSS 의사 요소(가상 요소)는 선택자에 추가하는 키워드로, 선택한 요소의 일부분에만 스타일을 입힐 수 있습니다. 예를 들어 ::first-line을 사용하면 문단 첫 줄의 글씨체만 바꿀 수 있습니다.
developer.mozilla.org
위 내용을 참고하여 일부 가상요소를 소개하자면
::first-letter
첫번째 글자에 스타일을 적용합니다.
::first-line
첫번째 줄에 스타일을 적용합니다.
::selection
드래그한 영역에 스타일을 적용합니다.
어떻게 적용되는지는 예시 코드를 보면서 확인해 보겠습니다.
예시 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#example-text::first-letter{
font-weight: bolder;
color: red;
font-size: 15px;
}
#example-text::first-line{
font-weight: bold;
color: blue;
}
#example-text::selection{
background-color: yellow;
color: navy;
}
</style>
</head>
<body>
<p id="example-text">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laudantium
obcaecati ratione magni incidunt ipsa voluptatum cupiditate, tempore
hic necessitatibus porro, vitae quia iusto reprehenderit numquam
perferendis distinctio aliquid maxime aut.
</p>
</body>
</html>
실행 결과
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laudantium obcaecati ratione magni incidunt ipsa voluptatum cupiditate, tempore hic necessitatibus porro, vitae quia iusto reprehenderit numquam perferendis distinctio aliquid maxime aut.
이렇게 5가지 선택자를 알아보았습니다.
이제 5가지 선택자를 필요에 따라 사용할 수 있도록 해보겠습니다.
'웹 프론트 엔드 정리본' 카테고리의 다른 글
| 화면 구성하기 - FlexBox 모델 (0) | 2024.10.09 |
|---|---|
| css 알아보기 - 선택자 : 선택자 중첩 (0) | 2024.10.08 |
| css 알아보기 - 선택자 : 가상클래스 선택자 (1) | 2024.10.04 |
| css 알아보기 - 선택자 : 속성과 속성선택자 (0) | 2024.10.02 |
| css 알아보기 - 선택자 : 전체선택자 * 와 타입선택자, class와 id (0) | 2024.09.30 |
