CSS 가상 요소 선택자 (22.09.28 TIL)

  오늘 진행했던 과제 중에 가상 요소 선택자라는 처음 보는 속성이 등장해서 정리 겸 til 을 작성한다!

 CSS 선택자 중에는 가상 클래스 선택자, 가상 요소 선택자 라는 것이 있다. 선택자는 타겟이 있어야 한다. id 선택자는 id가 타겟이고, class 선택자는 class 가 타겟이다. 이 맥락에서 본다면 가상 선택자는 실제는 없지만 가상으로 만들어진 무언가를 타겟으로 선택한다는 것이 된다.

  가상 클래스 (Pseudo-Class) 는 어떠한 속성이 실제로 마크업 상에는 명시되지는 않은 속성을 지칭하는 말이다. 작성자가 지정한 이벤트 (예를 들어 마우스를 올려놓았을 때나, 클릭을 했을 때) 가 발생한 그 순간 자체를 하나의 속성으로 본다는 것이다. 이러한 순간적인 상태를 선택하여 css 를 적용하기 위해 가상 클래스 선택자가 쓰인다.

/* 어떤 버튼이든 마우스 포인터가 올려지기만 한다면 발생하는 이벤트 */
button:hover {
  color: blue;
}

 가상 요소 (Pseudo-Element) 도 마찬가지로 가상 클래스 선택자처럼 존재하지 않는 요소를 존재하는 것처럼 부여하여 문서의 특정 부분을 선택하는 것이다. 이렇게 가상으로 만들어진 요소는 실제로는 보이지 않더라도 선택한 요소 일부분에 css 를 적용하여 특정 효과를 줄 수 있다. 

 가상 요소들은 mdn 에서 찾아 볼 수 있는데 그 중 대표적으로 사용되고 있는 가상 요소들은 아래와 같다.

http://blog.hivelab.co.kr/%EA%B3%B5%EC%9C%A0before%EC%99%80after-%EA%B7%B8%EB%93%A4%EC%9D%98-%EC%A0%95%EC%B2%B4%EB%8A%94/

 오늘 진행했던 과제에서도 after 가상 요소가 적용된 코드가 있었다. 위의 표에서 보면 알 수 있듯이 ::before 와 ::after 요소는 content 속성과 함께 쓰이는데, content 는 '가짜' 속성이다. 마크업 문서에 정보로 포함되지 않은 요소를 css 에서 새롭게 생성시켜주기 때문이다.

 아래의 표는 content 를 쓸 때, 대표적으로 사용되는 속성들이다.

 오늘 과제에서 등장한 가상 요소 선택자를 한 번 살펴보자. 선택자를 적용하기 이전의 말풍선은 둥그런 모양이다.

 하지만 아래의 코드를 적용하고 나면,

.conversation .message::after {
  /* 말풍선의 position 속성이 relative 로 되어있고, 이 속성을 기준으로 절대위치로 옮겨짐 */
 
  position: absolute;
  
  /* 기본값이 inline 이기 때문에 위치값을 지정해주기 위해 block 으로 변경 */
  display: block;
  
  /* 빈 도형을 만들기 위해 필수 속성인 content 에 빈 문자열 적용 (기본값인 normal 로 대체 가능) */
  content: "";
  
  /* 위치 지정 */
  top: 0;
  left: -1vw;
  width: 2vw;
  
  /* 상단(top)과 좌측(left)에만 값을 주어 삼각형 모양을 만듦*/
  border-top: 2vw solid #fff;
  border-right: 0 solid transparent;
  border-bottom: 0 solid transparent;
  border-left: 2vw solid transparent;
}

이렇게 말풍선 좌측 상단에 뾰족한 모양이 생긴다.