[HTML/CSS] 툴팁 만들기
2023. 6. 25.ㆍ공부/HTML,CSS
728x90
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tooltip</title>
</head>
<body>
<div class="tooltip">
<img src=./images/img.png" alt="이미지" width="100px">
<div class="tooltip_txt">툴팁 텍스트</div>
</div>
</body>
</html>
CSS
* {
box-sizing:border-box;
}
/* 전역에 box-sizing의 속성을 border-box로 정의하여 width, height가 border를 포함하도록 함 */
.tooltip {
position:relative;
text-align:center;
}
/*
[이미지와 tooltip의 부모 개체]
position의 속성값을 relative로 주고,
text-align의 속성값을 center로 하여 속한 개체들을 중앙 정렬함(inline 개체 정렬)
*/
.tooltip_txt {
display:none;
postion:absolute;
top:120px;
left:calc(50% - 100px);
background-color:#000;
border-radius:5px;
color:#fff;
width:200px;
padding: 10px 0;
}
/*
[툴팁 개체]
마우스를 올렸을 때 보이도록 할 예정으로 디폴트 값은 display: none으로 함
position의 속성값을 absolute로 주어 부모 개체를 기준으로 정렬하게 만듬
x축의 값을 옮길 때는 calc 연산하여 부모 개체의 50%를 기준으로 정렬하고,
연산에 따라 부모 개체의 50%를 기준으로 왼쪽으로 -50px, 오른쪽으로 50px한 곳을 툴팁의 중앙값으로 함
(width는 200px)
padding값은 위 10px로 여백을 주도록 디자인하고
글씨는 #fff, background-color는 #000로 디자인
*/
.tooltip_txt:after {
display:block;
position:absolute;
left:calc(50% - 8px);
top:-17px;
content:"▲";
color:black;
}
/*
[1. 툴팁의 뾰족이 만드는 방법 - 가상요소의 content 속성에 특수문자(▲) 넣어서 만들기]
툴팁 개체와 마찬가지로 position 속성은 absolute로 주고
top에 -값을 넣어 개체 위로 위치 옮김,
content에 특수문자 "▲"를 넣어 모양 생성하고(이때 가로 16px, 세로 21px이 됨)
left값에 calc연산을 사용하여 부모개체의 50%를 기준으로 왼쪽으로 -4px, 오른쪽으로 4px여백을 준 곳을 뾰족이의 중심 기준점으로 함
color는 balck으로 디자인
*/
.tooltip_txt:after {
display: block;
position: absolute;
content: "";
left: calc(50% - 8px);
top: -16px;
border: 8px solid black;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid transparent;
}
/*
[2. 툴팁의 뾰족이 만드는 방법 - 가상요소에서 border의 bottom만 남겨서 삼각형 만들기]
툴팁 개체와 마찬가지로 position 속성은 absolute로 주고
top에 -값을 넣어 개체 위로 위치 옮김, content는 ""로 넣어야 가상 요소 보이기 때문에 content 속성 넣어줌
left값에 calc연산을 사용하여 부모개체의 50%를 기준으로 왼쪽으로 -4px, 오른쪽으로 4px여백을 준 곳을 뾰족이의 중심 기준점으로 함
weight가 8px인 border를 생성하면 빈개체에 좌,우,양,옆으로 8px border생성되어 정사각형처럼 보이는데,
이때 border의 left,right,top값을 transparent처리하면 빈개체를 감싼 bottom만 남아 삼각형처럼 보이는 뾰족이가 완성됨
*/
.tooltip:hover .tooltip_txt { /* .tooltip개체 hover 시 tooltip_txt의 스타일링 */
display: block; /* css 상태값에 따라 none처리된 툴팁에 block속성을 생성하도록 하여 display값 조정 */
}'공부 > HTML,CSS' 카테고리의 다른 글
| [HTML/CSS] Flex (2) | 2023.11.22 |
|---|---|
| [HTML/CSS] 반응형 테이블 만들기 (0) | 2023.09.29 |
| [HTML/접근성] iframe 태그의 반응형 대응 (0) | 2022.12.04 |
| [HTML] 웹사이트 빨리 만드는 지름길, emmet (0) | 2022.07.28 |
| [HTML] 뷰포트 오른쪽 흰색 여백 현상 해결 (0) | 2022.07.13 |