게시된 글에 팁(주석) 표시하기

 

 

 

 

CSS-style과

data-tooltip 확인

<div>
<style>
.tooltip {
  position: relative;
  cursor: pointer;
}

/* 마우스를 올렸을 때 나타날 풍선 */
.tooltip::after {
  content: attr(data-tooltip);
  white-space: pre-line;   /* \A 또는 실제 줄바꿈을 개행으로 처리 */
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.8);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

/* hover 또는 터치 시 보이게 */
.tooltip:hover::after,
.tooltip:focus::after {
  opacity: 1;
}
</style>
</div>
<blockquote data-ke-style="style3">[BiliChild(빌리칠드)]<br />0. 다수의 책들과 공개된 자료들을 바탕으로 개인의 경험을 추가하여 <b>지극히 주관적</b>으로 작성한 글임을 밝힙니다.<br />1. 미래 인공지능 시대에 우리 아이들이 자아실현과 사회구성원으로서 역할을 효율적이며 효과적으로 수행하기 위해<br />&nbsp; &nbsp; <b>지금 부모가 해야 하는 일</b>들을 주된 내용으로 합니다.<br />2. 인공지능과 뇌과학, 교육학, 심리학 등 관련된 내용을 상호 연결지어 두루두루 다룹니다.<br />3. 인류 또는 인간이 영속하기 위해 지금 부모의 역할이 매우 중요합니다.<br />4. 모든 부모들이 동일한 역량과 관점(지향점)을 가지지 않으므로,<br />&nbsp; &nbsp; 제시된 내용을 그 부모의 상황에 맞게 취사선택/각색할 필요가 있습니다.<br />5. 출산과 육아 등 일상 생활에서 아빠와 엄마의 역할은 어느 정도 구분돼 있습니다.<br />&nbsp; &nbsp; 아빠 입장에서 가능한 활동(말 또는 행동)에 더 많은 관심을 기울이는 것을 권장합니다.</blockquote>
<p data-ke-size="size16">&nbsp;</p>
<table style="border-collapse: collapse; width: 100%;" border="1" data-ke-align="alignLeft" data-ke-style="style14">
<tbody>
<tr>
<td style="width: 100%;"><span>프로젝트 BiliChild(빌리칠드)를 시작하게 된 계기입니다.</span><br /><span>인공지능 기술이 나날이 발전하고 AGI(인공일반지능)이 멀지 않았다는 주장이 나타나고 있는 이 시기에,</span><br /><span>"그 세상에서 인간은 어떤 삶을 살게 될까"라는 질문과 더불어,</span><br /><span>"우리 아이들은 ......?"이라는 질문까지 이어지게 됐습니다.</span><br /><span>수많은 과학적 철학적 논쟁이 있을 수 있겠지만, 그 많은 것을 다 다룰 수 없으니 우선 생각나는 방향으로 노를 저어 봅니다.</span></td>
</tr>
</tbody>
</table>
<p data-ke-size="size16">&nbsp;</p>
<table style="border-collapse: collapse; width: 100%;" border="1" data-ke-align="alignLeft" data-ke-style="style12">
<tbody>
<tr>
<td style="width: 50%; text-align: center;"><b>관심을 가져야 하는 이유</b></td>
<td style="width: 50%; text-align: center;"><b>경각심을 가져야 하는 이유</b></td>
</tr>
<tr>
<td class="tooltip" style="width: 50%; text-align: center;" data-tooltip="학습속도와 성향에 맞게">맞춤형 교육 기회 확대✅</td>
<td class="tooltip" style="width: 50%; text-align: center;" data-tooltip="아이의 모든 정보가 노출될지도...">개인 정보 및 사생활 침해✅</td>
</tr>
<tr>
<td class="tooltip" style="width: 50%; text-align: center;" data-tooltip="복잡한 데이터를 분석하여 아이디어 제공">창의성 및 문제 해결 능력 함양✅</td>
<td class="tooltip" style="width: 50%; text-align: center;" data-tooltip="AI의 편향된 데이터로 인해">윤리적 문제✅</td>
</tr>
<tr>
<td class="tooltip" style="width: 50%; text-align: center;" data-tooltip="유해 콘텐츠 필터링 등">안전하고 효율적인 학습 환경 조성✅</td>
<td class="tooltip" style="width: 50%; text-align: center;" data-tooltip="AI의 편리함 때문에 비판적 사고력 및 창의성 훼손">지나친 의존✅</td>
</tr>

</tbody>
</table>