CSS *::before, *::after 의미
최고관리자
5년전
신고
CSS ' *::before, *::after ' 이건 무슨 뜻일까? 한참 찾아 헤맸다. 도저히 못찾다가 포기할까 하던 찰나 가까스로 그 의미를 찾았다. ' :before '와 ' :after '에 대한 설명은 쉽게 찾을 수 있었다. 문제는 ' * '의 의미가 뭔지 도통 모르겠다는 것이다. 구글과 다음, 네이버 검색을 통해 아무리 뒤져도 * 이 포함된 검색이 안나온다. 뭐 별 수 있나. 무식하게 문서 하나 하나 뒤지면서 찾을 때까지 훑어보는 수밖에.. 지쳐서 포기하고픈 마음이 드는 찰나.. 드뎌 찾아냈다. CSS 태그 앞에 ' * '를 붙여주면 IE6에서만 작동된다고 한다. 허.. 결국 말로만 들어본 CSS 핵이라는 소리네... 그런데, 또 한가지 의문이 생겼다. ' *::before, *::after '를 보면 before와 after의 앞에 콜론이 두 개 ( :: )가 붙어 있는 것이다. 다른 설명들에선 콜론이 한 개 ( : ) 뿐이었는데... 이 의문은 금방 해결할 수 있었다. CSS2에서 1개가 붙고, CSS3에서 2개가 붙는다고 한다. [업데이트] : 글을 써놓고 보니 아무래도 뭔가 찜찜해서 혹시나 하는 생각에 계속 관련 정보를 검색해보았다. 그러던 중 더 그럴듯한 정보를 얻었다. ' * '는 '전체선택자'로 모든 엘리먼트의 값을 선택하라는 의미라는 것이다. 아무래도 이 설명이 더 맞는 것 같아 보인다. |