말풍선(Tooltip) 디자인
현재(2022.8), 티스토리 블로그 스킨의 블로그 메뉴는 왼쪽에 배치했다. 메뉴 아이콘에 마우스 포인터를 가져가면 말풍선이 표시된다. 맨 위의 아이콘 말풍선은 title 속성으로 했고 나머지 아이콘은 CSS로 했다.title 속성(attribute)은 말풍선을 쉽게 달 수 있는데 몇 가지 단점?이 있다. 말풍선 표시에 딜레이가 있으며 표시되는 위치를 지정할 수 없고 디자인할 수 없다. CSS를 이용하면 빠르게 표시되는 말풍선을 디자인할 수 있다.
CSS 말풍선 원리는 간단하다. 말풍선을 디자인하고 원하는 위치를 정한 뒤 말풍선을 보이지 않게 한다.(visibility:hidden) 그리고 아이콘에 마우스 포인터를 가져가면(:hover) 숨김 처리한 말풍선을 표시되게 한다.(visibility:visible)
HTML - 부모(아이콘)와 자식(말풍선) 관계로 코딩
HTML은 태그(Tag)로 구성된 계층 구조이다. 태그 안에 태그를 넣고 그 태그 안에 또 태그를 넣을 수 있다. 이때 바깥쪽 태그를 부모 요소(parent element), 안쪽 태그를 자식 요소(child element)라 한다. 이렇게 부모와 자식 관계로 코딩해야 아래의 position 속성으로 말풍선 위치를 쉽게 바꿀 수 있다.
<li class="tooltip"> <!-- 부모(아이콘) -->
<a class="link_sidebar" href="#a"></a>
<span class="tooltiptxt">S. 사이드바</span> <!-- 자식(말풍선) -->
</li>
CSS - position과 visibility 속성으로 말풍선 위치 설정과 디자인
HTML의 (부모/자식) 요소는 정의된 순서대로 위에서 아래로 표시되는데 CSS의 position 속성을 이용하면 요소의 위치를 변경할 수 있다.position:relative(상대 위치)를 정의하면 top, bottom, left, right 속성으로 요소의 위치를 변경할 수 있다. 이때 위, 아래, 왼쪽, 오른쪽의 이동 기준은 현재 요소의 위치가 기준이 된다. position:absolute(절대 위치)는 position:relative를 정의한 가장 가까운 부모 요소의 위치를 기준으로 한다.
부모 요소에 해당하는 아이콘은 position:relative로 설정, 자식 요소에 해당하는 말풍선은 position:absolute로 설정한다.
/* 부모(아이콘)
=========================================*/
.tooltip {
position: relative;
}
/* 자식(말풍선)
=========================================*/
.tooltip .tooltiptxt {
visibility: hidden; /* visible로 하면 말풍선의 디자인과 위치 설정을 쉽게 할 수 있다. 코딩 마지막 단계에서 hidden으로 변경. */
position: absolute;
top: 0;
left: 68px;
}
/* mouseover 시 말풍선을 보이게 한다.
=========================================*/
.tooltip:hover .tooltiptxt {
visibility:visible;
}
▶ 화살표
.tooltip .tooltiptxt::before {
content: '';
display: block;
border-style: solid;
border-width: 5px;
border-color: transparent transparent transparent #000;
position: absolute;
top: 10px;
left: -8px;
}
참조 사이트
첨부 파일