My Coding World

웹사이트를 제작하다 보면 버튼이나 아이콘 위에 간단한 정보를 제공하고 싶을 때가 있습니다. 이때 유용하게 쓸 수 있는 것이 바로 **툴팁(Tooltip)**입니다. 툴팁은 사용자가 특정 요소 위에 마우스를 올렸을 때 작은 팝업 형태로 추가 정보를 제공하는 UI 요소입니다. Bootstrap은 이러한 툴팁을 손쉽게 구현할 수 있도록 강력한 도구를 제공합니다. 이번 글에서는 Bootstrap 툴팁의 기본 설정 방법부터 방향 설정까지, 실전 예제를 통해 알아보겠습니다.툴팁의 기본 설정 방법Bootstrap에서 툴팁을 사용하려면 HTML 요소에 필요한 속성을 추가하고, JavaScript를 통해 초기화 작업을 해주어야 합니다. 예를 들어, 버튼 위에 "여기를 클릭하세요"라는 메시지를 툴팁으로 보여주고 싶다면 다..

부트스트랩(Bootstrap)과 테일윈드(Tailwind CSS)는 둘 다 인기 있는 CSS 프레임워크이지만, 설계 철학과 사용 방법이 다릅니다. 아래는 두 프레임워크의 주요 차이점과 특징입니다. 1. 설계 철학부트스트랩:컴포넌트 기반 프레임워크버튼, 카드, 네비게이션 바 같은 미리 설계된 UI 컴포넌트를 제공.빠르게 레이아웃을 잡고 UI를 구성할 수 있도록 설계.기본 디자인 제공통일된 스타일과 디자인 시스템을 갖추고 있어 일관성 있는 UI를 쉽게 구현.커스터마이징이 가능하지만, 기본 디자인을 많이 사용하게 되는 경향이 있음.테일윈드:유틸리티 클래스 기반 프레임워크클래스 단위로 스타일링을 적용하며, CSS 작성 없이도 세밀한 조정 가능.미리 설계된 컴포넌트가 거의 없고, 유틸리티 클래스를 조합해 디자인을..

aria-hidden 속성의 문제는 주로 접근성(Accessibility) 관점에서 발생합니다. 이 문제는 aria-hidden이 설정된 요소나 그 상위 요소에 포커스된 엘리먼트가 포함된 경우 발생하며, 이는 스크린 리더와 같은 보조 기술 사용자들에게 문제를 일으킬 수 있습니다. 문제의 원인aria-hidden 설정된 요소에 포커스가 이동: aria-hidden="true"가 설정된 요소나 상위 요소에 자식이 포커스를 가지면, 해당 포커스는 보조 기술에서 무시됩니다.aria-hidden과 모달 창의 충돌: 부트스트랩 모달 창은 보통 모달이 열린 상태에서 배경의 접근성을 차단하기 위해 aria-hidden을 사용합니다. 하지만 잘못된 설정으로 모달 내부의 버튼이나 포커스 가능한 요소에 문제가 생길 수 있습..

정확히 어떤 차이가 있는가?부트스트랩에서 , , 의 주요 차이는 row와 d-flex 클래스가 각각 제공하는 역할과 스타일링에 있습니다. 아래에 각각의 차이를 설명합니다: 1.  row: 그리드 시스템에서 사용되며, 내부 요소(주로 col- 클래스를 가진 요소) 사이에 **가로 여백(gutter)**을 적용합니다. display: flex;와 함께 내부 요소를 플렉스 컨테이너로 만듭니다. 가로 여백이 자동으로 추가됩니다. d-flex: 내부 요소를 플렉스 컨테이너로 설정합니다. 추가적으로 플렉스의 다양한 정렬 옵션(justify-content, align-items)을 사용할 수 있습니다. 결합 효과: 그리드의 가로 여백(row)과 플렉스 정렬(d-flex) 기능을 동시에 적용. 주로 그리드 시스템의 레..

부트스트랩(Bootstrap) 5.x 버전에서 제공하는 기본적인 배경 색상(bg-* 클래스)에는 7가지가 있습니다. 이 색상들은 부트스트랩의 색상 유틸리티로 사용할 수 있으며, 배경 색상, 텍스트 색상, 경계선 색상 등 다양한 스타일링에 활용됩니다. 부트스트랩 기본 배경 색상 (bg-* 클래스) bg-primary: 파란색 (#0d6efd) bg-secondary: 회색 (#6c757d) bg-success: 녹색 (#198754) bg-danger: 빨간색 (#dc3545) bg-warning: 노란색 (#ffc107) bg-info: 청록색 (#0dcaf0) bg-dark: 검정색 (#212529) 추가적으로, 다음과 같은 배경 색상도 제공됩니다: bg-light: 연한 회색 (#f8f9fa) bg-..

가장 많이 사용하는 웹 다지인 프레임워크가 무엇일까? Bootstrap은 웹 디자인 및 개발 커뮤니티에서 널리 사용되는 반응형 프레임워크로, 사용자들에게 탄탄하고 아름다운 UI를 제공하기 위해 수년 동안 지속적으로 발전해왔습니다. 2020년 중반, Bootstrap은 그 동안의 경험을 바탕으로 완전히 새로워진 Bootstrap 5를 선보였습니다. 이 버전의 가장 큰 특징 중 하나는 jQuery의 의존성을 완전히 제거하고 Vanila JavaScript를 채택한 것입니다. 1. jQuery 없이 가볍게 Bootstrap 5에서는 이전 버전들과 달리 jQuery를 포함하지 않았습니다. jQuery는 웹 개발 초기에 많은 도움을 주었지만, 현대 웹 표준의 발전과 함께 더 가볍고 효율적인 방법들이 요구되었습니다..

모달창 위에 또다른 모달창을 띄워야 하는 경우는 수없이 많습니다. 프로그래밍을 하다보면... 한번의 창으로 보통은 끝나지 않지요. 뭔가 설정을 할때 창을 띄우고 또다른 선택을 할때 주로 화면에 띄워주는 것이 좋기때문이지요. 이러한 것을 코드로 구현한다면 아래와 같이 하면 좋겠네요. Bootstrap 모달 창 위에 또 다른 모달 창을 띄우는 것은 비추천됩니다. 이것은 사용자 경험을 해치고, 모달 창의 의도를 왜곡시키기 때문입니다. 대신, 모달 창 내에서 새로운 모달 창을 열 수 있도록 설계하는 것이 좋습니다. 이를 위해 다음과 같은 코드를 사용할 수 있습니다. 첫번째 모달 창 × 모달 내용 두번째 모달 창 열기 닫기 두번째 모달 창 × 모달 내용 닫기 이 코드에서는 첫번째 모달 창 안에 두번째 모달 창을 ..

장장... 4시간 이것때문에 해맸는데, 와~ 별의별것 다 했는데, 안되다고 결국 찾음 정보를 저장하고 다시는 이런 오류로 해매지 않기 위해 기록합니다. 주문서 모달창을 만들어 띄운 후 찾을 띄운 후 저장버튼을 누르면 계속 데이터가 2개, 혹은 여러개가 저장되는 되는 현상이 발견되어, ajax 문제인지 모달 문제인지 정말 알기 힘든 상황에서... 이것저것 정말 많이 만져봤네요~ 주문서의 저장버튼을 누르면... 허걱.. 데이터가 중복으로 저장되는 현상.... 결론부터 말하면, onclick 이벤트시 버튼을 잠궜다가, 성공하면 풀어주는 방식으로 해결했습니다. settimeout도 사용해보고, 여러가지 써 봤지만, 안되서... 정말 4시간 이것때문에 고생... ㅠ.ㅠ // 주문서 저장버튼 실행 $("#order..