조회 수 194 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

<style>

* { margin; 0px; padding: 0px; }

span[data-descr] {

  position: relative;

  text-decoration: underline;

  color: #00F;

  cursor: help;

}

 

span[data-descr]:hover::after {

  content: attr(data-descr);

  position: absolute;

  left: 0;

  top: 24px;

  min-width: 200px;

  border: 1px #aaaaaa solid;

  border-radius: 10px;

  background-color: #ffffcc;

  padding: 12px;

  color: #000000;

  font-size: 14px;

  z-index: 1;

}

</style>

<p>아래의 코드를 참조하세요..<br />

  여성 싱어 중 <span data-descr="자드는 일본의 대중가수이다.">자드</span> 를 소개합니다.

  <span data-descr="자드 소개의 안내문이 보였지요?">툴팁</span>.<br />

  이렇게 툴팁을 이용할 수 있습니다. <span data-descr="자드는 일본의 대중가수이다.">다시보세요!</span>.

</p>

?

List of Articles
번호 분류 제목 날짜 조회 수
» HTML ::after ::before 툴팁 사용 예제 2019.06.28 194
20 HTML ::before & ::after Pseudo Element 예제 1 2019.06.27 342
19 HTML Transition에 대해 알아보자. 8 2016.06.22 9382
18 HTML Form 요소 설명 2 2016.06.01 7704
17 HTML 요소의 수직정렬을 알아보자. 1 file 2016.03.01 6572
16 HTML JavaScript의 반복문을 알아보자. 2 file 2016.02.24 10576
15 HTML 하나의 class = 하나의 디자인 ????? file 2016.02.23 3806
14 HTML DIV 제거와 CSS 코드 줄이기 file 2016.02.17 6443
13 HTML class 에 대해 알아보자. file 2016.02.16 4375
12 HTML li 에 대해 알아보자. 2 file 2016.02.15 6198
11 HTML 11. viewport를 활용한 반응형 예제 file 2015.12.31 4895
10 HTML 10. position: absolute; 에 대해 알아보자 1 file 2015.12.30 11573
9 HTML 9. position: relative; 에 대해 알아보자 file 2015.12.29 5219
8 HTML 8. PHP를 통한 index파일의 구성 1 file 2015.12.28 10059
7 HTML 7. position: static; 에 대해 알아보자. file 2015.12.28 4500
6 HTML 6. DIV를 통한 전체 화면 사용하기 & 응용 2 file 2015.12.24 38687
5 HTML 5. DIV를 통한 헤더 만들기 1 file 2015.12.24 12614
4 HTML 4. DIV안에 DIV 넣어 정렬하기 4 file 2015.12.23 86096
3 HTML 3. DIV내의 문자컨텐츠 수평정렬과 수직정렬 1 file 2015.12.23 17343
2 HTML 2. DIV요소의 수평정렬과 수직정렬 file 2015.12.23 11261
Board Pagination Prev 1 2 3 Next
/ 3