728x90 HTML6 부트스트랩5 에서 부트스트랩 아이콘 활용하기 부트스트랩 5(Bootstrap 5)는 모던 웹 디자인을 위한 강력한 프레임워크입니다. 이 블로그 포스팅에서는 부트스트랩 아이콘을 활용하여 여러분의 웹 프로젝트에 시각적 요소를 추가하는 방법을 알아보겠습니다.부트스트랩 아이콘이란?부트스트랩 아이콘은 부트스트랩에서 제공하는 SVG 아이콘 세트로서, 다양한 사용자 인터페이스 요소에 사용할 수 있습니다. 웹 애플리케이션이나 사이트에서 버튼, 메뉴, 알림 등 다양한 요소에 시각적 요소를 추가하여 사용자의 주의를 끌고, 사용성을 높이는 데 도움을 줍니다. 이를 부트스트랩 아이콘이라고 부르며, 이러한 아이콘을 통해 웹 페이지를 더욱 매력적으로 만드는 것이 가능합니다.부트스트랩 아이콘 설치하기 부트스트랩 5 아이콘을 사용하는 방법은 두 가지가 있습니다: CDN을 이용.. 2025. 4. 1. HTML Input Validation: 쉬운 방법과 예제 HTML 입력 폼의 유효성 검사는 사용자 경험을 향상시키기 위한 중요한 요소입니다. 본 포스트에서는 HTML5의 내장 유효성 검사 기능을 사용한 간단한 Input Validation 폼 예제를 소개하겠습니다.1. HTML5의 유효성 검사HTML5에서는 input 요소에서 type 속성을 사용하여 다양한 형식의 데이터를 검증할 수 있습니다. 예를 들어, 이메일, URL, 숫자, 날짜 등 다양한 형식을 쉽게 지정할 수 있습니다. 사용자가 잘못된 형식의 데이터를 입력할 경우 브라우저가 기본적으로 경고 메시지를 표시합니다.2. 유효성 검사를 활용한 간단한 예제다음은 간단한 회원 가입 폼의 예제입니다. 이 폼에는 이름, 이메일, 비밀번호, 비밀번호 확인 필드가 포함되어 있습니다. 회원가입 폼 .. 2025. 3. 18. JQuery/JavaScript QR코드 생성 플러그인 QR코드 생성 플러그인 QR코드를 생성할일이 있어 GitHub에 뒤적뒤적 거리다 간편하게 자바스크립트로 QR코드를 제작 할 수 있는 플러그인을 발견 하였습니다. 간편하게 Jquery, Javascript 몇줄으로 QR코드를 빠르고 간편하게 생성 할 수 있도록 작업되어있고, 많은분들이 사용하고 계셨습니다. 해당 플러그인을 제작하신분은 한국에 개발자이신것 같습니다. qrcodejs(github) https://github.com/davidshimjs/qrcodejs by davidshim qrcodejs 사용하기 먼저 작업하고 계시는 프로젝트에 qrcode.js를 다운받아 소스에 포함시키면 됩니다. 해당 소스에 jquery는 필수로 포함되어있어야 하며, qrcode.js 혹은 qrcode.min.js 다운 .. 2018. 10. 24. JSTL <c:forEach> 사용법 JSTL : JSTL의 반복문인 foreach에 대해 사용방법을 포스팅하고자 합니다. foreach는 우선 일반적 프로그래밍언어에서 사용하는 for문과 동일 합니다. 반복문으로 사용이되고 주로 목록을 반복해서 출력할경우 사용합니다. 사용법 12345 Colored by Color Scriptercs 위와 같은 샘플 코드를 기준으로 forEach 문법의 속성을 설명을 드리겠습니다. *var *items varStatus begin end step 사용할 변수 Collection객체(List, ArrayList) 반복 index 변수 시작 index 종료 index 반복시 이동 index #1 : var, items (필수) 우선 필수 속성 값으로는 var, items 입니다. 그외 속성은 무시 하셔도 fo.. 2018. 10. 22. CKEditor5 사용법 (게시판 편집툴) CKEditor 란? CKEditor를 소개합니다. CK에디터는 일반적으로 게시판에 글을쓸때 쉽게 편집을 할 수 있도록 도와주는 툴 입니다. 쉬운 설명을 위해 아래 사진을 참고해주세요. 위와같이 게시판 글을 수정하거나 편집을 원한경우, 텍스트 크기, 문단 나눔, 사진업로드등 기능을 편하게 이용하기위해 사용합니다. CK에디터는 오픈소스 라이브러리 입니다. 하지만 CK에디터가 어느정도 안정이되고 나서부터는 상업적 용도로 사용할때는 일정 비용을 지불하고 사용을 하여야 합니다. CKEditor 공식 홈페이지 : https://ckeditor.com/ckeditor-5/ CKEditor5 사용법? 간단하게 CKEditor5 사용방법에대해 소개 드리려합니다. 가장 최신버전인 CKEditor5를 사용한 샘플 예제입니.. 2018. 10. 4. 블로그 HTML 코드블럭 스크립트 (Color Scripter) 아무래도.. 블로그를 운영하면서 코드와 스크립트등을 예쁘게 보여줄 방법이 필요하였습니다. 그러다 검색하다보니 " Color Scripter " 라는 아주 손쉽게 스크립트를 제공하고 있더라구요. 사용방법을 소개하고자 합니다. 1. 먼저 Color Scripter 사이트에 접속하세요. https://colorscripter.com/ 2. 블로그에 포스팅할 코드/스크립트를 입력합니다. 저 같은 경우는 'SELECT * FROM TEST_TABLE;' 이라고 입력하니, 언어가 자동으로 (SQL)로 감지하여 변경되었습니다. (코드 타입을 알아서 감지하는것 같습니다 ^^) 3. 상단 메뉴를 입맛이 맞게 변경 합니다. 저는 서브라임 블랙을 선택하고 배경은 이중색상(격배경)을 선택하였습니다. 4. 우측 하단에 클립보드.. 2018. 9. 27. 이전 1 다음 728x90
