본문 바로가기

프로그래밍245

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.
ChatGPT 탈옥(?)하기 이 번 포스팅에서는 ChatGPT 탈옥(?)하는 방법에 대해서 알려드리겠습니다. 이 방법은 미국 유명 커뮤니티 채널인 Reddit에 공개가 되면서, 많은 사람들의 관심을 받고, 그 방법이 Github에서 관리가 되면서 알려지게 되었습니다. 지금도 Github에서 관리가 되고 있으며, ChatGPT-4 버전에도 실행됨을 알려드립니다. 이것이 실제로 동작을 하는 것인지에 대한 놀란이 있는데요. 이것은 전적으로 여러분들의 판단에 맡기겠습니다. 아래는 ChatGPT 탈옥이 진짜냐? 아니냐에 대한 동영상 내용이니 참고하시고, 판단하시기 바랍니다. 동영상1: Is ChatGPT "DAN" Real? Gonna find out [Part 1] 동영상2: Part 2: I thought ChatGPT DAN was a.. 2023. 3. 21.
Javascript URL 클래스 간단 사용법 JavaScript의 URL 클래스는 URL 주소를 파싱하고 조작할 수 있는 객체를 제공합니다. 아래의 간단한 사용법을 예제를 통해서 설명을 드리겠습니다. 예제1 1. 주소 파싱 URL 클래스는 주어진 URL 문자열을 파싱하여 다양한 요소로 분리하여 제공합니다. 예를 들어, 호스트 이름, 프로토콜, 포트 번호, 경로 등을 추출할 수 있습니다. const url = new URL('https://www.example.com/path/to/resource?query=value'); console.log(url.protocol); // "https:" console.log(url.host); // "www.example.com" console.log(url.pathname); // "/path/to/resou.. 2023. 3. 20.
TCP, UDP 기본 개념과 동작 원리 네트워크의 OSI 7 Layer에서 전송계층(Transport Layer)에 속하는 TCP와 UDP에 대해서 알아보겠습니다. 이 두 프로토콜은 인터넷상에서 데이터를 주고받는 데 있어 핵심적인 역할을 하며, 서로 다른 특징과 동작 원리를 가지고 있습니다. 이 글에서는 TCP와 UDP의 기본 개념과 동작 원리를 살펴보겠습니다. 네트워크 OSI 7 Layer, 5 Layer 기본 개념과 흐름도 네트워크 7 Layer는 OSI(Open Systems Interconnection) 모델로도 알려져 있으며, 컴퓨터 네트워크에서 통신이 일어나는 과정을 7개의 계층으로 분류하여 설명하는 모델입니다. 아래에서 각 계층에 대해 자 ccusean.tistory.com TCP (Transmission Control Proto.. 2023. 3. 20.
반응형

티스토리툴바