6월8일16일차 - 가상요소선택자icon, attr

점점 html 구조가 익숙해지고 있습니다.

새로운 것들을 배우고 싶기도 하지만 당장은 지금까지 배운 것들을 잊지 않고 사용할 수 있게 복습합니다.

[220608가상요소선택자 연습 페이지입니다.]

---

nth-child(even) 짝수에 적용됩니다. odd는 홀수에 적용됩니다.

      section:nth-child(even) {
        background: #f9f9f9;
      }

---

가상요소선택자를 써서 icon을 넣는 방법입니다.
아이콘을 넣고 검사를 해 보면 content= "코드" 가 나옵니다. 코드를 입력하고 font-family를 설정해주면 됩니다.
      .psd04 h2::after {
        content: "\e907";
        font-family: xeicon !important;
      }

---

https://younghunkimm.github.io/xeicode/ xeicon의 코드를 알 수 있습니다.
font awesome cheatsheet 를 통해서 아이콘의 코드를 알 수 있습니다.

---

직접 attr를 만들 수 있습니다.
        <figure data-num="01">
          <img src="../img/lesedilarona01.jpg" alt="" />
        </figure>
        <figure data-num="02">
          <img src="../img/lesedilarona02.jpg" alt="" />
        </figure>
인라인 스타일을 지정하고
      .psd05 figure::after {
        content: attr(data-num);
      }
attr을 content로 주면 됩니다.

---

hr과 아이콘을 통해서 디자인을 할 수 있습니다.
hr에 position: relative; 속성을 줍니다. hr은 기본적으로 overflow: hideen; 입니다.
      hr.list_hr {
        position: relative;
        overflow: visible;
      }
content에 아이콘을 적용시키고 position: absolute; 로 위치를 정합니다.
      hr.list_hr::after {
        content: "\e907";
        font-family: xeicon !important;
        position: absolute;
      }

---

가상요소 선택자에도 hover를 적용시킬 수 있습니다.
      .psd05 figure:hover::after {
        transform: rotateX(720deg);
      }
      .psd05 figure::after {
        content: attr(data-num);
        transition: 1s ease-in-out;
      }