1. 가상 클래스(pseudo class)
요소에 직접 클래스 입력하는 것이 아니라 브라우저 스스로 특정 상황이 되면 자동적으로 클래스를 적용시켜줌
:pseudo-class {
property: value;
}가상클래스는 :(콜론)기호를 써서 나타낸다.
가상 클래스 이용시 CSS만으로 처리가 가능하므로 훨씬 효율적이다.
가상클래스 종류
https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes
2. 문서 구조와 관련된 가상 클래스
- :first-child 첫번째 자식요소 선택
- :last-child 마지막 자식요소 선택
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>가상선택자</title>
</head>
<style>
li:first-child {
color:red;
}
li:last-child {
color:blue;
}
</style>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
</body>
</html>첫번째<li>와 마지막<li>에 가상 클래스 적용됨
실제<li>에는 class속성이 없지만 내부적으로 가상 클래스가 적용되어 아래와 같이 코드가 동작함
<ul>
<li class="first-child">HTML</li>
<li>CSS</li>
<li class="last-child">JS</li>
</ul>
3. 앵커 요소와 관련된 가상 클래스
- :link : 하이퍼링크이면서 아직 방문하지 않은 앵커
- :visited: 이미 방문한 하이퍼링크를 의미
하이퍼링크는 앵커 요소에 href 속성이 있는 것을 의미함
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>가상선택자</title>
</head>
<style>
a:link {
color:blue;
}
a:visited{
color: red;
}
</style>
<body>
<ul>
<a href="https://www.naver.com/">네이버</a>
<a href="https://www.daum.net/">다음</a>
<a href="https://www.google.co.kr/">구글</a>
</ul>
</body>
</html>방문하지 않은 URL은 파란색으로, 방문후에는 빨간색으로 CSS구성
4. 사용자 동작과 관련된 가상 클래스
- :focus: 현재 입력 포커스를 갖고 있는 요소에 적용
- :hover: 마우스 포인터가 위치해 있는 요소에 적용 (마우스를 올렸을때)
- :active: 사용자 입력에 의해 활성화된 요소에 적용 (포커스 상태에서 링크 클릭 또는 버튼 눌렀을 때 순간적으로 발생)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>가상선택자</title>
</head>
<style>
a:focus{
background-color: yellow;
}
a:hover{
font-weight: bold;
}
a:active{
color: red;
}
</style>
<body>
<ul>
<a href="https://www.naver.com/">네이버</a>
<a href="https://www.daum.net/">다음</a>
<a href="https://www.google.co.kr/">구글</a>
</ul>
</body>
</html>
5. 가상 요소
가상요소: HTML코드에 존재하지 않는 구조 요소에 스타일을 부여할 수 있음
미리 정의해놓은 위치에 합입이 되도록 약속되어 있는 보이지 않는 요소
- :before : 가장 앞에 요소를 삽입 (내용 넣기 위해서는 contents 라는 속성 사용)
- :after : 가장 뒤에 요소를 삽입 (내용 넣기 위해서는 contents 라는 속성 사용)
- :first-line : 요소의 첫 번째 줄에 있는 텍스트
- :first-letter : 블록 레벨 요소의 첫 번째 문자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>가상선택자</title>
</head>
<style>
p:before{
color: red;
content:"before 가상 요소를 활용한 삽입";
}
p:after{
color: blue;
content:"after 가상 요소를 활용한 삽입";
}
</style>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>가상선택자</title>
</head>
<style>
p:first-letter{
font-size: 3em;
}
</style>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</body>
</html>
반응형
SMALL
'MarkUp > CSS' 카테고리의 다른 글
| [CSS] 레이아웃(display, visibility, float, clear, position ) (0) | 2021.01.12 |
|---|---|
| [CSS] 폰트&텍스트 알아보기 (0) | 2021.01.11 |
| [CSS] boxmodel 구성 알아보기 (0) | 2021.01.10 |
| [CSS] 문서구조관련 선택자 이해하기(자손, 자식 등) (0) | 2021.01.08 |
| CSS_CSS문법과 적용 (0) | 2021.01.07 |