[SIST] Web_CSS_days04_:의사 클래스(pseudo-class) 와 ::의사 요소(pseudo-element) (내용 추가중..)

야리니 2022. 5. 24. 20:52

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