본문 바로가기

분류 전체보기290

데이터 압축의 기본 원리 데이터 압축은 용량을 줄이고 속도를 높이는 기술입니다. 이 글에서는 데이터 압축의 원리를 알아보고, 그 종류와 사용 사례에 대해 설명합니다. 데이터 압축이란? 데이터 압축은 정보를 더 작은 용량으로 표현하거나 전송하는 과정입니다. 이 기술은 저장 공간을 절약하고, 데이터 전송 속도를 향상시키며, 통신 비용을 줄이는 데 도움이 됩니다. 데이터 압축의 원리를 이해하려면, 압축 방법에 대해 알아야 합니다. 크게 두 가지 압축 방법이 있습니다: 손실 압축과 비손실 압축. 비손실 압축 비손실 압축은 원본 데이터를 완벽하게 복원할 수 있는 압축 방식입니다. 주로 텍스트, 문서, 코드 등의 데이터에 사용되며, 원본 데이터의 정확성이 중요한 경우에 적합합니다. 비손실 압축의 대표적인 알고리즘으로는 허프만 코딩, 런-렝.. 2023. 3. 23.
Bootstrap v5에서 Modal창 드래그하기 Bootstrap v5에서 모달창의 헤더를 마우스로 클릭 후 드래그 해서 움직이게 하는 방법에 대해서 포스팅 진행하겠습니다. BS5에서는 jQuery를 다 들어냈으므로, 순수 자바스크립트로 구현하는 방법으로 진행해 보겠습니다. jQuery로 구현하는 방법은 아래의 링크를 참고하시기 바랍니다. Bootstrap 모달창 드래그 Bootstrap 모달창을 드래그가 가능하게 해달라는 요구가 간혹 있습니다. jquery ui를 사용하여 modal-dailog에 draggalbe 이벤트를 걸어주면 됩니다. 아래는 stackoverflow 참고 사이트 주소입니다. 참고 자료: s ccusean.tistory.com HTML 소스 수정 아래는 BS5의 버튼을 눌러서 모달창을 띄우는 기본 소스입니다. 여기에 모달창을 드.. 2023. 3. 23.
Bootstrap v5에서 Javascript로 모달창 보이기/숨기기 Bootstrap v4에서 v5로 넘어가면서 가장 큰 변화는 자바스크립트의 변화입니다. v4에서는 jQuery가 베이스였지만, v5에서는 순수 자바스크립트(Vanilla Javascript)가 기본 베이스로 바뀌게 되었습니다. 그러면서, 기존에 동작제어 방식이 많이 변경되었습니다. 그 중에서 이 번 포스팅에서는 Modal창을 v5버전에서 순수 자바스크립트로 제어하는 방법에 대해서 알아 보겠습니다. Bootstrap v5의 Modal 기본 다음은 v5의 Modal창의 기본 소스입니다. 버튼을 클릭하면 모달창이 보여지고, "X", "닫기" 혹은 "모달창 밖"을 클릭하면 모달창이 닫히는 기본 소스입니다. Launch demo modal Modal title ... Close Save changes 위와 같이 .. 2023. 3. 23.
리스트 항목 Drag & Drop으로 재정렬하기 리스트 형태로 구현되어 있는 HTML 문서의 항목을 사용자의 Drag & Drop 동작으로 재정렬하는 방법에 대해서 설명 드리겠습니다. 자료에 대한 출처는 제일 아래 하단에 있으니 참고하시기 바랍니다. 실습해보기 아래는 실제로 구현한 내용을 실습해 볼 수 있는 화면입니다. Drag & Drop의 동작으로 실제로 어떻게 동작하는지 확인 해 보세요. 아래의 출처와는 다른 세로로 정렬된 리스트 항목으로 구성하였습니다. 미리 맛 보기: HTML 삽입 미리보기할 수 없는 소스 위 예제의 전체 소스는 아래와 같습니다. HTML 소스 A B C CSS 소스 .container-list { /* display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; */ }.. 2023. 3. 23.
DNS 기초: 인터넷 주소록의 이해 인터넷이 점점 더 복잡하고 방대해지고 있지만, 사용자가 웹 사이트에 접속하는 과정은 비교적 간단한 프로세스를 통해 이루어진다. 그 중심에 있는 것은 도메인 네임 시스템(DNS)이라는 기술이다. 이번 포스트에서는 DNS의 개념과 동작 원리를 간단히 살펴보고, 그 중요성과 관련된 이슈들에 대해서도 알아볼 것이다. DNS란 무엇인가? 도메인 네임 시스템(DNS)은 인터넷에서 웹 사이트와 컴퓨터에 연결된 IP 주소를 서로 연결시켜주는 시스템이다. 간단히 말해, DNS는 인터넷의 주소록이라 할 수 있다. 사람들이 기억하기 쉬운 도메인 이름(예: www.example.com)을 입력하면, DNS는 해당 도메인 이름과 연결된 IP 주소로 변환해준다. 그 결과, 웹 브라우저는 해당 IP 주소의 웹 서버와 통신할 수 있.. 2023. 3. 23.
웹페이지에 CODEPEN 소스 붙여넣기 인터넷 혹은 코딩관련 커뮤니티 사이트에서 웹문서(HTML, CSS, Javascript)의 소스에 대한 답변으로 codepen을 웹페이지에 붙여넣는 경우가 있는데, 이 번 포스팅에서는 이 방법에 대해서 알아보겠습니다. CODEPEN 홈페이지인 아래의 사이트에 접속합니다. CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io ※ 공개할 소스를 제공하기 위해서는 가입이 필요합니다. 구글 계정으로 쉽게 가입이 가능하니, 여기서는 가입절.. 2023. 3. 21.
반응형

티스토리툴바