Mingg's Diary

2023-12-23

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…

2023-12-16

Bootstrap – Bootstrap 4 모달

Bootstrap 4 모달 모달 구성 요소는 현재 페이지 상단에 표시되는 대화 상자/팝업 창이다. 모달을 만드는 방법 예제 <!– Button to Open the Modal –> <button type=”button” class=”btn btn-primary” data-toggle=”modal” data-target=”#myModal”> Open modal </button> <!– The Modal –> <div class=”modal” id=”myModal”> <div class=”modal-dialog”> <div class=”modal-content”> <!– Modal Header –> <div class=”modal-header”> <h4 class=”modal-title”>Modal Heading</h4> <button type=”button” class=”close” data-dismiss=”modal”>×</button> </div> <!– Modal body –> <div class=”modal-body”> Modal body.. </div> <!– Modal footer –> <div class=”modal-footer”> <button type=”button” class=”btn btn-danger” data-dismiss=”modal”>Close</button> </div> </div>…

2023-12-15

Bootstrap – Bootstrap 4 캐러셀

Bootstrap 4 캐러셀 캐러셀(회전식 슬라이드쇼)은 요소를 순환하는 슬라이드쇼다.

2023-12-14

Bootstrap – Bootstrap 4 사용자 정의 양식

Bootstrap 4 사용자 정의 양식 Bootstrap 4는 브라우저 기본값을 대체하기 위한 사용자 정의된 양식 요소와 함께 제공된다. 맞춤 체크박스 사용자 정의 체크박스를 생성하려면 <div>와 같은 컨테이너 요소를 체크박스와 그 주위로 래핑한다. ⭐ 동반 텍스트에 레이블을 사용하는 경우 해당 텍스트에 .custom-control-label 클래스를 추가한다. for 속성의 값은 체크박스의 ID와 일치해야 한다. 예제 <form> <div class=”custom-control custom-checkbox”> <input type=”checkbox” class=”custom-control-input” id=”customCheck” name=”example1″> <label class=”custom-control-label” for=”customCheck”>Check this custom checkbox</label> </div> </form> 맞춤형 스위치 예제 <form> <div class=”custom-control custom-switch”> <input type=”checkbox” class=”custom-control-input” id=”switch1″> <label class=”custom-control-label”…