[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; ..

• format_list_bulleted css
• · 2022. 11. 28.
• textsms

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..

• format_list_bulleted css
• · 2021. 12. 9.
• textsms

button을 css로 둥글게 만들기

button 태그를 둥글게 만들려고 border-radius를 사용해서 px을 아무리 큰수를 넣어도 변하지 않는다 그러나 입력방법이 잘못된것을... border-radius : 50% 바로 둥글게 변한다. 출처 : https://www.w3schools.com/howto/howto_css_round_buttons.asp

• format_list_bulleted css
• · 2021. 8. 18.
• textsms