DAY #12
- 문제
👉 문제 바로가기
Tooltip: I'm quite sure, you already know what obsession means. But you can look it up anyways.
도구 설명: 당신은 obsession이 무엇을 의미하는지 이미 알고 있을 것입니다. 하지만 어쨌든 찾아볼 수는 있습니다.
이번엔 쉬어가는 문제인듯 하다!
obsession 에 마우스를 올리면 툴팁 이 나오는 간단한 문제이다.
저 부분을 마크업 하는 부분이 핵심 포인트인듯 하다.
구조를 살펴보면, 좌측 상단에 커다란 따옴표(")가 있다.
본문보다 폰트 크기가 크고, 투명도가 낮다.
그리고 글 작성자 이름은 이탈릭체로 표기되어있다.
✨툴팁! (tooltip)✨
일단은 문장 중간에 obsession 을 inline 요소 (span 등) 으로 묶어주어야 한다.
그런데 구조상 툴팁이 obsession 안에 들어가 있어야 한다.
(툴팁의 위치를 잡아주고, 마우스 오버 효과를 주려면 이게 편함)
그런데 나는 이 툴팁을 block 요소 로 만들고 싶었다!!
.
.
✨하지만 inline요소 안에는 block요소가 들어갈수 없다✨
그래서 obsession 를 block 요소 묶어주고, inline-block 속성을 주기로 했다.
inline-block은 블록 레벨 요소와 인라인 요소의 특성을 모두 가지고 있습니다. 즉, inline-block 요소 안에 블록 레벨 요소가 들어갈 수 있습니다.
그렇다고 한다. (혹시 몰라서 찾아봄)
- 내가 만든 HTML Code
요렇게 작성했당 ㅎㅎ
🖱마우스 오버(:hover)🖱
툴팁을 obsession 안에 넣은 이유!! 👉(중요)
👉obsession 영역 뿐만 아니라 툴팁에 마우스 오버시에도 툴팁이 사라지면 안됨!!👈
이렇게 하지 않으면, 영역을 확장 시킬 수 없기 때문에 툴팁에 마우스를 갖다 대기 전에 툴팁이 사라져버리게 된다. (불편함)
그런데!! 이렇게 했는데도 마우스🖱가 요 부분 사이를 지나갈때도 툴팁이 자꾸 없어지려고 하는 것이다!! 😫
그래서 저 부분을 어떻게 연결시킬까 고민하다가 (예전부터 고민했던 문제임)
찾은 방법!! 👇👇
.tootip {
...
&::before {
content: "";
position: absolute;
width: 100%;
height: 10px;
left: 0;
bottom: -11px;
}
&::after {
content: "";
position: absolute;
width: 10px;
height: 10px;
background-color: #286f8a;
left: 50%;
transform: translateY(-50%) rotate(45deg);
bottom: -10px;
}
}::after 는 말풍선 꼬리모양을 만들기 위해서 이미 사용했으니,
::before 를 이용해서 저 사이에 투명 공간을 만들어서 obsession 부분과 연결 시켜 주었다. 😊
이렇게 하면 마우스가 저 공간 사이를 지나갈 때에도 툴팁이 사라지지 않는당~😙
툴팁이 스-윽 하고 나오는 부분 구현은 많~~이 해본 부분이니 패스
✌"따옴표"✌ 배경 만들기
이 부분은 앞 문제에도 많이 사용했던 font-awesome 을 사용해서
.center 에 배경으로 깔아 주었다!!
&::before {
content: '\f10e';
font-family: 'fontawesome';
}font-awesome 을 유니코드를 이용해서 사용하려면, 위처럼 content 에 역슬래쉬 + 유니코드를 넣고 font-family: 'fontawesome'; 를 추가해 주어야 한다.
위치는 문제와 맞게 설정해 주면 된다.
- 내가 만든 CSS Code
- 결과물
이렇게 툴팁 구현하기 완료..!! 👍
쉬웠지만 (예전부터 고민했던 문제)에 대한 좋은 해결방안을 얻어 갈 수 있어서 뿌듯, 행복하다😊
끝
