img 태그의 before, after를 삽입 할수 없어요

---

1. img 태그의 before, after를 사용할 수 없어요.

img 태그에 가상요소(Pseudo-element) before 와 after 을 사용해서 img 태그의 설명을 넣을려고 노력 한적이 있습니까?

아무리 애를 써도 이것은 되지 않습니다.

img 태그는 no Ending tag(닫는 태그가 없는 태그) 이기 때문 입니다.

no Ending tag는

- img 태그

- br 태그

- hr 태그

등이 있습니다.

이런 태그들은 가상요소(Pseudo-element) before, after, first-letter, first-line, selection 를 사용 할 수 없습니다!

 

2. 가상요소를 사용할 수 없는 이유

왜냐 하면 닫는태그가 없기 때문에 자식으로 텍스트도 다른 태그도 담을 수 없기 때문 입니다.

밑에 stackOverflow에서 이유를 잘 설명하고 있습니다.

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

Does :before not work on img elements?

 

3. jquery의 after를 이용한 대안

after 가상요소 대신에 jquery에 after 함수를 사용해서 태그를 추가 할수 있습니다. 이 방법은 위 stackOverflow 에서 설명 하고 있습니다. 

$(img).after(  (img 태그를 설명하는 태그)  );

 

4. figure와 figcaption 태그 사용

저는 가상요소 말고 웹표준에 더 정확한 figure와 figcaption 태그 사용을 권장 합니다.

<figure>
        <img src="test.jpg" alt="test">
        <figcaption>테스트 이미지 입니다.</figcaption>
</figure>

동적으로 삽입 하고 싶다면 위에서 언급한 jquery의 after 함수로 figcaption 태그를 삽입 할 수 있습니다.

$(img).after(  (figcaption 태그)  );

 

figure와 figcaption 태그가 더 알고 싶으시면 이곳을 읽어 주세요.

https://coding-food-court.tistory.com/22

figure figcaption 태그