728x90
반응형
close

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

css 3

[HTML] 스크립트 없이 CSS로 툴팁 띄우기

제목 간단하게 이런식으로 태그를 쓰면 마우스를 몇초 가져다 대면 "제목 자세히..." 문구가 풍선 아이콘으로 나타난다 그런데 1-2초 기다리는게 슬슬 짜증이 나기 시작한다 마우스만 대면 바로 튀어나오게 설정하되 자바스크립트 안쓰는 방법을 찾아보자.. 제목 제목 자세히... 조금 풀어쓰기는 했지만 중간에 클래스가 포함된 내역이 추가된다 CSS 부분은 이렇게 생성한다 .tooltip { display: inline-block; color: deeppink; font-weight: bold; } .tooltip-text { display: none; position: absolute; width:400px; border: 1px solid; border-radius: 5px; font-size: 0.8em; ..

css 2022.11.28

position:sticky

css 포지션에서 fixed만 주로 사용하다가 sticky를 써보니 편리합니다. fixed는 전체창에서 고정시켜주지만 sticky는 해당스크롤영역에서만 동작합니다. 중요한건 sticky를 어디를 기준으로 움직이게 할것인지 top, left, right, bottom중 하나를 정해줘야 합니다. 자세한 사항은 아래 출처에서.... 출처 : https://abcdqbbq.tistory.com/70 [css 속성] position sticky css를 이용해 position 값을 사용하다보면 주로 사용하는 position 값은 static, relative, absolute, fixed 이 4가지가 될 것이다. 그도 그럴것이 이번에 소개할 position 값인 sticky의 경우엔 IE(익스플로어)에.. abc..

css 2021.12.09
728x90
반응형