웹표준에 맞춰 바른 마크업을 하기위해서는 가상요소를 사용하게 되는 경우가 많습니다.
가상요소를 분명이 오타없이 적용했는데 보이지 않는 이유와 원인들을 정리하여 같은 이유로 고생하시는 분들에게 조금이라도 도움이 되고자 싶어 정리해 봅니다.
가상요소는 기존 태그에 가상의 태그요소를 추가하여 디자인을 표현할 때 주로 사용이 됩니다.
그 종류로는 ::before, ::after, ::placeholder 정도가 될것 같네요.
가상요소에 보이는 무언가(외곽선, 글자…)가 있고 오타가 없다고 가정하에 정리해 보겠습니다.
가상요소가 보이지 않는 경우
- content 속성이 누락된 경우
content속성은 글자나 이미지를 넣지 않더라도 반드시 있어야 할 속성이므로 없으면 가상요소가 보이지 안게됩니다. - 부모/조상 요소로 부터 text-indent값이 상속 받은 경우
부모/조상으로 부터 text-indent(내어쓰기/들여쓰기)값을 상속 받은 경우엔 해당 콘텐츠를 보여주기가 까다롭습니다.
해당 값에 initial을 주어 상속 받지 않으면 된다라고 생각할 수 있겠으나 이미 기본 위치가 바뀌어진 상태라 상속과는 상관 없이 위치가 변경됩니다.
해당 값의 반대 방향으로 마진으로 밀어줘야 하는 방법이 있지만 수치를 맞춰 반대로 넣는다는게 여간 귀찮은 일입니다.
가급적 text-indent를 전체에 주기 보다 정확한 콘텐츠를 지정하여 적용하는 것을 권고해 드립니다. - 다른 요소에 가려진 경우
position 속성의 의한 레이어 요소가 위로 가려진 경우로 개발자도구로 겹쳐져 보이는 요소가 없는 지 확인하고 있다면 z-index를 설정해서 보다 상위로 보여지도록 조정해줍니다. - 가상요소를 가질수 없는 태그에 준 경우
가상요소는 모든 태그에서 사용할 수 없습니다.
가상요소 역할을 이미 사용되거나 사용할 수 없는 요소가 있으니 주의해야 합니다.
주로 사용자 입력을 받거나 콘켄츠를 표현하는 태그들을 들 수 있습니다. (닫는 태그가 없는 요소에는 가상요소를 사용할 수 없는 의견도 있지만 이는 잘못된 지식으로 열고 닫는 형식과 무관합니다.)
예) input, img, br, hr, iframe, canvas, video, audio…
가상요소에 애니메이션/크기/트랜지션/자바스크립트가 적용되지 않는 경우
- display 속성이 올바르지 않는 경우
일부 속성은 특정 display 타입에서만 적용됩니다.
크기적용은 inline에서 적용되지 않고 여백관련은 inline, inle-block에서는 부분적으로 적용되는 것처럼 적용하고자 하는 CSS속성이 적용되는 display속성을 부여해줘야 합니다. - 속성을 잘 못 지정한 경우
transition과 animation의 작동원리는 같습니다.
수치에서 수치의 중간값을 모션으로 만들어주는 역할을 하죠.
하지만 해당 속성 작성은 두개가 차이가 있습니다.
가끔 animation 속성의 값을 transition 속성에 사용하는 경우가 종종있는데 프레임관련 속성은 transition에서는 지원하지 않습니다. - 잘 못된 선택자와 구체성 문제
가상요소 관련해서 가장 많은 실수는 기본적인 선택자 경로문제이고 구체성(명시도)에 의해 해당 속성이 적용되지 않아 생기는 문제가 많습니다. - 자바스크립트(jQuery포함)에서는 가상요소를 선택자로 잡는 경우
자바스크립트에서는 돔요소를 선택하는 것이기에 가상요소는 선택할 수 없습니다.
필요한 경우에는 가상요소의 부모를 선택하여 부모에다 특정클래스를 주고 특정 클래스에 css에서 스타일을 미리 꾸며놓으면 가상요소를 비슷하게 선택하는 것처럼 사용할 수 있습니다.
참고로 정리해 놓은 것 외에도 상황에 따른 여러가지 변수가 있을 수 있기 때문에 이것 만으로 문제의 원인을 찾기란 힘들 수 있습니다. 다만 대부분의 원인은 오타와 구체성이 원인인 경우가 가장 많다는 점을 보면 항상 오타나 문법체크는 철저히 하는 습관이 건강상 좋을 것 같네요. 🙂