css 가상 요소 몇 가지 정리

developsy·2022년 7월 19일
0

가상 요소는 html에는 존재하지 않는 태그이나 css에서 선택하고 스타일링 할 수 있는 요소이다.

가상 요소를 선택할 때는 ‘:’을 두 개 붙인다.

first-letter

-> 말 그대로 첫 번째 글자를 선택한다.

h2::first-letter

first-line

->첫 번째 줄을 전부 선택한다.

p::firstline

이라면 p태그의 모든 첫 번째 줄을 선택하게 된다.

인접 형제 요소 선택자

‘+’를 사용하면 한 요소의 인접 형제 요소를 선택할 수 있다.

h2 + p::firstline

은 h2에 인접한 p태그의 첫 번째 줄을 선택한다.

before

선택된 요소의 첫 번째 자식이 되는 가상 요소를 자동으로 생성한다. html에 따로 의미 없는 태그를 추가하지 않고 약간의 스타일링을 하고 싶을 때 사용한다.

라는 h2요소가 있는데, 여기에 before가상 요소 선택자를 사용하면

h2::after{
  content: “TOP”;
}

가 된다. 여기에 스타일링을 해줄 수 있다.

h2::after{
  content: "TOP";
  background-color: #ffe70e;
  color: #444;
  font-size: 16px;
  font-weight: bold;
  display: inline-box;
  padding: 5px 10px;
  position: absolute;
  top: 0;
  right: 0;
}

h2 {
  font-size: 40px;
  position: relative;
}

이때 display속성값을 inline-block으로 사용하는 것은 거의 공식 수준으로 써도 될 듯하다.

개발자 도구로 살펴보면 다음과 같이 나온다.

after

before와 다른 점은 after는 요소의 마지막 자식이 되는 가상 요소를 생성한다는 점이다. 결과는 before와 완전 동일.

추가사항으로, after는 float 속성을 클리어하는 데에 쓰인다고 한다. float 속성에 의해 height collapse(모든 콘텐츠가 float, 즉 붕 떠서 높이가 없는 경우)가 일어났을 경우 이를 고칠 때 쓰는 방식이다.

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

clearfix라는 클래스를 만들고, 빈 텍스트를 콘텐츠로 넣어준다. 그 후 clear속성으로 clear할 float의 범위를 정한 뒤, 이는 블록 요소에만 적용되므로 display속성을 통해 블록요소로 바꿔주면 끝이다.

profile
공부 정리용 블로그

0개의 댓글