CSS 로 내용 넣기 (+내용 선택 안되게 만들기)

제목 정하기가 너무 어렵...ㅡㅡ;  아무튼, 골자는 이렇습니다.

 

다들 알다시피 css로 html 태그에 뭔가 내용을 넣어 주는 방식으로는 ::before 나 ::after 가 있습니다.

이 때, 넣어줄 내용을 태그의 data 속성에서 읽어 오는 방법이 있네요.

 

<style>
  [data-content]::before {
    content: attr(data-content);
  }
</style>

<div data-content="I am the content"></div>

위 예제를 보시면 div 태그 안에는 실제 아무 내용도 없습니다.

하지만 css가 attr(data-content); 를 통해서 data-content 에 있는 내용을 div 안에 뿌려줍니다.

 

여기서 재미있는 점은 ::before 나 ::after 로 생성된 내용은 드레그 선택이 되지 않는다는 겁니다.

드레그 시 선택이 되면 안되는 내용을 넣을 때 유용할 수 있겠습니다.

 

참고로 content: 는 ::before 나 ::after 에서만 쓸 수 있습니다.

 

아래는 예시: (Result 탭 선택 후 내용을 드레그 해보심이..)

 

 

jsfiddle.net/alikong/9t0r1bxm/