SMART GPT43 cURL을 사용하여 리다이렉트를 따라가 최종 URL 가져오기 1. cURL을 사용하여 리다이렉트를 따라가 최종 URL 가져오기2. 최종 URL에서 m3u8 파일 읽기 위의 두 스크립트를 하나로 통합하면 다음과 같습니다.이 코드를 실행하면 최종 URL을 가져와 해당 m3u8 파일의 내용을 읽고, 이를 kbsndrama.m3u8.txt라는 파일로 저장하게 됩니다. 2024. 8. 23. display: flex를 사용하여 요소를 가로세로 가운데 정렬하는 방법 display: flex를 사용하여 요소를 가로세로 가운데 정렬하는 방법은 매우 간단합니다. flex 속성은 부모 요소에 설정되고, 자식 요소는 자동으로 정렬됩니다. 여기서는 justify-content와 align-items를 활용하여 중앙 정렬을 설정하는 방법을 설명하겠습니다.다음은 HTML과 CSS 예제입니다. Centered Content 설명.container: display: flex;를 사용하여 내부의 자식 요소들이 유연한 레이아웃을 가질 수 있도록 합니다. justify-content: center;와 align-items: center; 속성을 추가하여 수평 및 수직으로 자식 요소가 가운데에 위치하도록 설정합니다.height: 100vh;: 컨테이너의 높이를 뷰포.. 2024. 8. 7. grid-template-columns CSS grid-template-columns: repeat(6, 1fr);는 CSS Grid를 사용하여 6개의 열을 동일한 너비로 설정하는 속성입니다. 하지만 각 열의 너비를 텍스트의 길이에 맞추려면 repeat와 1fr 대신 auto를 사용할 수 있습니다.각 열의 너비를 텍스트 길이에 맞추는 방법은 아래와 같습니다..container { display: grid; grid-template-columns: repeat(6, auto); gap: 10px; /* 열 사이에 간격을 두고 싶을 때 사용 */}위의 코드를 사용하면 각 열의 너비는 해당 열에 있는 텍스트 또는 콘텐츠의 크기에 따라 자동으로 조절됩니다. 이렇게 하면 각 열의 너비가 동일하지 않고, 각 열에 포함된 내용에 따라 다르게 설정됩니다.또한.. 2024. 8. 7. 리스트 항목 간에 특정한 여백을 설정하려면? 리스트 항목 간에 특정한 여백을 설정하려면, 두 가지 방법이 있습니다. 하나는 CSS :not() 선택자를 사용하는 방법이고, 다른 하나는 nth-child를 사용하는 방법입니다. 아래에서 두 가지 방법을 소개하겠습니다.방법 1: :not() 선택자를 사용하는 방법이 방법은 모든 li 요소에 기본 여백을 설정한 다음, 첫 번째 항목에는 여백을 제거하는 방법입니다. 항목 1 항목 2 항목 3 항목 4 방법 2: nth-child를 사용하는 방법이 방법은 nth-child를 사용하여 모든 항목의 오른쪽에 여백을 주되, 마지막 항목에만 여백을 주지 않는 방법입니다. 항목 1 항목 2 항목 3 .. 2024. 8. 6. PHP 5.x 버전에서 실행 가능한 10진수와 16진수 간의 변환을 수행하는 코드를 포함한 전체 웹 페이지 소스코드 아래는 PHP 5.x 버전에서 실행 가능한 10진수와 16진수 간의 변환을 수행하는 코드를 포함한 전체 웹 페이지 소스코드입니다. 이 코드는 간단한 HTML 폼과 CSS로 디자인되어 있으며, 입력된 10진수 숫자를 16진수로 변환하거나, 입력된 16진수 숫자를 10진수로 변환할 수 있습니다. 10진수 16진수 변환기 "> 16진수"> "> 10진수"> 코드 설명HTML 부분:두 개의 입력 필드와 버튼이 있는 간단한 폼을 만듭니다.첫 번째 입력 필드는 10진수 입력을 받아 16진수로 변환하고, 두 번째 입력 필드는 16진수 입력을 받아 10진수로 변환합니다.사용자가 값을 입력하면 입력된 값이.. 2024. 8. 6. getElementsByClassName 사용하기 클래스 선택자를 사용하려면 getElementsByClassName이나 querySelectorAll 메서드를 사용할 수 있습니다. 각 방법에 대해 설명하겠습니다.getElementsByClassName 사용하기getElementsByClassName 메서드는 주어진 클래스 이름을 가진 요소들의 라이브 HTMLCollection을 반환합니다. 따라서 이 메서드를 사용하면 해당 클래스의 모든 요소에 스타일을 적용하려면 컬렉션을 반복해야 합니다.// 'customModal'이 클래스 이름인 경우var elements = document.getElementsByClassName('customModal');for (var i = 0; i querySelectorAll 사용하기querySelectorAll 메서드.. 2024. 8. 6. 텍스트에 직접 그라데이션 색상을 적용하려면? CSS에서는 background-image 속성을 사용하여 그라데이션을 적용할 수 있지만, 텍스트에 직접 그라데이션 색상을 적용하려면 약간의 추가 작업이 필요합니다. 이를 위해 background-clip 속성과 text-fill-color 속성을 활용할 수 있습니다. 아래는 텍스트에 그라데이션을 적용하는 방법에 대한 예시입니다. CSS 예제.reg_gradient {font-size: 1em;background: linear-gradient(45deg, rgba(255,255,255, 0.5), rgba(0,255,255, 0.5));-webkit-background-clip: text;-webkit-text-fill-color: transparent;text-shadow: 1px 1px 1px rgb.. 2024. 7. 27. 일반적으로 사용되는 해상도별 미디어 쿼리 예시 기본 미디어 쿼리 예시/* 스마트폰 세로 모드 */@media (max-width: 599px) { /* 스마트폰에 적용될 CSS */}/* 스마트폰 가로 모드 */@media (min-width: 600px) and (max-width: 899px) { /* 가로 모드 스마트폰에 적용될 CSS */}/* 태블릿 세로 모드 */@media (min-width: 900px) and (max-width: 1199px) { /* 태블릿 세로 모드에 적용될 CSS */}/* 태블릿 가로 모드 */@media (min-width: 1200px) and (max-width: 1599px) { /* 태블릿 가로 모드에 적용될 CSS */}/* 작은 데스크탑 */@media (min-width: .. 2024. 5. 19. 정규표현식 한글 특수문자 숫자 영문 분리(문자와 숫자를 제외한 모든 문자 제거) 특수문자를 제거하는 정규식은 다양하게 작성할 수 있지만, 일반적으로는 다음과 같은 정규식을 사용할 수 있습니다. $pattern = '/[^\p{L}\p{N}]/u'; $replacement = ''; $result = preg_replace($pattern, $replacement, $yourString); 이 정규식은 유니코드 문자 클래스를 사용하여 문자와 숫자를 제외한 모든 문자를 제거합니다. \p{L}는 유니코드 문자 클래스로써 모든 문자를 의미하고, \p{N}는 숫자를 의미합니다. u 플래그는 UTF-8 인코딩을 지원합니다. $yourString에는 제거하고자 하는 특수문자가 포함된 문자열을 넣어주시면 됩니다. 2024. 2. 3. 동영상의 실제 크기를 비디오 엘리먼트의 width와 height에 적용 JavaScript를 사용하여 동영상의 실제 가로세로 크기를 가져와서 엘리먼트의 속성에 할당할 수 있습니다. 다음은 해당 예제 코드입니다. Your browser does not support the video tag. 이 코드에서는 loadedmetadata 이벤트에서 비디오의 가로세로 크기를 가져와서, 그 값을 비디오 엘리먼트의 width와 height 속성에 할당하여 동영상의 실제 크기로 설정하고 있습니다. 비디오의 가로 크기를 500px로 고정하고 세로 크기를 비율에 따라 지정하는 방법 Your browser does not support the video tag. 이 코드에서는 loadedmetadata 이벤트에서 가로 크기를 500px로 고정하고, 비율을 계산하여 세로 크기를 설정하고 있습니다.. 2023. 12. 18. 이미지, 동영상, 텍스트 가로 세로 사이즈 구하기 이미지를 서버로 읽어들이지 않고 클라이언트 측에서 이미지의 크기를 확인하려면 JavaScript를 사용하여 클라이언트 측에서 이미지 객체를 생성하고 크기를 확인하는 방법이 있습니다. 이 방법은 이미지를 브라우저에서 렌더링할 때만 사용할 수 있으며, 이미지 파일 자체를 서버로 전송하지 않습니다. 예를 들어, JavaScript를 사용하여 이미지 객체를 생성하고 크기를 얻는 코드는 다음과 같을 수 있습니다. var img = new Image(); img.onload = function() { var width = this.width; var height = this.height; console.log("가로 크기: " + width + " 픽셀, 세로 크기: " + height + " 픽셀"); }; im.. 2023. 12. 16. JavaScript 원하는 자릿수의 랜덤 숫자를 생성하는 함수 JavaScript에서 랜덤한 자릿수를 생성하려면 다음과 같이 할 수 있습니다. // 원하는 자릿수의 랜덤 숫자를 생성하는 함수 function generateRandomNumber(digits) { const min = Math.pow(10, digits - 1); const max = Math.pow(10, digits) - 1; return Math.floor(Math.random() * (max - min + 1) + min); } const digits = 10; // 원하는 자릿수 입력 const randomNum = generateRandomNumber(digits); const a = { src: `./video/upload/v${randomNum}.mp3`, crossorigin: "an.. 2023. 10. 13. mix-blend-mode 블렌딩 모드를 설정하는 속성 mix-blend-mode는 CSS의 블렌딩 모드를 설정하는 속성으로, 두 개의 요소(일반적으로 요소와 해당 요소의 배경)를 섞는 데 사용됩니다. 이것은 주로 텍스트, 이미지 또는 요소 간의 블렌딩 및 합성 효과를 조절할 때 유용합니다. 다음은 각 mix-blend-mode 값에 대한 설명입니다. /* Keyword values */ mix-blend-mode: normal; 기본 값으로, 아무런 블렌딩 효과를 가하지 않습니다. mix-blend-mode: multiply; 두 색상을 곱하여 어두운 결과를 생성합니다. 검은 배경에서는 영향이 없습니다. mix-blend-mode: screen; 두 색상을 반전하고 곱하여 밝은 결과를 생성합니다. 검은 배경에서는 원래 이미지를 유지합니다. mix-blend.. 2023. 10. 6. 모바일 웹 애플리케이션에서 confirm() 및 alert() 창 대신 간단한 커스텀 모달 창 JavaScript를 사용하여 모바일 환경에 맞는 커스텀 모달 대화 상자를 구현하는 예제입니다. HTML: 모달 열기 × 이것은 커스텀 모달 대화 상자입니다. 닫기 CSS (styles.css): .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); } .modal-content { background-color: white; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px; border-radius: 5px; box-shadow:.. 2023. 10. 5. div 요소의 가로폭을 텍스트 내용의 길이에 따라 추출 예제 에서는 JavaScript를 사용하여 이 작업을 수행하는 간단한 코드를 보여줍니다. 여기에 텍스트 위 코드에서는 getBoundingClientRect().width 메서드를 사용하여 요소의 가로폭을 추출합니다. 이렇게 하면 텍스트 내용의 길이에 따른 가로폭을 픽셀 단위로 얻을 수 있습니다. 코드를 실행하면 브라우저 콘솔에 가로폭이 출력됩니다. 결과값 : 103.625px 가로폭이 103.625px와 같이 소수점을 포함하는 경우, JavaScript를 사용하여 해당 값을 처리하려면 일반적으로 다음과 같이 소수점 자릿수를 제한하거나 반올림하는 등의 작업을 수행할 수 있습니다. 1, 소수점 자릿수 제한: 소수점 자릿수를 제한하여 특정 자릿수까지만 표시하는 경우입니다. const width = 103.6.. 2023. 10. 1. 이전 1 2 3 다음 반응형
