부트스트랩53 자바스크립트 bootstrap5 carousel 기능 만들기 (캐러셀) 안녕하세요. 오늘은 bootstrap5의 carousel (캐러셀) 기능에 대해 포스팅하려고 합니다. carousel의 뜻은 회전목마를 의미하며, 의미하는 것처럼 이미지 같은 요소를 회전시켜 가며 효과를 주는 기능입니다. 보통 슬라이드쇼라고도 합니다. 보통 홈페이지를 소개하는 요소가 있거나 광고할 요소가 많은 경우에 carousel 기능을 활용해서 한 화면에서 다양한 이미지나 영상을 보여줄 수 있습니다. 효과가 아주 좋습니다! carousel 캐러셀 carousel은 회전목마를 의미하며, 이미지나 영상과 같은 요소를 회전시켜가며 효과를 주는 기능 (슬라이드쇼와 같은 효과) 1. carousel 컴포넌트 Previous Next 간단한 샘플 이미지 3개를 연동해서 carousel 컴포넌트를 활성화시켰습니다.. 2023. 2. 3. 자바스크립트 bootstrap5 아코디언 만들기 (accordion) 안녕하세요. 오늘은 자바스크립트 bootstrap5의 아코디언 기능 구현하는 방법을 포스팅하려고 합니다. 아코디언은 목록형 요소에 세부적인 내용을 포함시켜 접어두고 필요할 때 열어볼 수 있는 기능입니다. 아코디언 기능도 다른 기능들과 마찬가지로 활용도가 높기 때문에 예제를 보고 구현해 보는 것도 좋을 것 같습니다! 그럼 아코디언 기능은 어떤 식으로 구현이 되고 작동이 되는 것인지 예시 코드를 통해 확인해 보도록 하겠습니다. Accordion 아코디언 목록형 DOM 영역에서 세부적인 내용을 포함시켜 접어두고 필요한 경우에 열어볼 수 있는 기능 1. Accordion 기본 사용 예시 Accordion Item #1 안녕하세요. Accordion Item #1 Accordion Item #2 안녕하세요. Ac.. 2023. 2. 3. 자바스크립트 bootstrap 5 경고창 만들기 안녕하세요. 오늘은 자바스크립트에서 bootstrap 5의 경고창 컴포넌트 만드는 방법을 정리해 보려고 합니다. 자바스크립트의 기본 alert이 있지만 style이 기본 style이고, 자바스크립트의 내장 기능이기 때문에 변경하는 것이 어렵습니다. 그래서 bootstrap의 기능을 빌려 alert을 사용하면 style이 적용된 alert을 간단하게 활용하여 사용할 수 있습니다. 그럼 예제를 통해 하나씩 알아보도록 하겠습니다. Alert 경고창 bootstrap에서는 alert 경고창의 스타일 8가지를 지원하고 있습니다. 색상에 따라 나타내는 내용, 상황을 다르게 줄 수 있는 효과가 있습니다. 기본적으로 간단한 알림을 줄 때에는 파란색, 성공을 알릴 때에는 초록색, 실패를 알릴 때에는 붉은색 등 표시를 다.. 2023. 2. 1. 이전 1 다음 728x90
