본문 바로가기

프로그래밍/HTML19

HTML svg에 색상 지정하기 HTML에서 svg에 색상을 지정하는 방법입니다. style="fill: blue;" 형태로 style어트리뷰트를 추가하면 됩니다. 2022. 8. 12.
HTML DOM 이란? HTML DOM에서 DOM은 Document Object Model의 약자로 "문서 객체 모델"이란 뜻이다. HTML 문서를 작성하는 작성자와 이를 해석해서 표현하는 브러우저간의 인터페이스 정의라고 할 수 있다. HTML DOM은 아래와 같은 특성을 가진다. HTML은 하나의 문서다. 객체(Object 혹은 element)는 문서를 표현하는 하나의 단위이다. (...) 객체들은 트리형의 구조를 가진다. (부모, 자식 혹은 형제의 관계를 가진다.) 2022. 7. 12.
CKEditor 5 플러그인 설치 방법 CKEditor 5 플러그인 설치방법 두 가지를 설명드립니다. superbuild 버전 사용법 Online builder 사용법 플러그인이 적용된 CKEditor 5의 화면은 아래와 같습니다. 2022. 2. 1.
html 입력 자동 완성 datalist 활용 html의 datalist 태그를 사용하면, 사용자의 입력을 자동완성시켜주는 기능을 쉽게 구현할 수 있어서 이를 소개해 드립니다. javascript로 어렵게 구현하던 기능을 datalist로 쉽게 구현이 가능하게 해 줍니다. 사용방법 예시 선호하는 웹브라우저를 선택하세요. 아래와 같이 문자 'e'를 입력한 경우, 해당 문자를 포함하지 않은 'Safari'를 제외한 항목만 보여지며, 사용자의 입력이 정확히 입력 되도록 유도 됩니다. 2022. 1. 31.
CKEditor 5 사용법 홈페이지에서 글 편집기로 가장 많이 이용되고 있는 CKEditor 5를 사용하는 간단한 방법에 대해서 알아 보겠습니다. 흔히, WYSIWYG(What You See Is What You Get)형태의 HTML Rich Text Editor로 유명한 편집기들이 많이 있습니다. 과거 거의 독보적인 1등을 달리던 Summernote도 있으나, CKEditor 5가 무서운 기세로 평점과 인기를 올리고 있습니다. 다른 좋은 편집기도 있으니, 검색해보고 구미에 맞는 편집기를 사용하면 되겠습니다. 간단히 3가지 편집기에 대해 알아 보겠습니다. CKEditor: Summernote와 많이 비교가 되며, 무서운 기세로 인기와 평점을 올리고 있는 편집기 Summernote: 과거 독보적인 1등 편집기 Tinymce: 티스.. 2022. 1. 25.
Bootstrap 모달창 드래그 Bootstrap 모달창을 드래그가 가능하게 해달라는 요구가 간혹 있습니다. jquery ui를 사용하여 modal-dailog에 draggalbe 이벤트를 걸어주면 됩니다. 아래는 stackoverflow 참고 사이트 주소입니다. 참고 자료: stackoverflow.com/questions/46192427/how-to-do-draggable-bootstrap-modal 핵심 코드 Bootstrap Modal 창 드래그하는 3가지 방법 (Javascript, jQuery, jQuery UI) Bootstrap Modal 창의 헤드를 클릭 드래그해서 움직이게 하는 3가지 방법에 대해서 알려 드립니다. Bootstrap의 Modal에 기본적으로 들어 있지 않은 기능으로 따로 구현해야 하는 기능이기 때문에 .. 2020. 11. 5.
반응형