[웹 프론트앤드 개발 더하기] ::before ::after 스타일링의 제한점

1. 시작하는 글

웹 프론트 개발에서 CSS로 왠만한 스타일링은 다 할 수 있다. HTML태그에서 CSS로 일반 스타일링을 하고, 그 밖에 클릭이나 마우스 호버 등의 이벤트를 통해서 스타일링을 할 때는 Javascript가 필요하다.

 

 

 

먼저 이 글에서 다룰 예정인 presudo-element 정의를 MDN을 통해 살펴보도록 하겠다.

A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, ::first-line can be used to change the font of the first line of a paragraph.

-> CSS 가상요소는 어떤 선택된 부분 스타일링을 허용하는 선택자라고 한다. 

 

Psedudo element는 :before, :after, :first-letter를 지칭하고, Presudo component는 :hover, :active, :checked, :nth-child, :first를 지칭한다. 이는 CSS1, CSS2부터 나온 개념이다.

CSS3에서는 ::before, ::after, ::first-letter가 추가되었다.

 

 

2. 본론!

이 글을 통해서는 두가지를 다뤄볼까 한다. 아래 질문에 대한 답이 이 글에 핵심이다.

먼저, before, after를 통해 img태그에 스타일링이 가능할까? 

두번째, div 태그에 before, after를 상황에 따라 스타일링이 가능할까?(즉, 리스트 같은 다수의 같은 태그 요소에서 어느 경우에는 ::before를 붙이고, 어느 경우에는 붙이지 않고)

 

과연, Before, after를 가지고 스타일링이 가능할까? 

필자의 미션은 img 태그에서 before 혹은 after를 이용하여 텍스트를 보여줌으로써 스타일링하는게 미션이였다. 그러나 img태그에서 단순히 before, after 태그를 가지고 하는게 불가능했다. 

 

Does :before not work on img elements?

img 태그에서 :before 가능하냐?

 

아래처럼 일반적으로는 불가능하고, JQuery를 이용하면 가능하다고 한다.... (JQuery 무겁다고 하지만,,, 역시...)

 

 

 

그러면........ 됐고........

img 태그 감싸는 div 태그 만들테니, div 태그에서 :before, after로 스타일링 가능해?? (텍스트 붙이기)

Pseudo 요소는 Javascript DOM요소가 아니니 접근이 불가능하다. 그러나, 방법은 있다!

 

 

 

 

방법은 <span> 을 이용해서 스타일링을 하면, 가능하다.

필자의 미션은 특정  img 태그 위에 텍스트를 표시하는 것이였는데, img태그를 감싸는 div를 이용하고, 그 밑에 <span>을 사용해서 텍스트를 보여줄 수 있었다.

 

요점은, ::before ::after 로 img, p

 

3. 하나 더! One more thing!

IE8, Opera 4-6, Firefox 1.0은 :before, :after 인 단일 콜론만 지원하지만 최신 브라우저는 ::before, ::after 지원함

 

BrowserLowest VersionSupport of ::presudo element

Internet Explorer		8.0	:pseudo-element
9.0	:pseudo-element ::pseudo-element
Firefox (Gecko)		1.0 (1.0)	:pseudo-element
1.0 (1.5)	:pseudo-element ::pseudo-element
Opera		4.0	:pseudo-element
7.0	:pseudo-element ::pseudo-element
Safari (WebKit)	1.0 (85)	:pseudo-element ::pseudo-element

 

 

 

 

웹접근성 또한 중요한데, ::before, ::after를 쓰면 많이 이용하는 content!!

content는 PC 브라우저의 JAWS, NVDA, Sense reader 라는 스크린 리더를 이용하면 IE를 제외한 Chrome, Opera, Firefox에서 모두 읽히고, iOS, Android 모바일 폰의 자체 스크린리더를 통해서도 읽힌다.

 

혹시, 업데이트된 정보나 궁금한 사항이 있으면 댓글 남겨주세요.

긴 글 읽어주셔서 감사합니다 ^^

 

 

References.

https://stackoverflow.com/questions/5843035/does-before-not-work-on-img-elements/5843164

Does :before not work on img elements?

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements