HTML_pseudo-element

내가 특정 HTML 요소의 안쪽 일부만 스타일을 주고 싶을 때

Pseudo-element 셀렉터를 이용해서 스타일을 줄 수 있다.

예를 들면 이런 것들이 가능하다.

▶️ HTML 특정부분에 스타일링하기/글씨넣기

  .text::first-letter {
    color : red;
  }

  .text::first-line {
    color : red;
  }

  .text::after {
    content : '뻥이지롱';
    color : red;
  }

  .text::before {
    content : '뻥이지롱';
    color : red;
  }

1. pseudo-element를 선택하려면 콜론 2개 :: 를 사용하면 된다.
2. ::first-letter라고 붙이면 안에 있는 글자 중 첫 글자만 스타일을 줄 수 있다.
3. ::first-line이라고 붙이면 안에 있는 글자 중 첫 줄만 스타일을 줄 수 있다.
4. ::after라고 붙이면 내부의 맨 마지막 부분에 특정 글자같은걸 추가해줄 수 있다.
5. ::before라고 붙이면 내부의 맨 앞 부분에 특정 글자같은걸 추가해줄 수 있다.

first-letter 대신 첫글자를 span 태그로 감싸도 되지만 서버와 데이터베이스로 인해 글자가 항상 다이나믹하게 변하는 경우 항상 span태그를 넣기 불가능하다.(자바스크립트 사용해야함)

---

▶️ clear : both 박스 편하게 만들기

  .box::after {
    content : '';
    display : block;
    clear : both;
  }

갑자기 어떤 요소 뒤에 clear : both 속성을 가진 div박스가 필요하다면 일부러 div를 하나 만들 필요 없이 이렇게 div를 흉내내서 사용하시면 된다. (float를 사용한 가로정렬시)

---

▶️ Pseudo-element를 이용한 잡기들

• CSS 만으로 버튼에 마우스 올리면 배경 어둡게하기 https://codepen.io/css-tricks/pen/dxyfA

• CSS만으로 3D 느낌 리본모양만들기 https://codepen.io/team/css-tricks/pen/mVZGKa

• ol 태그의 숫자 스타일링하기 https://www.456bereastreet.com/archive/201105/styling_ordered_list_numbers/

• table 반응형으로 만드는 여러가지 방법 https://css-tricks.com/responsive-data-tables/

• CSS만으로 영문 폰트 만들기 https://yusugomori.com/projects/css-sans/fonts

---