웹 페이지에서 특정 콘텐츠가 너무 길 경우, 레이아웃이 무너지거나 시각적으로 어수선해질 수 있습니다. 이를 방지하기 위해 기본적으로 일부만 보여주고, 사용자가 마우스를 올렸을 때 전체 내용을 확인할 수 있도록 하는 기능을 구현하는 방법을 소개합니다.

이 기능은 CSS의 :hover 의사 클래스를 활용하거나, 더 세밀한 제어가 필요할 경우 JavaScript의 이벤트 핸들러를 사용하여 구현할 수 있습니다.

CSS 기반 간단한 구현

다음은 CSS만으로 마우스 오버 시 전체 텍스트를 노출하는 예제입니다. 테이블 내 특정 셀에 전체 내용을 담은 <div>를 배치하고, 초기에는 숨겨둡니다. 사용자가 해당 셀 위로 마우스를 올리면 절대 위치로 투명한 박스 안에 전체 텍스트가 표시됩니다.

<style>
  td {
    width: 200px;
    border: 1px solid #000;
    padding: 8px;
  }
  .full-content {
    display: none;
  }
  #descCell:hover .full-content {
    position: absolute;
    display: block;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px;
    border-radius: 4px;
    width: 250px;
    word-break: break-all;
    z-index: 100;
    font-size: 14px;
    pointer-events: none;
  }
</style>

<table>
  <tr>
    <th>사용자 이름</th>
    <th>설명</th>
  </tr>
  <tr>
    <td>john_doe</td>
    <td id="descCell">
      내용을 확인하려면 마우스를 올리세요
      <div class="full-content">
        이는 상세한 사용자 설명입니다. 정보가 매우 길기 때문에 기본 상태에서는 생략되며, 마우스를 올렸을 때만 전문이 표시됩니다.
      </div>
    </td>
  </tr>
</table>

JavaScript를 통한 동적 제어

보다 정교한 제어가 필요하다면 JavaScript의 onmouseover와 onmouseout 이벤트를 활용할 수 있습니다. 아래는 해당 이벤트를 바탕으로 동적으로 스타일을 적용하고 해제하는 예제입니다.

<td onmouseover="showFull(this)" onmouseout="hideFull(this)">
  마우스를 올려보세요
  <div style="display:none;">
    이 텍스트는 자바스크립트로 제어되며, 마우스 오버 시 나타납니다. 내용이 길 경우에도 깔끔하게 처리됩니다.
  </div>
</td>

해당 요소의 자식 <div>를 동적으로 조작하는 자바스크립트 함수는 다음과 같습니다.

<script>
function showFull(element) {
  const contentBox = element.querySelector('div');
  contentBox.style.cssText = `
    position: absolute;
    display: block;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 12px;
    border-radius: 6px;
    width: 280px;
    word-break: break-all;
    z-index: 200;
    font-size: 14px;
    pointer-events: none;
  `;
}

function hideFull(element) {
  const contentBox = element.querySelector('div');
  contentBox.style.display = 'none';
}
</script>

이 방식은 추후 애니메이션이나 좌표 계산, 여러 개의 툴팁 동시 제어 등 확장이 용이하며, 복잡한 UI 구성 시 유리합니다.