본문 바로가기

bootstrap52

자바스크립트 bootstrap5 tooltip (툴팁) 만들기 안녕하세요. 오늘은 자바스크립트에서 bootstrap5의 tooltip 기능 구현을 하는 예제를 포스팅하려고 합니다. tooltip은 어떤 요소에 마우스를 올리게 되면 그 요소가 의미하고 있는 내용의 상세 정보를 보충하여 보여줄 수 있는 말풍선 기능입니다. 기능은 간단하지만 실제로 활용을 하면 효과가 상당한 기능입니다. bootstrap에서 지원하는 tooltip은 간단한 속성값 몇 개로 기능 구현이 가능하기 때문에 하나씩 진행해 보고 어떻게 작동하는지 확인해 보도록 하겠습니다. tooltip 툴팁 어떠한 요소의 내용을 보충해 줄 수 있는 상세한 내용을 간단하게 말풍선 효과를 줘서 표시해 주는 기능으로 지정할 요소에 지정을 해줘서 기능의 효과를 강조할 수 있다. 1. 기본 사용 예시 Tooltip boo.. 2023. 2. 4.
자바스크립트 bootstrap5 carousel 기능 만들기 (캐러셀) 안녕하세요. 오늘은 bootstrap5의 carousel (캐러셀) 기능에 대해 포스팅하려고 합니다. carousel의 뜻은 회전목마를 의미하며, 의미하는 것처럼 이미지 같은 요소를 회전시켜 가며 효과를 주는 기능입니다. 보통 슬라이드쇼라고도 합니다. 보통 홈페이지를 소개하는 요소가 있거나 광고할 요소가 많은 경우에 carousel 기능을 활용해서 한 화면에서 다양한 이미지나 영상을 보여줄 수 있습니다. 효과가 아주 좋습니다! carousel 캐러셀 carousel은 회전목마를 의미하며, 이미지나 영상과 같은 요소를 회전시켜가며 효과를 주는 기능 (슬라이드쇼와 같은 효과) 1. carousel 컴포넌트 Previous Next 간단한 샘플 이미지 3개를 연동해서 carousel 컴포넌트를 활성화시켰습니다.. 2023. 2. 3.
728x90