[css] 가상 클래스 요소의 차이 ::before ::after

CSS 웹 프로그래밍을 하시면서
::before
::after
위와 같은 형태의 클래스를 보신 분들이 있으실 겁니다.
이와 같은 형태를 가상 클래스라고 합니다.

 

가상클래스 (pseudo-class)

실제로 존재하는 요소에 특정 이벤트나 환경에 맞추어 가상으로 클래스를 부여

html
<button>클릭</button>

css
button:hover {
  color: red;
}

 

가상 클래스	설명
:active	해당하는 요소를 활성화 했을 때 즉, 클릭한 상태일 때 스타일 부여
:checked	input 태그의 type이 checkbox나 radio일 경우 해당 태그가 체크 되어있을 때 스타일 부여
:disabled	선택, 클릭, 입력 등을 할 수 있는 요소에 비활성을 했을 때 스타일 부여 ex) input, button, a태그
:enabled	:disabled의 반대로 활성화 되어있는 요소에 스타일 부여
:empty	자식 요소가 없는 태그에 스타일 부여
:focus	input 태그에 focus를 한 상태일 때 스타일 부여
:hover	해당 요소에 마우스를 올렸을 때 스타일을 부여
:link	미방문 링크에 스타일 부여
:visited	이미 방문한 링크에 스타일 부여
:not(selector)	(selector)를 제외한 나머지 요소들에 스타일 부여 ex) .main p:not(.cmt){color:red} (.main 클래스 하위에 있는 p태그 중 .cmt 태그를 제외하고 color:red를 적용)
:read-only (읽기전용)	input 태그에 readonly 속성을 지정한 요소에 스타일 부여
:required (필수입력)	input 태그에 required 속성을 지정한 요소에 스타일 부여
:first-child	형제 요소 중 첫 번째 자식요소(맨 앞)에 스타일 부여 ex) .main div:first-child{color:red;} (.main 클래스 자식 요소인 div 중 첫 번째 div에 color:red 적용) * 만약 div 이전 형제요소 중 다른 태그가 있으면 스타일 적용이 어렵다. <div class="main"> <p>test1</p> <div>test2</div> </div> .main div:first-child{color:red} -> 아무런 스타일 변화가 없다.
:first-of-type	형제 요소 중 해당하는 태그의 제일 첫 요소에 스타일 부여 ex) <div class="main"> <p>test1</p> <div>test2</div> </div> .main div:first-of-type{color:red} -> div태그 (test2)에 color:red가 적용된다.
:last-child	형제 요소 중 가장 마지막 요소에 스타일 부여
:last-of-type	형제 요소 중 해당하는 태그의 가장 마지막 요소에 스타일 부여
:nth-child(n)	n번째 요소에 스타일 적용, n에 숫자 뿐만 아니라 even(짝수), odd(홀수), 2n+1 등 특정 수식을 줄 수 있다.
:nth-last-child(n)	뒤에서 n번째 요소에 스타일 부여
:only-child	형제 요소 중 유일하게 있는 요소에 스타일 부여 (다른 형제 요소가 있으면 스타일 적용x) ex) <div class="main"> <div>test1</div> <p>test2</p> </div> .main div:only-child{color:red} -> div의 형제에 p태그가 있으므로 스타일 적용 x
:only-of-type	형제 요소 중 같은 유형의 형제가 없이 유일한 요소에 스타일 부여 ex) <div class="main"> <div>test1</div> <p>test2</p> </div> .main div:only-child{color:red} -> 형제 요소 중 div는 하나기 때문에 스타일 적용

 

 

가상 요소

가상의 클래스와 비슷하게 요소를 만들어 스타일을 부여합니다. 특정 요소를 풍부하게 만들어 줍니다. 보통 구분자나 이미지 등을 삽입하여 사용하는 경우가 많습니다.
콜론 : 을 사용할 수도 있지만 가상 클래스와의 구분을 위해 이중 콜론 ::을 권장드립니다.

 

html
<ul>
  <li>로그인</li>
  <li>회원가입</li>
  <li>마이페이지</li>
  <li>사이트맵</li>
</ul>

css
li {
  list-style: none;
  float: left;
  padding: 0 20px;
}

li::after {
  content: "|";
  float: right;
  color: #222;
  margin-right: -20px;
}

li:last-child::after {
  content: "";
}

:last-child::after 로 마지막에는 | 대신 null로 대체합니다.

 

:last-child::after 사용

:last-child::after 미사용

 

가상요소	설명
::before	지정된 요소의 앞에 가상의 요소 생성
::after	지정된 요소의 뒤에 가상의 요소 생성
::first-letter	지정된 요소의 첫 번째 글자에 스타일 적용
::first-line	지정된 요소의 첫 번째 줄에 스타일 적용