Mingg's Diary

2023-12-26

Bootstrap 4 그리드 시스템 Bootstrap의 그리드 시스템은 페이지 전체에 최대 12개의 열을 허용한다. 12개 열을 모두 개별적으로 사용하지 않으려면 열을 그룹화하여 더 넓은 열을 만들 수 있다. 스팬 1 스팬 1 스팬 1 스팬 1 스팬 1 스팬 1 스팬 1 스팬 1 스팬 1 스팬 1 스팬 1 스팬 1 스팬 4 스팬 4 스팬 4 스팬 4 스팬 8 스팬 6 스팬 6 스팬 12 Bootstrap의 그리드 시스템은 반응성이 뛰어나며 화면 크기에 따라 열이 다시 정렬된다. 큰 화면에서는…

2023-12-25

Bootstrap – Bootstrap 4 필터

Bootstrap 4 필터 Bootstrap 4에는 필터링을 허용하는 구성 요소가 없다. 그러나 jQuery를 사용하여 요소를 필터링/검색할 수 있다. 테이블 필터링 예제 <script> $(document).ready(function(){ $(“#myInput”).on(“keyup”, function() { var value = $(this).val().toLowerCase(); $(“#myTable tr”).filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); }); }); </script> 필터 목록 목록의 항목에 대해 대소문자를 구분하지 않고 검색을 수행한다. 예제 무엇이든 필터링

2023-12-24

Bootstrap – Bootstrap 4 미디어 객체

Bootstrap 4 미디어 객체 Bootstrap 4는 미디어 객체(예: 이미지 또는 비디오)를 콘텐츠와 함께 정렬하는 쉬운 방법을 제공한다. 미디어 객체는 블로그 댓글, 트윗 등을 표시하는 데 자주 사용된다. 기본 미디어 객체 미디어 객체를 생성하려면 .media 클래스를 컨테이너 요소에 추가하고 .media-body 클래스가 있는 하위 컨테이너 내에 미디어 콘텐츠를 배치한다. 간격 유틸리티를 사용하여 필요에 따라 패딩과 여백을 추가한다. 예제 <div class=”media border p-3″> <img src=”img_avatar3.png” alt=”John Doe” class=”mr-3 mt-3 rounded-circle” style=”width:60px;”> <div class=”media-body”> <h4>John Doe <small><i>Posted on February 19, 2016</i></small></h4> <p>Lorem ipsum…</p> </div>…

2023-12-23

Bootstrap – Bootstrap 4 아이콘

Bootstrap 4 아이콘 Bootstrap 4에는 자체 아이콘 라이브러리가 없다. Bootstrap 3의 Glyphicon은 BS4에서 지원되지 않는다. 그러나 Font Awesome 및 Google Material Design Icons와 같이 선택할 수 있는 무료 아이콘 라이브러리가 많이 있다. 라이브러리 추가 Font Awesome 아이콘을 사용하려면 HTML 페이지에 다음을 추가한다. 다운로드나 설치가 필요하지 않다. 예제 <link rel=”stylesheet” href=”https://use.fontawesome.com/releases/v5.7.0/css/all.css” integrity=”sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ” crossorigin=”anonymous”> 라이브러리 사용 아이콘 클래스의 이름을 인라인 HTML 요소(예: 또는 )에 추가한다. 예제 <i class=”fas fa-cloud”></i> <i class=”fas fa-coffee”></i> <i class=”fas fa-car”></i> <i class=”fas fa-file”></i> <i class=”fas fa-bars”></i> ⭐…

2023-12-22

Bootstrap – Bootstrap 4 플렉스

Bootstrap 4 플렉스 플렉스 클래스를 사용하여 Bootstrap 4 구성 요소의 레이아웃을 제어한다. 플렉스박스 Bootstrap 3과 Bootstrap 4의 가장 큰 차이점은 Bootstrap 4가 이제 레이아웃을 처리하기 위해 float 대신 flexbox를 사용한다는 것이다. 유연한 상자 레이아웃 모듈을 사용하면 부동 또는 위치 지정을 사용하지 않고도 유연한 반응형 레이아웃 구조를 쉽게 디자인할 수 있다. 예제 1 Flexbox 컨테이너를 만들고 직계 자식 항목을 Flex 항목으로 변환하려면 다음 d-flex클래스를 사용한다. <div class=”d-flex p-3 bg-secondary text-white”> <div class=”p-2 bg-info”>Flex item 1</div> <div class=”p-2 bg-warning”>Flex item 2</div> <div…

2023-12-21

Bootstrap – Bootstrap 4 유틸리티

Bootstrap 4 유틸리티 Bootstrap 4에는 CSS 코드를 사용하지 않고도 요소의 스타일을 빠르게 지정할 수 있는 많은 유틸리티/도우미 클래스가 있다. 테두리 border 클래스를 사용하여 요소에서 테두리를 추가하거나 제거한다. 예제 <span class=”border”></span> <span class=”border border-0″></span> <span class=”border border-top-0″></span> <span class=”border border-right-0″></span> <span class=”border border-bottom-0″></span> <span class=”border border-left-0″></span> 테두리 색상 상황별 테두리 색상 클래스를 사용하여 테두리에 색상을 추가한다. 예제 <span class=”border border-primary”></span> <span class=”border border-secondary”></span> <span class=”border border-success”></span> <span class=”border border-danger”></span> <span class=”border border-warning”></span> <span class=”border border-info”></span> <span class=”border border-light”></span> <span class=”border border-dark”></span>…

2023-12-20

Bootstrap – Bootstrap 4 Scrollspy

Bootstrap 4 Scrollspy Scrollspy는 스크롤 위치 에 따라 탐색 목록의 링크를 자동으로 업데이트하는 데 사용된다. Scrollspy를 만드는 방법 예제 <!– The scrollable area –> <body data-spy=”scroll” data-target=”.navbar” data-offset=”50″> <!– The navbar – The <a> elements are used to jump to a section in the scrollable area –> <nav class=”navbar navbar-expand-sm bg-dark navbar-dark fixed-top”> … <ul class=”navbar-nav”> <li><a href=”#section1″>Section 1</a></li> … </nav> <!– Section 1 –> <div id=”section1″> <h1>Section 1</h1> <p>Try to scroll this page and look at the navigation bar…

2023-12-19

Bootstrap – Bootstrap 4 토스트

Bootstrap 4 토스트 토스트 구성 요소는 어떤 일이 발생했을 때(예: 사용자가 버튼을 클릭하거나 양식을 제출할 때 등) 몇 초 동안만 표시되는 경고 상자와 같다. 토스트를 만드는 방법 토스트를 만들려면 .toast 클래스를 사용 하고 .toast 클래스 내부에 .toast-header 와 .toast-body를 추가한다. 예제 <div class=”toast”> <div class=”toast-header”> Toast Header </div> <div class=”toast-body”> Some text inside the toast body </div> </div> <script> $(document).ready(function(){ $(‘.toast’).toast(‘show’); }); </script> 토스트 표시 및 숨기기 토스트는 기본적으로 숨겨져 있다. data-autohide=”false” 속성을 사용하여 표시한다. 닫으려면 요소를 사용하고 data-dismiss=”toast” 속성을…

2023-12-18

Bootstrap – Bootstrap 4 팝오버

Bootstrap 4 팝오버 팝오버 구성 요소는 툴팁과 유사하다. 사용자가 요소를 클릭할 때 나타나는 팝업 상자다. 차이점은 팝오버에 훨씬 더 많은 콘텐츠가 포함될 수 있다는 것이다. 팝오버를 만드는 방법 팝오버를 만들려면 data-toggle=”popover” 요소에 속성을 추가한다. title 속성을 사용하여 팝오버의 헤더 텍스트를 지정하고, data-content 속성을 사용하여 팝오버 본문 내부에 표시되어야 하는 텍스트를 지정한다. 예제 <a href=”#” data-toggle=”popover” title=”Popover Header” data-content=”Some content inside the popover”>Toggle popover</a> <script> $(document).ready(function(){ $(‘[data-toggle=”popover”]’).popover(); }); </script> 팝오버 위치 지정 기본적으로 팝오버는 요소의 오른쪽에 나타난다. data-placement 속성을 사용하여 요소의…

2023-12-17

Bootstrap – Bootstrap 4 툴팁

Bootstrap 4 툴팁 툴팁은 사용자가 요소 위로 마우스 포인터를 이동할 때 나타나는 작은 팝업 상자다. 툴팁 만드는 방법 툴팁을 생성하려면 data-toggle=”tooltip” 요소에 속성을 추가한다. title 속성을 사용하여 툴팁 내부에 표시되어야 하는 텍스트를 지정한다. 예제 <a href=”#” data-toggle=”tooltip” title=”Hooray!”>Hover over me</a> 툴팁은 jQuery를 사용하여 초기화해야 한다. 지정된 요소를 선택하고 tooltip() 메서드를 호출한다. <script> $(document).ready(function(){ $(‘[data-toggle=”tooltip”]’).tooltip(); }); </script> 위치 지정 툴팁 기본적으로 도구 설명은 요소 위에 표시된다. data-placement 속성을 사용하여 요소의 상단, 하단, 왼쪽 또는 오른쪽에 도구 설명 위치를 설정한다. 예제 <a…