본문 바로가기

Dev/bootstrap11

bootstrap selectpicker multiple js 수정: 전체 선택이 체크 되어 있는 상태에서 다른 옵션이 하나라도 체크 해제될 경우 전체 선택도 같이 체크 해제 되게 bootstrap selectpicker multiple js 수정: 전체 선택 해제 및 CSS 변경Bootstrap SelectPicker는 다중 선택이 가능한 드롭다운을 손쉽게 구현할 수 있는 편리한 플러그인입니다. 다만, 기본 기능에서 '전체 선택' 체크박스가 활성화된 상태에서 개별 옵션이 선택 해제될 때, '전체 선택'도 자동으로 해제되는 기능이 필요할 수 있습니다.이 글에서는 해당 기능을 구현하기 위한 JavaScript 코드 수정 방법과 함께 CSS 변경 방법에 대해 알아보겠습니다.1. Bootstrap SelectPicker란?Bootstrap SelectPicker는 기본 HTML 셀렉트 박스를 보다 기능적으로 확장하여 사용자 인터페이스를 개선해주는 플러그인입니다. 다중 선택, 검색 기능,.. 2024. 8. 22.
CSS fontawesome 아이콘, 부트스트랩 아이콘, 구글 아이콘 사용방법 CSS fontawesome 아이콘, 부트스트랩 아이콘, 구글 아이콘 사용방법 fontawesome CSS 아이콘의 사용과 맞춤화 CSS를 이용한 아이콘 사용은 웹사이트에 시각적인 요소를 추가하는 간단하고 효과적인 방법입니다. 예를 들어, Font Awesome은 웹 개발자들 사이에서 널리 사용되는 아이콘 라이브러리입니다. 이를 사용하려면 HTML 페이지에 태그를 추가하여 Font Awesome의 자바스크립트 라이브러리를 불러와야 합니다. 예시 코드는 다음과 같습니다: 태그에 클래스 이름을 지정함으로써 원하는 아이콘을 쉽게 추가할 수 있습니다. 또한, CSS를 통해 이 아이콘들의 크기, 색상, 그림자 등을 맞춤 설정할 수 있습니다. 부트스트랩 아이콘의 활용 부트스트랩은 반응형 웹 디자인을 쉽게 만들 수 .. 2023. 11. 14.
부트스트랩 그리드 폭 Bootstrap grid incorrect width .container .row .col-* 부트스트랩 너비 조절에 관한 이해와 최적화 부트스트랩은 반응형 웹 디자인을 쉽게 구현할 수 있도록 해주는 CSS 프레임워크입니다. 이 툴을 사용하면 다양한 화면 크기에 맞춰 콘텐츠의 레이아웃을 조정할 수 있지만, 때때로 의도한 대로 동작하지 않을 때가 있습니다. 여기서 당신이 겪고 있는 문제는 #breadcrumbs, h1, .info 요소가 자신의 최대 너비를 갖지만 .row 요소는 음의 마진을 가지고 있어 예상치 못한 너비를 가지는 것으로 보입니다. 부트스트랩 그리드 시스템 이해하기 부트스트랩의 그리드 시스템은 컨테이너(container), 행(row), 그리고 열(column)으로 구성됩니다. 이러한 요소들은 사이트의 구조를 정의하고 콘텐츠를 적절히 배열하기 위해 사용됩니다. .container 혹.. 2023. 11. 1.
부트스트랩 height 부트스트랩에서 높이 조절하기: div 요소의 높이를 부모 요소에 맞추는 방법 부트스트랩을 사용하면 웹 개발이 훨씬 쉬워지죠. 특히 반응형 그리드 시스템 덕분에 다양한 화면 크기에서도 일관된 레이아웃을 유지할 수 있어요. 가로 크기를 조절하는 것은 col-* 클래스를 사용해 쉽게 할 수 있지만, 세로 높이를 조절하는 것은 조금 다른 접근이 필요해요. 부트스트랩의 높이 설정 부트스트랩 4 이상에서는 높이를 조절하기 위한 유틸리티 클래스가 포함되어 있어요. 이 클래스들을 활용하면, 요소의 높이를 쉽게 조절할 수 있습니다. 예를 들어, h-100 클래스를 사용하면 요소의 높이를 부모 요소의 100%로 설정할 수 있어요. 그러나, h-100 클래스를 사용하기 전에 몇 가지 주의해야 할 점이 있어요. 요소의 높이를.. 2023. 10. 29.
[Bootstrap] 부트스트랩 시작하기 부트스트랩: 웹 페이지 디자인의 혁신 부트스트랩(Bootstrap)은 웹 페이지 디자인과 개발을 더욱 쉽고 효율적으로 만들어주는 프레임워크입니다. 원래는 트위터에서 사용하는 레이아웃과 요소들을 표준화하기 위해 만들어졌으나, 지금은 다양한 웹 페이지에서 활용되고 있는 매우 유명한 라이브러리입니다. 이 글에서는 부트스트랩의 기본적인 개념과 사용 방법에 대해 알아보겠습니다. 부트스트랩의 탄생 배경과 현재 상태 부트스트랩은 원래 트위터에서 레이아웃, 버튼, 폼 등의 디자인을 일관되게 만들기 위한 목적으로 시작되었습니다. 현재까지도 계속 업데이트되고 있으며, 메이저 버전 5까지 출시되어 있습니다. 초기의 트위터 특성은 점점 사라지고, 다양한 웹 페이지 디자인에 활용되고 있습니다. 부트스트랩은 CSS 전처리기인 S.. 2023. 10. 10.
bootstrap selectpicker multiple js 수정 전체선택 해제 변경 css bootstrap selectpicker multiple js 수정 전체선택 해제 변경. 이 제목을 뭐라고 설명해야 할지 모르겠다. 아무튼 요지는 이렇다. 부트스트랩4의 selectpicker multiple 옵션을 사용할 때 디폴트로 주어지는 모두선택 모두해제 토글 되는게 클라이언트 마음에 안들었나보다. 모든 option이 선택되면 모두 해제되는 것은 당연하지만 하나의 옵션만 선택해도 모두해제로 바뀌는 것이 클라이언트는 이해가 안된 모양이다. 그래서 클라이언트는 전체가 아닌 옵션을 선택하면 전체옵션은 변하지 않고, 전체옵션을 선택하면 모든 옵션도 체크가 된 것 처럼 보이게 해 달라는 것이다. 기본적인 셀렉트피커의 태그 구조는 다음과 같다. 그룹명 그룹설명 부서명 새로 변경해서 스크립트를 짠 html구조.. 2021. 7. 19.
Bootstrap 4 Carousel : 자동 재생 중지 방법 부트스트랩 슬라이더 처음 퍼블리셔를 시작했을 때 내게 카루셀(Carousel)은 악몽 같은 존재였다. 클라이언트들이 요구하는 각종 사안을 적용해서 슬라이더를 매번 새로 만들어야 했기 때문이다. 요즘은 부트스트랩같은 라이브러리가 많이 사용되고 있어서 슬라이더 구현이 너무 편하다. Bootstrap 4는 별로 친절하지 않다. Bootstrap 4에 카루셀 슬라이더가 있지만, 처음부터 자동재생이다. 이걸 원한다면 너무도 간편한 방법이지만, 처음에 멈춰 있기를 원한다면 이 때는 패닉이다. 방법은 의외로 간단하고 무궁무진하다. 먼저 예제를 보자. 가장 간단한 방법은 data-ride =”carousel” 를 빼 버리는 방법이다. 이게 없으면 부트스트랩 슬라이더는 멈춰 있다. 아니 멈춰두면 이게 뭐냐? 싶겠지만 부트스트랩 슬라이더는 .. 2021. 7. 2.
부트스트랩 날짜선택 폼 bootstrap 4.3 datepicker 부트스트랩을 사용하면 여러 편리함이 있는데 그중에서도 드롭다운, 데이터 피커 같은 것을 쓰기가 굉장히 쉽다. 그런데 부트스트랩 4.3으로 업그레이드를 하면, 기존에 부트스트랩으로 작성했던 스타일이 흐트러진다. 그중에서도 특히 datepicker는 최악이다. 또한 부트스트랩 4.3에서는 더 이상 글리피콘을 지원하지 않는다. 글리피콘이 유료화된 탓이다. 기존의 부트스트랩 데이터 피커를 그대로 사용했다면, 클래스 명을 변경해 주고 글리피콘 대신 :before 선택자로 이미지 캘린더를 달아 주면 된다. 꽤 비슷한 화면이 나왔다. html markup은 다음과 같다. - 달라진 점은 input-group-addon 대신에 input-group-append을 사용했다. 또한 캘린더 아이콘이 뿌려지던 태그에서 글리 .. 2021. 1. 16.
bootstrap4 datepicker tempusdominus style css 수정을 위한 달력 element dom class bootstrap4 datepicker tempusdominus style css 수정을 위한 달력 element dom class 부트스트랩 4에서는 기존의 datepicker가 작동하지 않는다. 그렇다고 bootstrap을 마이너그레이션을 하기도 애매하다. 부트스트랩 4에 적용이 가능한 데이트 피커는 tempusdominus가 거의 유일하다. 좀 더 커스터마이징을 하려면 필스 라이브러리인 moments.js도 건드려야 하지만, 일단은 tempusdominus가 그리는 calendar의 class와 html element 구조만 알아도 대략적인 스타일링은 가능하다. 하지만 유감스럽게도 데이터피커를 멈추고 돔을 탐색하기가 쉽지 않다. 시간이 없어서 일단 그냥 tempusdominus datepicker .. 2021. 1. 11.
드롭다운 사용을 위한 popper.js 다운로드 for bootstrap 4.3 dropdown components 드롭다운 사용을 위한 Popper.js 다운로드 for Bootstrap 4.3 Dropdown Components 안녕하세요, 블로그 독자 여러분! 오늘은 Bootstrap 4.3에서 드롭다운 컴포넌트를 사용하기 위해 필요한 Popper.js 다운로드에 대해 알아보려 합니다. 이 글을 통해 드롭다운 메뉴를 구현하면서 발생할 수 있는 문제를 해결하는 방법을 살펴보겠습니다. 부트스트랩 3.x부터 4.3까지의 변화 부트스트랩의 버전이 업데이트되면서 드롭다운 컴포넌트를 사용하기 위한 요구 사항도 조금씩 변화하였습니다. 부트스트랩 3.x까지는 Popper.js가 필수적으로 필요하지 않았습니다. 하지만 4.3 버전부터는 드롭다운 메뉴를 사용하려면 Popper.js를 함께 사용해야 합니다. 이로 인해 초기 설정에 .. 2020. 10. 21.
부트스트랩4 데이트피커 datepicker 이벤트 가로채기 / 제이쿼리 toggle()이용해서 게시물 목록 정렬 버튼 토글하기 부트스트랩4 데이트피커 datepicker 이벤트 가로채기 부트스트랩4 데이트피커는 아주 강력한 도구입니다. 여러 이벤트와 API를 제공하여 사용자가 원하는 방식으로 캘린더와 시간을 선택할 수 있게 해주죠. 하지만 때로는 플러그인이 제공하는 기본 이벤트가 우리의 요구사항과 완벽하게 일치하지 않을 때가 있습니다. 이럴 때 소스 코드를 직접 수정해야 하는 상황이 발생할 수 있습니다. 본 글에서는 이러한 문제를 어떻게 해결할 수 있는지 알아보겠습니다. https://tempusdominus.github.io/bootstrap-4/Events/ Redirecting to https://getdatepicker.com/ tempusdominus.github.io 기본적인 이벤트 사용법 Tempus Dominus에.. 2020. 3. 24.

티스토리툴바