728x90
반응형
1. selector:이름 == 의사 클래스
> 어떤 요소의 특수한 상태(특정 상태)를 정의할 때 사용
- 링크 태그에 마우스를 올릴 때 스타일을 지정하겠다.
a:hover{ }
- 텍스트 박스에focus를 줄 때 스타일을 지정하겠다.
txt:focus{}
2. 의사 클래스의 종류
:active = 클릭했을 때의 링크 상태
:invalid = 활성화된 요소
:disabled = 비활성화된 요소
:not(selector) = 부정(선택자를 제외하고..)
:required = 필수입력사항
:focus = foucs된 상태(양식의 입력 칸 등 포커스를 받은 요소, 사용자가 요소 클릭, 탭, 선택했을 때 발동)
:hover = 커서가 올라간 상태
:checked = 체크된 상태
:empty = 텍스트가 없는 요소
3. selector::이름 == 의사 요소
> 요소의 지정된 부분에만 스타일 지정
#test::after{ }
4. 의사요소 종류
::before - 해당 요소의 콘텐츠 [앞에] 일부 콘텐츠를 삽입
::after - 해당 요소의 콘텐츠 [뒤에] 일부 콘텐츠를 삽입
::marker - 리스트 항목의 마커를 선택(지정)
::selection - 사용자에 의해서 선택된(드래그) 요소의 일부
::first-line - 첫 번째 라인(줄)
<코드 예시>
<style>
h1::before {
content: url("../images/searchicon.png");
}
h1::after {
content: "- Tutorial";
color: red;
font-style: italic;
}
</style>
<style>
::marker {
color: red;
font-size: 23px;
}
</style>
<style>
/* 사용자에 의해서 선택된(드래그) 요소의 일부 */
::selection {
color: red;
background-color: yellow;
}
</style>
<body>
<h1>Lorem ipsum dolor sit amet.</h1>
<h1>Possimus quidem magni nihil dolores?</h1>
<h1>Doloribus cum error eaque repellendus.</h1>
<h1>In itaque ratione temporibus blanditiis?</h1>
<h1>Ea nostrum ad unde esse.</h1>
<hr />
<h3>::marker 의사요소 - 리스트 항목의 마커를 선택(지정)</h3>
<ul>
<li>Lorem.</li>
<li>Cupiditate.</li>
<li>Consequuntur!</li>
</ul>
<ol>
<li>Lorem.</li>
<li>Delectus!</li>
<li>Eius.</li>
</ol>
</body>
<적용 결과>
728x90
반응형
'TIL > Web(HTML, CSS, JS, jQuery)' 카테고리의 다른 글
| [SIST] Web_CSS_days04_CSS 카운터 / 투명도 설정하는 속성(opacity, rgba) (0) | 2022.05.24 |
|---|---|
| [SIST] Web_CSS_days04_:first-child, :last-child, nth-child(n) (0) | 2022.05.24 |
| [SIST] Web_CSS_days04_CSS 4가지 결합자 (0) | 2022.05.24 |
| [SIST] Web_CSS_days04_CSS float 속성과 clear 속성 (0) | 2022.05.24 |
| [SIST] Web_CSS_days03_CSS overflow 속성 (0) | 2022.05.23 |