가상요소와 가상 클래스란

가상요소와 가상 클래스의 차이를 비교하면,

1. 가상 요소와 가상 클래스의 차이

가상 요소는 특정 환경이 발생하면, 스타일을 변화 시키며,

가상 클래스는 스타일을 변화시키는 코드입니다.

 

2.가상 클래스와 가상 요소의 사용 방법?

가상 클래스는...

 

선택자:가상 클래스 { property: value; }   

 

가상 클래스는  :를 사용하고, 아래 처럼 가상 요소는  ::를 쓰는 것이 차이입니다. 

선택자::가상 요소{ property: value; }     

 

3.가상 클래스의 종류

 

가상 클래스의 개념을 정리했고,

 

아래는, 가상 클래스의 종류입니다.

 

:hover -> 요소에 커서 올렸을 때 스타일 지정

:first-child -> 부모의 자식 요소중에서 첫번째 요소에 스타일 지정

:nth-child(2) -> 부모의 자식 요소중에서 두번째 요소에 스타일 지정

:last-child -> 부모의 자식 요소중에서 마지막 요소에 스타일 지정

:not(:first-child) -> 부모의 자식 요소중에서 첫번째 자식 요소 제외한 나머지 자식 요소에 스타일 지정

:link -> 미방문한 링크에 스타일 지정

:visited -> 방문한 링크에 스타일 지정

:focus -> focus가 있을 때 스타일 지정

:active -> 요소를 클릭하는 순간만 스타일 지정

:checked -> 사용자가 체크박스에서 체크했을 때 스타일 지정

:disabled -> 요소가 비활성 상태일 때 스타일 지정

:enabled -> 요소가 활성화 상태일 때 스타일 지정

 

css 코드 입니다.

 		스타일 태그
        
    	/*link를 알기 위한 코드*/
        .link:link{
            color: antiquewhite; /*색상 지정*/
        }
         /*visited 알기 위한 코드*/
        #visited:visited{
            color: aqua;/*색상 지정*/
        }
        /*hover를 알기 위한 코드*/
        #hover:hover{
            color: orange;/*색상 지정*/
        }
        /*visited를 알기 위한 코드*/
        active:active{
            color: black;/*색상 지정*/
        }

 

html 코드입니다.

  <!--visited를 알기 위한 코드-->
     <a id="visited" href="https://www.canva.com/design/DAF8xXxcwd4/rxLAuCQRLwFSwfDC-ylnXw/edit">세종 대왕 ❤️</a>
    <!-- 가상 요소 hover를 알기 위한 코드-->
     <p id="hover">세종 대왕 ❤️</p>
      <!--가상 클래 link를 알기 위한 코드-->
      <a class="link" href="https://ko.wikipedia.org/wiki/%E3%84%B1">이순신 ❤️</a> <br>
      <!-- 가상 요소 active를 알기 위한 코드-->
      <a id="active" href="https://www.w3schools.com/css/css_pseudo_classes.asp">세종 대왕 ❤️</a>

 

아래는 가상 클래를 알기 위해 만든 코드 결과 입니다.

 

세종 대왕 ❤️

세종 대왕 ❤️

이순신 ❤️
세종 대왕 ❤️

 

4. 가상 요소의 종류

 

가상 요소의 종류입니다.

 

::before -> block 요소 앞에 내용 삽입 (content 값 필수)

::after -> block 요소 뒤에 내용 삽입 (content 값 필수)

::first-letter -> block의 첫번째 문자 선택

::first-line -> block의 첫 줄 선택

::selection -> 사용자가 드래그로 선택한 block 전체 or 일부 선택

 

css 코드입니다.

 /*지정된 요소의 글자를 p태그 뒤에 지정*/
       .after::after{
            /*글자 출력*/
            content : '저는 김강현 입니다.';
            color: blue;/*글자 색 지정*/
        }
        /*지정된 요소의 글자를 p태그 앞에 지정*/
        #before::before{
            /*글자 출력*/
            content : 'before를 알기 위한 코드입니다.';
        }
        /*지정된 요소의 첫 번째 글자 색 변경*/
        #first-letter::first-letter{
            color: aqua;/*글자 색 지정*/
        }
        /*지정된 요소의 첫 번째 줄에 스타일 적용 */
        #first-line::first-line{
            color: blueviolet;
        }

 

html 코드입니다.

<!--가상 요소 after를 알기 위한 코드-->
    <p class="after">이순신 ❤️</p>
    <!--before를 알기 위한 코드-->
    <p id="before">세종 대왕 ❤️</p>
    <!-- 가상 요소 first-letter 알기 위한 코드-->
    <p id="first-letter">세종 대왕 ❤️</p>
     <!-- 가상 요소 first-line을 알기 위한 코드-->
     <p id="first-line">세종 대왕 ❤️</p>

 

아래는 가상 요소를 알기 위해 만든 코드 결과 입니다.

 

이순신 ❤️

세종 대왕 ❤️

세종 대왕 ❤️

세종 대왕 ❤️