<![CDATA[
<p><span data-ke-size="size18"><b><span style="font-family: 'Noto Serif KR';">HTML, CSS 및 자바스크립트</span></b></span><br><span data-ke-size="size18"><b><span style="font-family: 'Noto Serif KR';">옵션 열기 </span></b></span><br><span data-ke-size="size18"><b><span style="font-family: 'Noto Serif KR';">이 튜토리얼에서는 JavaScript를 사용하여 인터넷 속도 테스트를 코딩하는 방법을 배웁니다. 이 비디오에서는 unsplash API에서 이미지를 다운로드하고 크기에 따라 이미지 다운로드 시간을 계산하여 인터넷 속도를 감지합니다. & </span></b></span><span data-ke-size="size18"><b><span style="font-family: 'Noto Serif KR';">영상 내용 :</span></b></span></p><p><br><!DOCTYPE html> <br><html lang="en"> <br><br><head> <br>    <meta charset="UTF-8"> <br>    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <br>    <link rel="stylesheet" href="style.css"> <br>    <title>Day #40 - Detect Internet Speed | AsmrProg</title> <br>    <style>  <br>    let startTime, endTime; <br>let imageSize = ""; <br>let image = new Image(); <br>let bitSpeed = document.getElementById("bits"), <br>    kbSpeed = document.getElementById("kbs"), <br>    mbSpeed = document.getElementById("mbs"), <br>    info = document.getElementById("info"); <br><br>let totalBitSpeed = 0; <br>let totalKbSpeed = 0; <br>let totalMbSpeed = 0; <br>let numTests = 1; <br>let testCompleted = 0; <br><br>// Get random image from unsplash.com <br>let imageApi = "<a href="https://source.unsplash.com/random?topic=nature" target="_blank" class="ke-link">https://source.unsplash.com/random?topic=nature</a>"; <br><br>// When image loads <br>image.xxxxonload = async function () { <br>    endTime = new Date().getTime(); <br><br>    // Get image size <br>    await fetch(imageApi).then((response) => { <br>        imageSize = response.headers.get("content-length"); <br>        calculateSpeed(); <br>    }); <br>}; <br><br>// Function to calculate speed <br>function calculateSpeed() { <br>    // Time taken in seconds <br>    let timeDuration = (endTime - startTime) / 1000; <br>    // Total bits <br>    let loadedBits = imageSize * 8; <br>    let speedInBts = loadedBits / timeDuration; <br>    let speedInKbs = speedInBts / 1024; <br>    let speedInMbs = speedInKbs / 1024; <br><br>    totalBitSpeed += speedInBts; <br>    totalKbSpeed += speedInKbs; <br>    totalMbSpeed += speedInMbs; <br><br>    testCompleted++; <br><br>    // If all tests completed (we get 5 image then calculate average) <br>    if (testCompleted === numTests) { <br>        let averageSpeedInBps = (totalBitSpeed / numTests).toFixed(2); <br>        let averageSpeedInKbps = (totalKbSpeed / numTests).toFixed(2); <br>        let averageSpeedInMbps = (totalMbSpeed / numTests).toFixed(2); <br><br>        // Display average speeds <br>        bitSpeed.innerHTML += `${averageSpeedInBps}`; <br>        kbSpeed.innerHTML += `${averageSpeedInKbps}`; <br>        mbSpeed.innerHTML += `${averageSpeedInMbps}`; <br>        info.innerHTML = "Test Completed!"; <br>    } else { <br>        // Run the next test <br>        startTime = new Date().getTime(); <br>        image.src = imageApi; <br>    } <br>} <br><br>// Initial function to start tests <br>const init = async () => { <br>    info.innerHTML = "Testing..."; <br>    startTime = new Date().getTime(); <br>    image.src = imageApi; <br>}; <br><br>// Run tests when window loads <br>window.xxxxonload = () => { <br>    for (let i = 0; i < numTests; i++) { <br>        init(); <br>    } <br>}; <br>     <br>     <br>     <br>    </style> <br></head> <br><br><body> <br><br>    <div class="container"> <br>        <img src="speedometer.png"> <br>        <p id="info"><span>...</span></p> <br>        <p id="mbs"><span>Speed In Mbs: </span></p> <br>        <p id="kbs"><span>Speed In Kbs: </span></p> <br>        <p id="bits"><span>Speed In Bits: </span></p> <br>    </div> <br><br><br>    <script src="index.js"></script> <br></body> <br><br></html> <br><br>@import‎ url('<a href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');" target="_blank" class="ke-link">https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');</a><br><br>*{ <br>    margin: 0; <br>    padding: 0; <br>    box-sizing: border-box; <br>    font-family: 'Poppins', sans-serif; <br>} <br><br>body{ <br>    height: 100vh; <br>    background: linear-gradient(#27272a 50%, #075985 50%); <br>    display: flex; <br>    align-items: center; <br>    justify-content: center; <br>} <br><br>.container{ <br>    background-color: #fff; <br>    display: flex; <br>    flex-direction: column; <br>    align-items: center; <br>    width: 350px; <br>    padding: 0 2em 1em; <br>    border-radius: 1em; <br>    font-size: 1.2em; <br>    line-height: 1.6em; <br>    box-shadow: 0 1.6em 2.4em rgba(40, 4, 67, 0.3); <br>} <br><br>.container img{ <br>    width: 100%; <br>} <br><br>p{ <br>    font-weight: 400; <br>    color: #747497; <br>} <br><br>span{ <br>    font-weight: 400; <br>    color: #090931; <br>} <br><br><br><br><br><br><br><br><br><br><br><br><br>let startTime, endTime; <br>let imageSize = ""; <br>let image = new Image(); <br>let bitSpeed = document.getElementById("bits"), <br>    kbSpeed = document.getElementById("kbs"), <br>    mbSpeed = document.getElementById("mbs"), <br>    info = document.getElementById("info"); <br><br>let totalBitSpeed = 0; <br>let totalKbSpeed = 0; <br>let totalMbSpeed = 0; <br>let numTests = 1; <br>let testCompleted = 0; <br><br>// Get random image from unsplash.com <br>let imageApi = "<a href="https://source.unsplash.com/random?topic=nature" target="_blank" class="ke-link">https://source.unsplash.com/random?topic=nature</a>"; <br><br>// When image loads <br>image.xxxxonload = async function () { <br>    endTime = new Date().getTime(); <br><br>    // Get image size <br>    await fetch(imageApi).then((response) => { <br>        imageSize = response.headers.get("content-length"); <br>        calculateSpeed(); <br>    }); <br>}; <br><br>// Function to calculate speed <br>function calculateSpeed() { <br>    // Time taken in seconds <br>    let timeDuration = (endTime - startTime) / 1000; <br>    // Total bits <br>    let loadedBits = imageSize * 8; <br>    let speedInBts = loadedBits / timeDuration; <br>    let speedInKbs = speedInBts / 1024; <br>    let speedInMbs = speedInKbs / 1024; <br><br>    totalBitSpeed += speedInBts; <br>    totalKbSpeed += speedInKbs; <br>    totalMbSpeed += speedInMbs; <br><br>    testCompleted++; <br><br>    // If all tests completed (we get 5 image then calculate average) <br>    if (testCompleted === numTests) { <br>        let averageSpeedInBps = (totalBitSpeed / numTests).toFixed(2); <br>        let averageSpeedInKbps = (totalKbSpeed / numTests).toFixed(2); <br>        let averageSpeedInMbps = (totalMbSpeed / numTests).toFixed(2); <br><br>        // Display average speeds <br>        bitSpeed.innerHTML += `${averageSpeedInBps}`; <br>        kbSpeed.innerHTML += `${averageSpeedInKbps}`; <br>        mbSpeed.innerHTML += `${averageSpeedInMbps}`; <br>        info.innerHTML = "Test Completed!"; <br>    } else { <br>        // Run the next test <br>        startTime = new Date().getTime(); <br>        image.src = imageApi; <br>    } <br>} <br><br>// Initial function to start tests <br>const init = async () => { <br>    info.innerHTML = "Testing..."; <br>    startTime = new Date().getTime(); <br>    image.src = imageApi; <br>}; <br><br>// Run tests when window loads <br>window.xxxxonload = () => { <br>    for (let i = 0; i < numTests; i++) { <br>        init(); <br>    } <br>}; <br><br><br><br><a href="https://github.com/AsmrProg-YT/100-days-of-javascript/blob/master/Day%20%2340%20-%20Detect%20Internet%20Speed/style.css" target="_blank" class="ke-link">https://github.com/AsmrProg-YT/100-days-of-javascript/blob/master/Day%20%2340%20-%20Detect%20Internet%20Speed/style.css</a><br><br><br><br><br><br><br><br></p><p> </p><p> </p><p> </p><p> </p><p> </p><p style="text-align: start;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>13:14 - 최종 결과</b></span></p><p style="text-align: start;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>소스 코드 : <a href="https://github.com/AsmrProg-YT/100-days-of-javascript/tree/master/Day%20%2340%20-%20Detect%20Internet%20Speed" target="_top" class="ke-link">https://github.com/AsmrProg-YT/100-days-of-javascript/tree/master/Day%20%2340%20-%20Detect%20Internet%20Speed</a>  </b></span></p><p style="text-align: start;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>구독: <a href="https://www.youtube.com/@AsmrProg/featured" target="_top" class="ke-link">https://www.youtube.com/@AsmrProg/featured</a> </b></span></p><p style="text-align: start;"><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><a style="color: #3b82f6;" href="https://morioh.com/topic/html" target="_top" class="ke-link">#html </a><a style="color: #3b82f6;" href="https://morioh.com/topic/css" target="_top" class="ke-link">#css </a><a style="color: #3b82f6;" href="https://morioh.com/topic/javascript" target="_top" class="ke-link">#자바스크립트</a>  </b></span></p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p><span data-ke-size="size18"><b><span style="font-family: 'Noto Serif KR';"> <span style="font-family: 'Noto Serif KR';">HTML, CSS 및 자바스크립트</span> </span></b></span></p>
<!-- -->
]]>
첫댓글 https://www.w3schools.com/css/tryit.asp?filename=trycss_default
https://morioh.com/a/eee0a648e119/responsive-ecommerce-clothing-website-design-using-html-css-and-javascr