Computer >> 컴퓨터 >  >> 프로그래밍 >> CSS

CSS 툴팁 만들기 완벽 가이드: 위치 설정부터 페이드 인 효과까지

웹사이트를 디자인하다 보면, 사용자가 페이지의 특정 요소 위에 마우스를 올렸을 때 추가 정보를 표시하고 싶은 경우가 있습니다.

예를 들어 자주 묻는 질문(FAQ) 페이지를 디자인한다면, 본문에 등장하는 기술 용어 위에 마우스를 올렸을 때 해당 용어에 대한 설명이 나타나도록 하고 싶을 수 있습니다. 이러한 정보는 사용자가 용어에 마우스를 올렸을 때만 표시되는 것이 바람직합니다.

이렇게 요소 위에 마우스를 올릴 때 정보를 표시하려면 툴팁(tooltip)을 활용하면 됩니다. 이 글에서는 실제 예제와 함께 CSS로 툴팁을 만드는 방법을 단계별로 살펴봅니다. 끝까지 읽고 나면 누구나 전문가처럼 CSS 툴팁을 구현할 수 있을 것입니다.

CSS 툴팁이란?

툴팁은 웹 페이지의 요소에 대한 부가 정보를 보여주는 UI 요소입니다. 사이트 제작자가 어떤 내용을 명확히 설명하거나, 본문 속 단어에 간단한 정의를 덧붙이고 싶을 때 다양한 곳에서 활용됩니다.

안타깝게도 툴팁 전용 HTML 태그는 따로 존재하지 않습니다. 그래서 HTML과 CSS를 조합해 툴팁처럼 동작하는 요소를 직접 만들어야 합니다.

먼저 툴팁의 HTML 코드부터 작성해 보겠습니다. 이번 예제는 레시피 웹사이트를 위한 것으로, 사용자가 Prepare the baking tray(베이킹 트레이 준비하기)라는 문구 위에 마우스를 올리면 트레이 준비 방법을 안내하는 툴팁이 나타나도록 만들겠습니다.

HTML 코드

<html>
<div style="text-align:center;">
	<p>Instructions for baking:</p>
<div class="tooltip">Prepare the baking tray.
	<span class="contents">Line tray with greaseproof paper.</span>
</div>
</div>

코드를 살펴보면, 먼저 style 속성 하나를 가진 <div> 태그를 만들었습니다. 이 스타일은 <div> 안의 텍스트를 요소의 가운데로 정렬합니다(text-align: center). 그다음 <p> 태그로 Instructions for baking:이라는 문단을 작성했습니다.

이어서 툴팁이 나타날 영역인 <div>를 만들었으며, 이 영역에는 Prepare the baking tray라는 텍스트가 들어갑니다. 이 <div> 태그 안에는 <span> 태그가 있는데, 사용자가 해당 문구 위에 마우스를 올렸을 때 표시될 텍스트가 바로 여기에 담깁니다.

현재 상태의 코드는 모든 텍스트가 화면에 그대로 노출됩니다. 아직 툴팁을 만들기 위한 스타일을 적용하지 않았기 때문입니다. 이제 CSS 툴팁을 완성하기 위한 스타일을 살펴보겠습니다.

CSS 코드

<style>
.tooltip {
	display: inline-block;
	position: relative;
	margin: 50px;
}

.tooltip .contents {
	visibility: hidden;
 	width: 120px;
	background-color: lightblue;
	color: white;
	text-align: center;
	padding: 10px 0;
	border-radius: 5px;
	position: absolute;
	z-index: 1;
}

.tooltip:hover .contents {
	visibility: visible;
}
</style>

이 코드는 사용자가 Prepare the baking tray 문구 위에 마우스를 올렸을 때 작동하는 툴팁을 만듭니다. 툴팁에는 베이킹 트레이를 준비하는 방법에 대한 간단한 안내가 담겨 있습니다.

그럼 이 CSS 코드가 어떻게 동작하는지 하나씩 분해해서 살펴보겠습니다.

.tooltip 스타일

먼저 .tooltip이라는 스타일 규칙을 만들어 HTML 코드의 <div> 태그에 적용했습니다. 이 스타일은 해당 요소를 인라인 블록 컨테이너(display: inline-block)로 정의합니다.

또한 툴팁의 position 값을 relative로 설정했습니다. 이렇게 하면 페이지를 스크롤해도 툴팁이 원래 위치에 고정됩니다. CSS 포지셔닝에 대해 더 알고 싶다면 CSS position 관련 가이드를 참고하세요.

마지막으로 툴팁 텍스트 주변에 50px의 margin을 지정해, 툴팁과 웹 페이지의 다른 요소들 사이에 여백을 만들었습니다. 마진에 대한 자세한 내용은 CSS margin 초보자 가이드를 확인해 보세요.

.tooltip .contents 스타일

다음으로 .tooltip .contents라는 스타일 규칙을 정의했습니다. 이 규칙은 부모 클래스가 tooltip인 요소 중 클래스명이 contents인 모든 요소에 적용됩니다.

이 예제에서는 <span> 태그에 해당하며, 실제 툴팁 박스의 외형을 결정하는 스타일들이 담겨 있습니다.

.contents 스타일에서는 먼저 visibility 속성값을 hidden으로 지정했습니다. 즉, 별도의 조건이 없는 한 툴팁은 사용자에게 숨겨진 상태로 유지됩니다.

그다음 툴팁의 너비(width)를 120px로, 배경색(background-color)을 연한 파란색(lightblue)으로, 텍스트 색상(color)을 흰색으로 설정했습니다. 또한 text-align을 사용해 툴팁 안의 텍스트를 가운데 정렬했습니다.

규칙의 후반부에서는 10px의 padding을 지정해 툴팁 텍스트와 테두리 사이에 여백을 만들고, border-radius를 5px로 설정해 툴팁에 둥근 모서리 효과를 부여했습니다.

마지막으로 .contents 요소의 position 값을 absolute로 설정했습니다. 이는 해당 요소가 부모 요소를 기준으로 배치된다는 의미입니다. 이 예제에서 부모 요소는 <div> 태그이므로, 툴팁은 항상 <div> 태그 옆에 나타나게 됩니다.

.tooltip:hover .contents 스타일

마지막으로 .tooltip:hover .contents 규칙을 정의했습니다. 이 규칙은 사용자가 tooltip 클래스를 가진 요소 위에 마우스를 올렸을 때 툴팁 텍스트를 화면에 표시하는 역할을 합니다.

이 규칙이 실행되면 .contents 요소의 visibility 값이 visible로 변경됩니다. 즉, 사용자가 툴팁 영역에 마우스를 올리는 순간 툴팁이 웹 페이지에 나타나는 것입니다.

CSS 툴팁 위치 지정하기

앞선 예제에서는 사용자가 Prepare the baking tray 문구 위에 마우스를 올리면 툴팁이 텍스트 오른쪽에 나타났습니다. 하지만 CSS를 조금만 수정하면 툴팁이 나타나는 위치를 자유롭게 변경할 수 있습니다.

오른쪽 위치

앞서 작성한 코드는 이미 툴팁을 텍스트 오른쪽에 배치합니다. 다만 툴팁을 다른 방식으로 스타일링한 후 다시 오른쪽 위치로 되돌리고 싶다면, 다음 코드를 사용하면 됩니다:

.tooltip .contents {
	top: -5px;
	left: 105%;
}

이 CSS 규칙을 앞선 코드와 함께 사용하면 툴팁이 텍스트 오른쪽에 배치됩니다. top: -5px는 툴팁을 컨테이너 요소의 세로 중앙에 맞춰주고, left: 105%는 툴팁의 위치를 컨테이너 너비의 105%만큼 왼쪽에서 옮겨 결과적으로 오른쪽에 배치되도록 합니다.

CSS 툴팁 만들기 완벽 가이드: 위치 설정부터 페이드 인 효과까지

실행 결과를 보면 툴팁이 텍스트 오른쪽에 나타나는 것을 확인할 수 있습니다.

왼쪽 위치

이번에는 툴팁을 텍스트 왼쪽에 표시해 보겠습니다. 다음 코드를 사용하면 됩니다:

.tooltip .contents {
	top: -5px;
	right: 105%;
}

이 코드를 앞선 코드에 추가하면 툴팁이 텍스트 왼쪽에 배치됩니다. top: -5px는 앞선 예제와 마찬가지로 툴팁을 컨테이너의 세로 중앙에 맞추는 역할을 하고, right: 105%는 툴팁의 위치를 컨테이너 너비의 105%만큼 오른쪽에서 옮겨 왼쪽에 배치되도록 합니다.

CSS 툴팁 만들기 완벽 가이드: 위치 설정부터 페이드 인 효과까지

이제 툴팁이 텍스트 왼쪽에 나타납니다.

위쪽 위치

툴팁을 텍스트 위쪽에 표시하고 싶다면 다음 코드를 사용하세요:

.tooltip .contents {
	bottom: 100%;
	left: 50%;
	margin-left: -60px;
}
CSS 툴팁 만들기 완벽 가이드: 위치 설정부터 페이드 인 효과까지

이 예제에서는 세 가지 CSS 스타일을 사용해 툴팁을 텍스트 위쪽에 배치했습니다. bottom: 100%과 left: 50%는 각각 툴팁 라벨(Prepare the baking tray)의 아래쪽과 왼쪽을 기준으로 툴팁을 라벨 크기의 100%만큼 옮기는 역할을 합니다.

margin-left 스타일은 툴팁을 가운데 정렬하는 데 사용됩니다. 툴팁의 너비가 120px이므로 margin-left 값을 -60px(120px의 절반)로 지정하면, 툴팁이 라벨의 정중앙 위쪽에 배치됩니다.

아래쪽 위치

툴팁을 Prepare the baking tray 라벨 아래쪽에 표시하고 싶다면 다음 코드를 사용하세요:

.tooltip .contents {
	top: 100%;
	left: 50%;
	margin-left: -60px;
}
CSS 툴팁 만들기 완벽 가이드: 위치 설정부터 페이드 인 효과까지

이 코드는 위쪽 위치 예제와 거의 같은 스타일을 사용하지만 한 가지 차이점이 있습니다. 바로 bottom: 100% 대신 top: 100%을 사용했다는 점입니다. 이 스타일은 툴팁 박스를 라벨(Prepare the baking tray) 기준으로 100%만큼 아래로 옮겨, 라벨 아래쪽에 툴팁이 배치되도록 합니다.

페이드 인(Fade In) 툴팁 만들기

툴팁을 디자인할 때, 사용자가 마우스를 올렸을 때 툴팁 텍스트가 서서히 나타나는 페이드 인 효과를 적용하고 싶을 수 있습니다. 이렇게 하면 툴팁이 화면에 등장하는 순간이 훨씬 부드럽고 세련되게 연출됩니다.

페이드 인 툴팁을 만들 때 사용할 수 있는 스타일은 다음과 같습니다:

.tooltip .contents {
	opacity: 0;
	transition: opacity 2s;
}

.tooltip:hover .contents {
	opacity: 1;
}

이 스타일을 첫 번째 예제의 코드와 함께 사용하면 페이드 인 효과를 구현할 수 있습니다. 동작 원리를 살펴보겠습니다. 먼저 툴팁의 opacity를 0으로 지정해 툴팁을 숨깁니다.

그다음 transition 속성에 두 가지 값을 지정합니다. opacity는 트랜지션을 적용할 CSS 속성을 의미하고, 2s는 트랜지션 지속 시간(초)을 의미합니다.

이어서 .tooltip:hover .contents 규칙을 만들어, 사용자가 툴팁 위에 마우스를 올렸을 때 opacity를 1로 설정합니다.

이렇게 하면 사용자가 툴팁에 마우스를 올릴 때 요소가 완전히 투명한 상태에서 완전히 보이는 상태로 전환되는 효과를 얻을 수 있습니다. 트랜지션 지속 시간을 2s로 지정했기 때문에 이 전환은 2초에 걸쳐 일어납니다.

CSS 트랜지션에 대해 더 깊이 알고 싶다면 CSS transition 속성 관련 가이드를 참고해 보세요.

마무리

툴팁은 웹 페이지에 부가 정보를 표시하는 데 사용됩니다. HTML과 CSS의 도움을 받으면, 미적으로 뛰어난 툴팁 요소를 디자인해 웹 페이지에 추가 정보를 손쉽게 보여줄 수 있습니다.

이 글에서는 예제를 통해 CSS로 툴팁을 만드는 방법과, 툴팁을 라벨의 왼쪽·오른쪽·위쪽·아래쪽에 배치하는 방법을 살펴봤습니다. 또한 사용자가 툴팁 라벨 위에 마우스를 올렸을 때 작동하는 페이드 인 효과 구현 방법도 함께 알아봤습니다.

이제 여러분도 전문 웹 디자이너처럼 자신만의 CSS 툴팁을 디자인할 준비가 되었습니다!