728x90 프로그래밍 팁/HTML8 HTML body 태그안에 의미있는 영역을 설정하는 태그들 웹페이지에서 영역을 설정하는 혹은 layout을 구성하기 위해서 사용하는 태그들에 대해서 알아보겠습니다. 단순하게 div태그로 모두 해결을 할 수 있지만, 아래에 의미 있는(semantic) 태그들을 사용함으로써, 브라우저가 더 빨리 해석하고, SEO(Search Engine Optimization: 검색 최적화)에 적합한 태그를 구성함으로써, 검색에 좀 더 잘 노출될 수 있도록 할 수 있습니다. 기본 Layout HTML권고 사항에 따른 body태그 안의 기본 Layout 구성은 아래와 같습니다. header는 우리말로 머리말, footer는 꼬리말이라고 생각하시면 될 것 같습니다. main에는 이 페이지의 주요 내용이 들어갑니다. header에는 보통 로고와 이 페이지에 들어있는 핵심 콘텐츠를 나열한.. 2022. 9. 22. 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의 화면은 아래와 같습니다. 방법1: superbuild 버전 사용 CKEditor에서 제공하는 superbuild 버전을 이용하는 방법입니다. 아래의 소스와 같이 적용하면 됩니다. 단, 프리미엄 플러그인 사용기간이 있기 때문에 "removePlugins: [ ... ]"항목에 추가해서 제거해 줍니다. 아래의 사이트에서 미리 사용해 볼 수 있습니다. CKEditor with all free plugins - 꾸션(ccusean) Just test CKEditor with all free plugins. ccusean.com 방법2: Onlin.. 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 핵심 코드 2020. 11. 5. HTML - HTML5 기본양식 머리말 본문 2016. 2. 18. 이전 1 다음 728x90
