네 번째 문제: 툴팁을 포함하는 버튼 만들기

요구사항

HTML 구조:
- <button class="tooltip-btn"> 태그를 만듭니다. 버튼 내부에 텍스트("도움말")를 넣습니다.
- 버튼 안에 <span class="tooltip-text">를 만들고 툴팁으로 표시될 텍스트("여기에 중요한 정보가 있습니다.")를 넣습니다.
CSS - 버튼 및 기본 설정:
- .tooltip-btn에 padding: 10px 20px, background-color: #007bff, color: white, border: none을 적용합니다.
- .tooltip-btn이 툴팁의 기준점이 되도록 위치 지정 속성을 설정합니다.
CSS - 툴팁 텍스트 스타일:
- .tooltip-text에 다음 스타일을 적용합니다:
  - 배경색: #333 (어두운 회색)
  - 글자색: white
  - 패딩: 8px 12px
  - 모서리 둥글게: 4px
  - 초기 상태: 툴팁이 숨겨져 있도록 설정합니다.
CSS - 툴팁 위치 지정:
- .tooltip-text를 버튼 위쪽 중앙에 오도록 위치 지정 속성을 설정합니다. (힌트: 뷰포트 기준이 아닌 부모 요소 기준)
- 툴팁이 버튼으로부터 약 -40px 정도 위에 배치되도록 합니다.
- 툴팁을 가운데 정렬하도록 변환(transform) 속성을 사용합니다. (힌트: 툴팁 너비를 모르는 경우 유용함)
CSS - 화살표 (가상 요소):
- 툴팁 아래쪽에 작은 삼각형 모양의 화살표가 버튼을 가리키도록 가상 요소를 사용합니다. (힌트: ::after 사용)
- 화살표는 툴팁과 같은 #333 배경색을 사용하고 툴팁의 중앙 아래에 위치해야 합니다.
CSS - 호버 효과:
- .tooltip-btn에 마우스를 올렸을 때 (:hover), .tooltip-text가 보이도록 설정합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=search" />
    <style>
        body {
            padding: 80px;
        }
        .tooltip-btn {
            position: relative;
            padding: 10px 20px;
            background-color: #007bff;
            border: none;
            color: #fff;
        }
        .tooltip-btn .tooltip-text {
            position: absolute;
            left: 50%;
            top: -40px;
            transform: translateX(-50%);
            opacity: 0;
            padding: 8px 12px;
            background-color: #333;
            border-radius: 4px;
            white-space: nowrap;
            color: #fff;
        }
        .tooltip-btn .tooltip-text::before {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            display: inline-block;
            border-style: solid;
            border-width: 6px 6px 0 6px;
            border-color: #333 transparent transparent transparent;
            transform: translateX(-50%);
            transform-origin: left center;
        }
        .tooltip-btn:hover .tooltip-text {
            opacity: 1;
            transition: opacity 0.3s linear;
        }
    </style>
</head>
<body>
    <button class="tooltip-btn">
        도움말
        <span class="tooltip-text"><i class="material-symbols-outlined"></i> 여기에 중요한 정보가 있습니다.</span>
    </button>
</body>
</html>

저작자표시 비영리 동일조건 (새창열림)

'w. Gemini' 카테고리의 다른 글

여섯 번째 문제: 스크롤 및 애니메이션 효과가 있는 헤더 만들기 (0)	2025.10.27
다섯 번째 문제: CSS 변수를 활용한 커스텀 입력 필드 만들기 (0)	2025.10.27
세 번째 문제: 반응형 3열 카드 레이아웃 만들기 (0)	2025.10.27
두 번째 문제: 유연한 내비게이션 바 만들기 (0)	2025.10.27
첫 번째 문제: 간단한 프로필 카드 만들기 (0)	2025.10.27

요구사항

'w. Gemini' 카테고리의 다른 글

티스토리툴바